Oracle APEX Interactive Grid Cheat Sheet

This Cheat Sheet is a collection of code snippets and blog posts/ forum entries related to the APEX Interactive Grid.

JS Docs for 18.2

https://docs.oracle.com/database/apex-18.2/AEXJS/interactiveGrid.html

JS Docs for 19.1

https://apex.oracle.com/pls/apex/apex_pm/r/190019/files/static/v160/jsdoc/index.html

Get Widget

this is the base object for all operations

apex.region('emp')

Methods

calling the methods from the Interactive Grid API

apex.region('emp').call('refresh')
apex.region('emp').call('getCurrentView')
//and so on

Get Record

var grid    = apex.region('emp').call('getViews','grid'); 
var model   = grid.model; 
var record  = model.getRecord(vRecordId);

Get Grid Options

apex.region("emp").call("option","config")

Get Model Options

apex.region("emp").call("getViews").grid.model.getOption("fields");

For possible options look at model.js defaultOptions object

Get Selected Records

From the model:

apex.region("emp").call("getViews","grid").view$.grid("getSelectedRecords")

Selected DOM elements

apex.region("emp").call("getViews","grid").view$.grid("getSelection")

Check Edit Mode

To check if IG is in edit mode use this:

apex.region("emp").call("getActions").get("edit")

Set Column Value

var grid        = apex.region('emp').call('getViews','grid');  
var model       = grid.model; 
var record      = model.getRecord(vRecordId);
model.setValue(record,'ENAME', vEname);

Initial Grid Configuration

function(config) {

    if (!config.toolbar) {
        config.toolbar = {};
    }
    
    config.toolbar.searchField = false; // hide toolbar search field 

    config.toolbar.actionMenu = false; // hide toolbar action menu

    // disable column reorder
    config.views.grid.features.reorderColumns = false;

    // enable selection persistance across different pages
    config.views.grid.features.persistSelection = true;

    // hide grid footer
    config.views.grid.features.footer = false;
    
    // disable initial selection
    config.initialSelection = false;

    // row selector properties. note that declarative options will override these
    config.views.grid.features.multiple = true;	// multiple selection
    config.views.grid.features.selectAll = true; // selectAll button

    //display rownumbers instead of selector
    config.views.grid.features.rowHeader = 'sequence';

    // turn off auto add row feature
    config.editable.autoAddRow = false;

    // remove certain actions. see list here
    config.initActions = function( actions ) {
        actions.remove("row-duplicate");
    };
    
    // always return the config object
    return config;
}

Initial Grid Column Configuration

function(config) {
    // create 'features' object if it does not exist
    config.features = config.features || {};
    config.features.sort = false;
    config.features.aggregate = false;

    config.defaultGridViewOptions = {
        resizeColumns: false,
        noHeaderActivate: true //The noHeaderActivate option still allows resize, reordering and sorting of columns.
    }

    return config;
}

Refresh Selected Rows (for Editable IG)

apex.region("emp").call("getActions").invoke("selection-refresh")

For non-editable IG look at http://roelhartman.blogspot.hr/2017/07/refresh-selected-rows-in-interactive.html

Refresh IG on tab activation

Add static ID (for example tabs) to the tabs region.
Add to page attribute execute when page loads:

$("#tabs").on("atabsactivate", function(event, ui) {
    if (ui.showing) {
        ui.active.panel$.find(".a-GV").grid("refresh");
    }
});

Refresh IG on Region Display Selector activation

$('.apex-rds').data('onRegionChange', function(mode, activeTab) {  
  if (activeTab.href != "#SHOW_ALL"){  
    apex.region(activeTab.href.replace("#","")).refresh();  
  }  
});

Actions

To list actions call:

apex.region("emp").call("getActions").list().forEach(function(a) { console.log("Action Label: " + a.label + ", Name: " + a.name + (a.choice !== undefined ? ", Choice: " + a.choice : "") ); });

To call action use: apex.region("emp").call("getActions").invoke("show-sort-dialog");

Adding Row Actions

apex.region("emp")
    .call("getViews").grid
    .rowActionMenu$.menu("option")
    .items.push({type:"action", label:"Hi", action: function(){alert("Hi")}});

Cancel changes and refresh grid

var view = apex.region("emp").call("getCurrentView");

if ( view.internalIdentifier === "grid" ) { // only grid supports editing
    view.model.clearChanges();
}
apex.region("emp").refresh();

Focus IG

apex.region("regionStaticID").focus();

Interactive Grid Events

interactivegridviewmodelcreate

explanation and example here
interactivegridviewchange
interactivegridcreate
interactivegridreportsettingschange
interactivegridselectionchange
interactivegridsave

Fires after the save event of the IG has finished. Similar to the "afterrefresh" event of an Interactive Report. You can use this as a Custom Event in a Dynamic Action.

Blog Posts

John Snyders (Oracle APEX dev team)

Interactive Grid: Under the Hood

Interactive Grid column widths

How to hack APEX Interactive Grid Part 1

How to hack APEX Interactive Grid Part 2

How to hack APEX Interactive Grid Part 3

APEX Interactive Grid API Improvements in 5.1.1

How to hack APEX Interactive Grid Part 4

APEX Client-Side Validation

APEX Interactive Grid Cookbook

Some minor new things in APEX 18.2

OTN

Disable Column Resize, Sort, Reorder Columns

The noHeaderActivate option still allows resize, reordering and sorting columns. In 5.1.1 you can disable those features with the Advanced JavaScript Code the config options are config.views.grid.features: resizeColumns, reorderColumns, sort