Interactive Grid Checkbox

Referred from John’s cookbook sample app.

Checkboxes are little bit tricky and difficult. I was trying to implement it for long time but it’s bit problematic than i thought. After John Snyders cookbook update for 19.2 things are very easy.

I would like to recommend to go through Jhon’s Updates

He has implemented the checkbox in Interactive Grid. I have filtered out the required code and process he used to implement, hope this will help to add the checkbox.

Sample table script

Copy Code

CREATE TABLE  "EMP_TEST"
   (	"NAME" VARCHAR2(4000),
     	"ACTIVE" VARCHAR2(22)
   )
/

Create Interactive Grid
Give Grid static ID as “tasks”
Enable Editing
Go to the column DONE Column select item type as “Switch”.
Add Column css class “doneCheckbox is-readonly”
Add Column Static ID “C_DONE”
JavaScript Initialization Code

Copy Code

function(config) {
    /* A css hack to display a checkbox. See code in Task.js that makes it clickable */
    config.defaultGridColumnOptions = {
        cellTemplate: "<span class='fa fa-square-o checkState&DONE.' aria-hidden='true'></span><span class='u-vh'>&DONE.</span>",
         noHeaderActivate: true
    };
    /* want just control break */
    config.features = {
        aggregate: false,
        sort: false
    };
    return config;
}

Inline CSS

Copy Code

.checkStateY.fa-square-o::before {
    content: "\f046";
}
.checkStateN.fa-square-o::before {
    content: "\f096";
}

Finally put the page JavaScript on page or save a JavaScript file and refer to the page.

Copy Code

(function ( $, region){   
$(function() {
        var tasks$ = $("#tasks");

        function doneValue(value) {
            return {v: value, d: apex.item("C_DONE").displayValueFor(value)};
        }

        // the model gets released and created at various times such as when the report changes
        // listen for model created events so that we can subscribe to model notifications
        tasks$.on("interactivegridviewmodelcreate", function(event, ui) {
            var model = ui.model;

            // work around an IG issue with defaults for columns that have a display value
            model.getOption("fields").DONE.defaultValue = doneValue("N");

            // Reordering assumes that the client has all the data so call fetchAll when the model is created.
            // Use with caution so that too much data isn't loaded.
            // Note this is only done for the grid veiw. Which should be the only view
            if ( ui.viewId === "grid" ) {
                // Can remove if data will always be less than 50 records
                model.fetchAll(function() {});
            }
        });

        function checkboxToggle(event, region, column) {
            var value,
                view = region.call("getViews").grid,
                model = view.model,
                record = view.getContextRecord(event.target)[0];

            // Make sure record can be edited. Assume if record can be then so can the checkbox column
            if (model.allowEdit(record)) {
                value = model.getValue( record, column );
                model.setValue( record, column, value.v === "Y" ? doneValue( "N" ) : doneValue( "Y" ) );
            }
        }
        tasks$.on("click", ".doneCheckbox", function(event) {
            checkboxToggle(event, region("tasks"), "DONE");
        }).on("keydown", ".doneCheckbox", function(event) {
            // handle unmodified space key
            if (event.which === $.ui.keyCode.SPACE && !event.altKey && !event.ctrlKey) {
                checkboxToggle(event, region("tasks"), "DONE");
                event.preventDefault();
            }
        });

    });

})(apex.jQuery, apex.region);

Demo

If you don’t want to bother with so much javascript and other css codeing, then try the Commercially Supported plugin for IG Checkbox Pro (20.1) .

Up next : Select all checkbox.

Related Posts

Leave a Reply Cancel reply