Interactive Grid Checkbox

Share on:

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 recomend 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

1CREATE TABLE  "EMP_TEST"
2   (	"NAME" VARCHAR2(4000),
3     	"ACTIVE" VARCHAR2(22)
4   )
5/
  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
 1function(config) {
 2    /* A css hack to display a checkbox. See code in Task.js that makes it clickable */
 3    config.defaultGridColumnOptions = {
 4        cellTemplate: "<span class='fa fa-square-o checkState&DONE.' aria-hidden='true'></span><span class='u-vh'>&DONE.</span>",
 5         noHeaderActivate: true
 6    };
 7    /* want just control break */
 8    config.features = {
 9        aggregate: false,
10        sort: false
11    };
12    return config;
13}
  1. Inline CSS
1.checkStateYes.fa-square-o::before {
2    content: "\f046";
3}
4.checkStateOn.fa-square-o::before {
5    content: "\f046";
6}
  1. Finally put the page JavaScript on page or save a JavaScript file and refer to the page.
 1(function ( $, region){   
 2$(function() {
 3        var tasks$ = $("#tasks");
 4
 5        function doneValue(value) {
 6            return {v: value, d: apex.item("C_DONE").displayValueFor(value)};
 7        }
 8
 9        // the model gets released and created at various times such as when the report changes
10        // listen for model created events so that we can subscribe to model notifications
11        tasks$.on("interactivegridviewmodelcreate", function(event, ui) {
12            var model = ui.model;
13
14            // work around an IG issue with defaults for columns that have a display value
15            model.getOption("fields").DONE.defaultValue = doneValue("N");
16
17            // Reordering assumes that the client has all the data so call fetchAll when the model is created.
18            // Use with caution so that too much data isn't loaded.
19            // Note this is only done for the grid veiw. Which should be the only view
20            if ( ui.viewId === "grid" ) {
21                // Can remove if data will always be less than 50 records
22                model.fetchAll(function() {});
23            }
24        });
25
26        function checkboxToggle(event, region, column) {
27            var value,
28                view = region.call("getViews").grid,
29                model = view.model,
30                record = view.getContextRecord(event.target)[0];
31
32            // Make sure record can be edited. Assume if record can be then so can the checkbox column
33            if (model.allowEdit(record)) {
34                value = model.getValue( record, column );
35                model.setValue( record, column, value.v === "Y" ? doneValue( "N" ) : doneValue( "Y" ) );
36            }
37        }
38        tasks$.on("click", ".doneCheckbox", function(event) {
39            checkboxToggle(event, region("tasks"), "DONE");
40        }).on("keydown", ".doneCheckbox", function(event) {
41            // handle unmodified space key
42            if (event.which === $.ui.keyCode.SPACE && !event.altKey && !event.ctrlKey) {
43                checkboxToggle(event, region("tasks"), "DONE");
44                event.preventDefault();
45            }
46        });
47
48    });
49
50})(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 checkox.