Interactive Grid JavaScript API: The Five Methods You Use Most

Programmatic Control of Interactive Grid

Interactive Grid is APEX’s most feature-rich component, and its JavaScript API gives you programmatic control over grid behavior that goes beyond what declarative options offer. While the full API is extensive, five methods cover the vast majority of real-world use cases.

1. Getting the Grid Widget Reference

// Set the Static ID of your IG region to "empGrid"
var grid = apex.region("empGrid").widget().interactiveGrid("getViews", "grid");
var model = grid.model;

2. Getting and Setting Cell Values

var selectedRecords = grid.getSelectedRecords();
if (selectedRecords.length > 0) {
    var record = selectedRecords[0];
    var empName = model.getValue(record, "EMPLOYEE_NAME");
    model.setValue(record, "STATUS", "APPROVED");
}

3. Iterating Over All Rows

var totalSalary = 0;
model.forEach(function(record) {
    var salary = parseFloat(model.getValue(record, "SALARY")) || 0;
    totalSalary += salary;
});
apex.item("P10_TOTAL_SALARY").setValue(totalSalary.toFixed(2));

4. Adding and Deleting Rows

// Add a new row
var newRecord = model.insertNewRecord();
model.setValue(newRecord, "DEPARTMENT_ID", apex.item("P10_DEPT_ID").getValue());

// Delete selected rows
var selected = grid.getSelectedRecords();
if (selected.length > 0) {
    model.deleteRecords(selected);
}

5. Refreshing the Grid

apex.region("empGrid").refresh();

This re-executes the source query and reloads the grid data from the server. Any unsaved client-side changes will be lost, so prompt the user if there are pending edits.

Practical Tips

When using the IG JavaScript API in Dynamic Actions, make sure the grid has rendered before accessing the widget reference. For actions that manipulate the grid, fire them on the Selection Change or Save events of the Interactive Grid rather than on page load. Also set the Static ID on your IG region first, as without it you cannot get the widget reference in JavaScript.