When an interactive grid is populated with data, most of the time the default setup is great. But for certain applications you know that the user will want to have a certain cell on a certain row in the grid being in focus.

Sure you can leave it and just let the user click on it every time. It’s not like a single click is very hard. But helping them be the most productive they can is what most of us want to do. The user can either click ctrl+enter to edit the contents of the cell or just move around in the grid with the arrow keys.

It turns out it is pretty easy, but it requires a few lines of JavaScript. It also requires finding the right event to trigger the DA on. The event we want is one that is triggered once data has been loaded into the interactive grid. The right event for this is “Page Change [Interactive Grid]”. For that event, the code I use in the DA is the following. It is set up with “Execute JavaScript code” action.

var ig = apex.region("ABC").widget().interactiveGrid("getViews","grid");
var rec = ig.model.recordAt(2);
ig.view$.grid("gotoCell", rec[0], "ORDER_DATETIME");

ABC in the first line is reference to the static id I gave the the interactive grid region. The line pulls out a reference to the interactiveGrid widget.

Row two finds the third record in the grid.

The third line puts the focus on the column ORDER_DATETIME in the record identified by line 2.

When you run the page it will after loading the page/region look like this without you doing anything else.

Notice how you see the focused cell with the blue box. The third record and order_datetime. To edit it Just press ctrl+enter and to move to a nearby cell just use the arrow keys.

Pretty neat for solutions where it is pretty obvious which cell the user will want to edit and that they will want to be in edit mode when the grid is populated.