https://github.

com/mgoricki/orclapex-ig-cheat-sheet

Oracle APEX Interactive Grid Cheat Sheet

This Cheat Sheet is a collection of blog/forum posts related to APEX Grid from version 5.1.*

Oracle Documentation
From APEX 18.2 there's Interactive Grid documentation available
on https://docs.oracle.com/database/apex-18.2/AEXJS/interactiveGrid.html

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

Other Links
Interactive Grid: Download as PDF with jsPDF by MENNO HOOGENDIJK

Pimp my Grid App - IG Sample App

How to Fix Blank Toolbar DIV

OTN

Hidden and display columns

How to set value of a hidden column

How to set value of a display column

Processing
Process Selected Rows

Disabled Cells
Disable Column Actions How to validate disable cell in interactive grid?

Readonly Cells
Making Columns Readonly

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

Interactive Report vs Interactive Grid

https://community.oracle.com/thread/4049804

Horizontal Scroll
https://community.oracle.com/thread/4050640 https://community.oracle.com/thread/3812273

Interactive grid color based on a value

https://community.oracle.com/thread/4047292

Grid Selection (copy to clipboard)

https://community.oracle.com/thread/4051443

Highlight Row/Cell
https://community.oracle.com/thread/4036606

Set Selected Rows After Refresh

https://community.oracle.com/thread/4060416
More About Selecting Grid Rows
https://community.oracle.com/thread/4030402

Interactive Grid with more than one table

https://community.oracle.com/message/14473170#14473170

How to validate IG column values on page load

https://community.oracle.com/thread/4068205

How To's

 Pagination How To's

Get Widget
Before APEX 18.1 you should use:

apex.region("emp").widget().interactiveGrid

instead of

apex.region("emp").call

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);

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

1. Add static ID (for example tabs) to the tabs region.

2. 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();
}
});

Hide Toolbar Search Bar Field

function(config) {
if (!config.toolbar) {
config.toolbar = {};
}
config.toolbar.searchField = false;
return config;
}

Hide Toolbar Action Menu

function(config) {
 if (!config.toolbar) {
config.toolbar = {};
}
config.toolbar.actionMenu = false;
return config;
}

In 5.1.2.00.09 there's a bug Bug 26403439. Workaround available here.

Disable Column Reorder

function (config){
config.views.grid.features.reorderColumns = false;
return config;
}

or (from 5.1.1):

function(config) {
config.defaultGridViewOptions = {
reorderColumns: false
}
return config;
}

By using this property you can still reorder columns by using keyboard or Columns dialog (tested
in 5.1.2.00.09) - known Bug 26415403. Demo is available here.

Disable Column Resize

function(config) {
config.defaultGridViewOptions = {
resizeColumns: false
}
return config;
}

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")}});

More on John's blog

To add custom row action to specific position in row action menu use this JS code (only change
second if statement) and add it to the Function and Global Variable Declaration page property:
$(function() {
$("#emp").on("interactivegridviewchange", function(event, data) {
if ( data.view === "grid" && data.created ) {
var view$ = apex.region("emp").call("getViews", "grid");
if (view$.rowActionMenu$){
var menu$ = view$.rowActionMenu$.menu("option").items;
for (i = 0; i < menu$.length; i++ ) {
if (menu$[i].action === 'row-duplicate'){
menu$.splice(i+1
, 0
, {
type:"action",
label:"After Copy Action",
icon: "fa fa-user",
action: function(menu, element) {
var record = view$.getContextRecord( element )[0];
alert('After copy action: '+view$.model.getValue(record, "EMPNO"));
}
})
break;
}
}
}
}
});
});

Demo is available here

Removing Row Actions

function(config) {
config.initActions = function( actions ) {
actions.remove("row-duplicate");
};
return config;
}

To list all action names see Actions paragraph above. More on OTN

Persistant Row Selection

function(config) {
config.defaultGridViewOptions = {
persistSelection: true
};
return config;
}

Auto Add Row

How to turn off auto add row feature:

function(config) {
config.editable.autoAddRow = false;
return config;
}

Hide Grid Footer

function(config) {
config.defaultGridViewOptions = {
footer: false
};
return config;
}

There are also options for other grid views (defaultIconViewOptions, defaultIconViewOptions,
defaultDetailViewOptions).

Row Selector Properties

Declarative properties override config properties. To enable config properties, delete Row Selector
column. Possible properties are multiple and selectAll:

function(config) {
config.defaultGridViewOptions = {
multiple: true,
selectAll: true
}
return config;
}

You can set rowHeader to sequence to display rownumbers instead of selector:

function(config) {
config.defaultGridViewOptions = {
rowHeader: 'sequence'
}
return config;
}

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();

Disable Button based on current row's column value

It's important to set Static ID property of the button (in this example it's btnSubmit)

var vModel = this.data.model;

var vRecord = this.data.selectedRecords[0];
if(vRecord){
vColValue = vModel.getValue(vRecord, 'JOB');
if(vColValue=='MANAGER'){
apex.item('btnSubmit').disable();
}else{
apex.item('btnSubmit').enable();
}
}
Demo is available here.

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.

Column Configuration

Disable header activation

From version 5.1.1 it's possible to disable column header menu:

function(config) {
config.defaultGridColumnOptions = {
noHeaderActivate: true
};
return config;
}

The noHeaderActivate option still allows resize, reordering and sorting of columns.

Also, it's possible to disable specific feature:

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