Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
225
enable/disable checkbox in grid
posted

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,

  • 18204
    Suggested Answer
    Offline posted in reply to [Infragistics] Michael H.

    Hello Adam Kopriva,

     

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

    http://ko.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.

    igGrid - DisableCheckbox.zip
  • 18204
    Offline posted

    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.