Dynamically change the property of IG row selector based on condition in Oracle APEX

Introduction: –
This document explains how to disable row selection for specific records in an Oracle APEX Interactive Grid based on a column value, and how to override the Select-All checkbox behavior so that it only selects eligible rows.

The following technologies have been used to dynamically change the property of IG row selector based on condition in Oracle APEX

  • Oracle APEX
  • JavaScript / jQuery

Why we need to do: –

Sometimes business rules require preventing selection of certain rows in an Interactive Grid. For example, rows where ‘STATUS’ column is  having ‘INACTIVE’ data should be excluded from selection. This ensures that only permitted data is processed for batch operations.

How do we solve:

By iterating through the Interactive Grid’s data model, we can identify the rows that should be non-selectable, remove their selection check boxes, and prevent click actions. We also override the Select-All behavior to select only allowed rows, skipping those flagged as non-selectable.

Step 1 : I have create Interactive grid region which is values of Active and Inactive records as Status column.

Step 2 : Add this JavaScript code in ‘Execute when Page Loads’ section :
Code

function disableRowSelector() {
var igStaticId = "MYREPORT"; 
var gridView = apex.region(igStaticId).widget().interactiveGrid("getViews", "grid");
var model = gridView.model;
var nonSelectedeIds = [];
var isSelectAllActive = false;
model.forEach(function(record) {
var firstName = model.getValue(record, "FIRST_NAME"); 
var recordId = model.getRecordId(record);
if (firstName === "Rajesh") { 
nonSelectedeIds.push(recordId);
var $row = $("tr[data-id='" + recordId + "']");
$row.find("th span.u-selector").remove(); 
$row.attr("data-no-select", "Y");
}
});
$("tr[data-no-select='Y'] th").off("click").on("click", function(e) {
e.stopImmediatePropagation();
});
$(".a-GV-header .u-selector").off("click").on("click", function(e) {
e.preventDefault();
e.stopImmediatePropagation();
if (!isSelectAllActive) {
var allowed = [];
model.forEach(function(record) {
var recId = model.getRecordId(record);
if (!nonSelectedeIds.includes(recId)) {
allowed.push(record);
}
});
gridView.setSelectedRecords(allowed);
isSelectAllActive = true;
} else {
gridView.setSelectedRecords([]);
isSelectAllActive = false;
}
});
console.log("Non-selectable row IDs:", nonSelectedeIds);
}

Conclusion: 

This script enforces row-level selection rules in Oracle APEX Interactive Grid, ensuring only valid rows are selectable. It also customizes the Select-All functionality to adhere to these rules, improving both data integrity and user experience.

Recent Posts