You are on page 1of 8



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

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


Hidden and display columns

How to set value of a hidden column

How to set value of a display column

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

Horizontal Scroll

Interactive grid color based on a value

Grid Selection (copy to clipboard)

Highlight Row/Cell

Set Selected Rows After Refresh
More About Selecting Grid Rows

Interactive Grid with more than one table

How to validate IG column values on page load

How To's

 Pagination How To's

Get Widget
Before APEX 18.1 you should use:


instead of


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

Get Grid Options


Get Model Options


For possible options look at model.js defaultOptions object

Get Selected Records

From the model:


Selected DOM elements


Check Edit Mode

To check if IG is in edit mode use this:


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)


For non-editable IG look at


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) {$.find(".a-GV").grid("refresh");

Refresh IG on Region Display Selector activation

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

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 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 - known Bug 26415403. Demo is available here.

Disable Column Resize

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

To list actions call:

apex.region("emp").call("getActions").list().forEach(function(a) { console.log("Action Label: "

+ a.label + ", Name: " + + (a.choice !== undefined ? ", Choice: " + a.choice : "") );

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

Adding Row Actions

.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'){
, 0
, {
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"));

Demo is available here

Removing Row Actions

function(config) {
config.initActions = function( actions ) {
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,

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


Focus IG

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

var vRecord =[0];
vColValue = vModel.getValue(vRecord, 'JOB');
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;