Documente Academic
Documente Profesional
Documente Cultură
com/mgoricki/orclapex-ig-cheat-sheet
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
Other Links
Interactive Grid: Download as PDF with jsPDF by MENNO HOOGENDIJK
OTN
Processing
Process Selected Rows
Disabled Cells
Disable Column Actions How to validate disable cell in interactive grid?
Readonly Cells
Making Columns Readonly
Horizontal Scroll
https://community.oracle.com/thread/4050640 https://community.oracle.com/thread/3812273
Highlight Row/Cell
https://community.oracle.com/thread/4036606
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);
apex.region("emp").call("getViews","grid").view$.grid("getSelectedRecords")
apex.region("emp").call("getActions").get("edit")
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.
Actions
To list actions call:
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;
}
}
}
}
});
});
To list all action names see Actions paragraph above. More on OTN
function(config) {
config.editable.autoAddRow = false;
return config;
}
There are also options for other grid views (defaultIconViewOptions, defaultIconViewOptions,
defaultDetailViewOptions).
function(config) {
config.defaultGridViewOptions = {
multiple: true,
selectAll: true
}
return config;
}
function(config) {
config.defaultGridViewOptions = {
rowHeader: 'sequence'
}
return config;
}
Focus IG
apex.region("regionStaticID").focus();
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
function(config) {
config.defaultGridColumnOptions = {
noHeaderActivate: true
};
return config;
}
The noHeaderActivate option still allows resize, reordering and sorting of columns.
function(config) {
// create 'features' object if it does not exist
config.features = config.features || {};
config.features.sort = false;
config.features.aggregate = false;
return config;
}