oracle-databaseoracle-apexinteractive-grid

Oracle APEX: Interactive Grid Custom buttons disabled/enabled


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.


Solution

  • 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);