APEX: Updating Interactive Grid Cells

Moving from the old tabular form to the interactive grid takes some getting used to. Especially when trying to manually update cells with JavaScript.

Here is an example of how to access and modify particular cells in an interactive grid with JavaScript. The example promotes an employee when the Promote link is clicked, which doubles the employee’s salary, and assigns him a new job.

First I built an interactive grid on the EMP table. I’ve used all the defaults except:
Enable editing with Update Row.
Set the region’s static ID to emps.
Added a link column with target type: URL, URL: #

The link text is set to Promote, and I added class (ig-link) so that I can connect a dynamic action to it:

Next I created a dynamic action that fires when the Promote link is clicked.

The true action is a Execute JavaScript Code action, with the following code:

[code language=”javascript”]
//Get the link element that was clicked
var $te = $(this.triggeringElement);

//Get the ID of the row
var rowId = $te.closest(‘tr’).data(‘id’);

//Identify the particular interactive grid
var ig$ = apex.region("emps").widget();

//Fetch the model for the interactive grid
var model = ig$.interactiveGrid("getViews","grid").model;

//Fetch the record for the particular rowId
var record = model.getRecord(rowId);

//Access the cell value via the column name
var sal = model.getValue(record,"SAL");

//Set the values for the JOB and SAL cells
model.setValue(record,"JOB",’MANAGER’);
model.setValue(record,"SAL",sal*2);
[/code]

Here is the working example:

It is worth noting that the <tr> element of the interactive grid row contains the row’s unique identifier. This could be a row ID or a primary key value, depending on how you configured the grid.