Interactive Grid Checkbox

Referred from John’s cookbook sample app.

Preview

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

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

  1. Create Interactive Grid
  2. Give Grid static ID as “tasks”
  3. Enable Editing
  4. Go to the column DONE Column select item type as “Switch”.
  5. Add Column css class “doneCheckbox is-readonly”
  6. Add Column Static ID “C_DONE”
  7. JavaScript Initialization 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;
}

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

  1. Finally put the page JavaScript on page or save a JavaScript file and refer to the page.
(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.