While browsing the Oracle APEX forum, I noticed a question from a user asking how to disable all other cells in an Interactive Grid row until the first cell has a value.
In this blog, we will explore how to disable all other cells in an Interactive Grid row until the first cell contains a value.
This approach helps enforce proper data flow, avoids incomplete or invalid records, and improves overall data integrity.
By implementing a simple client-side logic using JavaScript and Dynamic Actions, we can gain fine-grained control over row-level editing behavior in Oracle APEX.
Step1: Create IG with static ID of EMP.
Step2: Paste the following code in function global declaration.
function setCellsToReadOnly()
{
var grid = apex.region("EMP").widget().interactiveGrid("getViews", "grid");
if (!grid || !grid.model) {
return;
}
var model = grid.model;
model.forEach(function (record, index, id) {
var meta = model.getRecordMetadata(id);
var fields = meta.fields || (meta.fields = {});
["JOB", "MGR","SAL"].forEach(function (col) {
if (!fields[col]) {
fields[col] = {};
}
fields[col].ck = 1;
});
model.metadataChanged(id);
});
}
function enableCells()
{
var grid = apex.region("EMP").widget().interactiveGrid("getViews", "grid");
if (!grid || !grid.model) {
return;
}
var model = grid.model;
model.forEach(function (record, index, id) {
var meta = model.getRecordMetadata(id);
var fields = meta.fields || (meta.fields = {});
["JOB", "MGR", "SAL"].forEach(function (col) {
if (!fields[col]) {
fields[col] = {};
}
fields[col].ck = "";
});
model.metadataChanged(id);
});
}
Step 3: Call the disable function in Execute JavaScript Code under When Page Loads.
setCellsToReadOnly();
Step 4: Create a Dynamic Action on ROW_INITIALIZATION [Interactive Grid] and add a True Action → Execute JavaScript Code.
Call the same function:
setCellsToReadOnly();
Step 5: Create a Change event for the first column item with a Client-Side Condition
(Item / Column is not null).
In the True Action, call the following function:
enableCells();
Comments
Post a Comment