Show an additional scrollbar on top (Interactive Grid Cheats #2)

As we said in the previous blog, we want to share a few little tips and tricks with you that help us again and again and appear useful in developments.

Let's get to the second tip :-) 

#2 Show an additional scrollbar on top

It happens from time to time that a grid contains a lot of columns and therefore becomes wider than the screen. If the grid contains a lot of records, it can be difficult to see the columns that are at the right end of the grid. So you have to scroll vertically to the bottom of the grid before you can scroll the horizontal bar to the right. Then scroll up again vertically to get to the desired position. We believe that this can be annoying for every user. A possible solution is to insert an additional scroll bar above the data records. Again, only one command is enough for us. This time we add a CSS class to integrate the scrollbar.

But first of all we assign a "CSS-Class" to the grid, so that we can select it via CSS. In our example we name it "my_grid".

Then we enter the following code in the CSS inline code editor of the page:

.my_grid .a-GV-w-hdr{

    overflow-x: auto !important;

}

That´s it! An additional horizontal scrollbar was added :-)

So easily, or?

And here is the demo app.

We hope the tips and tricks will help you. If you have questions or suggestions, please leave us a comment ;-)

Automatically activate the "edit" mode on page load (Interactive Grid Cheat #1)

In this series we want to list tiny useful tricks and tips for the Oracle APEX Interactive Grid one by one. Just a few additional lines of CSS or JavaScript code can quickly provide solutions, so that the grid can be customized in a user-friendly way.

Let's start with the first tip :-)

#1 Automatically activate the "edit" mode on page load

A customer asked us why he always has to switch to "edit" mode in the grid first. It is inconvenient to click first in a cell and then activate the edit mode either by clicking the "edit" button or by clicking again. With one extra line of JavaScript code we can solve the problem ;-)

First, we assign a static-id to the Interactive Grid, so that we can address it via JavaScript without any problems. In our example this is "my_ig". 

Then we create a Page Load Dynamic Action with a True condition that executes a JavaScript code. Enter the following line in the code editor:

apex.region("my_ig").call("getActions").set("edit", true);

Since we don't need the "edit" button anymore, we can hide it with another line. 

To do this, add the following line in the code editor:

apex.region("my_ig").call("getActions").hide("edit");

And here is the link for the demo app.

We hope the tips and tricks will help you. If you have any questions or suggestions, please leave us a comment ;-)

Quellen:

https://docs.oracle.com/en/database/oracle/application-express/20.1/aexjs/interactiveGrid.html