I'm currently using Oracle APEX v24.1 with Google Chrome.
I have an updateable interactive grid with Custom Toolbar buttons Save and Clear at actions4 position.
One of the column on an Interactive Grid is a Checkbox column. This is the only column which is editable, other columns are display only.
I have a requirement to disabled Save button on a page load and enabled when any checkbox is changed within the grid.
Could anyone please point me to the right direction? Your help and support would be appreciated.
You might have a look at page 38 of IG Cookbook.
Edit: giving you the complete code. You can put it in: Page - Function and Global Variable Declaration
Todo: replace 'ig_emp' with your own region static id
(function($) {
let regionId = 'ig_emp'; // TODO: replace
function checkEnableSave(isChanged) {
let ig = apex.region(regionId);
let grid = ig.call("getViews").grid;
if ((isChanged || grid.model.isChanged()) && !grid.model.hasErrors()) {
ig.call("getActions").enable("custom-ig-save");
} else {
ig.call("getActions").disable("custom-ig-save");
}
}
// on load, initialize the custom save button state
apex.gPageContext$.on("apexreadyend", function(jQueryEvent) {
checkEnableSave();
});
// specifically check for on change on checkboxes
// so user won't need to give tab first (the model only changes on tab)
$('#' + regionId).on('change', function(jQueryEvent, data){
if ($(jQueryEvent.target).attr('type') == 'checkbox')
{
checkEnableSave(true);
}
});
$('#' + regionId).on("interactivegridviewmodelcreate", function(jQueryEvent, data){
let model = data.model;
// subscribe to model changes as to reevaluate the custom save button state
model.subscribe( {
onChange: function(type, change) {
checkEnableSave();
}
});
});
})(apex.jQuery);