Enable/Disable checkbox in grid

Hello,

How can I work with checkbox in grid when I am updating row? I would like to disable/enable it and also catch event ‘onValueChaged’ on checkbox. I know how to obtain editor and how to work with ‘igEditor’ and ‘igCombo’ but I have problem when the editor is checkbox. Please could you help me? There is an example:

 

(“#grid”).on(“iggridupdatingrowstarted”, function (evt, ui) {

var editorRequired = $(“#grid”).igGridUpdating(“editorForKey”, “Required”);

});

 

Thank you,

Hello Adam Kopriva,

 

Thank you for posting in our forums!

For disabling and enabling the checkbox, if you want to disable the checkbox for all rows, you could create a ColumnSetting for the column and set the readOnly option to true.  You could do this with the following code:

{
     name: "Updating",
     editMode: "row",
     columnSettings: [
         //  ColumnSettings will always prevent the cell from being editable.
         { columnKey: "Required", readOnly: true }
     ]
 }

If you need to dynamically disable the checkbox, you will want to handle the editCellStarting event.  You can return false from this event to not allow users to edit the checkbox.  The below code will disable editing on any rows with an ID greater than 2, for example.  You could do this with the following code:

{
     name: "Updating",
     editMode: "row",
     editCellStarting: function(evt, ui) {
         if (ui.columnKey == "Required") {
             //  Dynamically check if the cell should be editable.
             if (ui.rowID > 2) {
                 //  Cancel the event to disable editing.
                 return false;
             }
         }
     }
 }

For wiring up an onValueChanged event, the igGrid renders checkboxes as spans, which don't have a onValueChanged event.  I am currently looking into other methods to handle similar functionality.

I will have an update on my findings for you by Monday.

Hello Adam Kopriva,

 

While researching how to set an onValueChanged event for the checkbox, I came across the following post from Martin:

http://www.infragistics.com/community/forums/p/78170/394961.aspx#394961

Martin explains a way to hook up the igGrid's cell click event, and this does not take into account a user editing the checkbox by keyboard.

Martin alternatively suggested to extend our $.ig.EditorProviderCheckbox to handle this.

You can do this by calling $.ig.EditorProviderCheckbox.extend() before any igGrids are initialized.  You can then override the setValue method and call your valueChanged handler.

The below code is an example of how this can be done:

function valueChangedHandler(newVal) {
     console.log("The new value is: " + newVal);
 }

 // Must be done before igGrid is initialized.
 $.ig.EditorProviderCheckbox = $.ig.EditorProviderCheckbox.extend({
     setValue: function(val, updating){
         this._super(val, updating);
         if (updating) {
             valueChangedHandler(this.value);
         }
     }
 });

 $("#grid1").igGrid({...});

I have also attached a simple sample that demonstrates this.  If you need any further assistance with this, please let me know.

Hello Adam Kopriva,

 

Please let me know if you need further assistance with this issue.