jqGrid with checkbox in all columns

Question

I have a jqGrid with six columns, each with a 'checkbox' format. I need to get all of the checkboxes' selected and unselected values based on Column Names. Is it possible?

The first column is to provide an option for selecting all the remaining columns together. I'm unable to add event listeners like onclick or onselect when defining colModel.

$("#Grid").jqGrid({
    url: '@Url.Action("Access", "Authorization")' + '?role=' + encodeURIComponent($('input#hIDRole').val()),
    datatype: 'json',
    colNames: ["IDAccess","Permission", "ALL", "Read", "Add", "Edit", "Copy", "Delete"],
    colModel: [
        { name: 'IDAccess', index: 'IDAccess', width: 10, resizable: false, editable: false, hidden: true },
        { name: 'Permission', index: 'Permission', width: 100, resizable: false, editable: false, hidden: false },
        { name: 'ALL', index: 'ALL', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, formatoptions: { disabled: false }, onselect: "checkBox(this.value())" },
        { name: 'IsRead_Allowed', index: 'IsRead_Allowed', editable: true, edittype: 'checkbox', formatter: "checkbox", editoptions: { value: "True:False" }, width: 50, resizable: false, formatoptions: { disabled: false }, onclick: "checkBox(checked,this.value)" },
        { name: 'IsCreate_Allowed', index: 'IsCreate_Allowed', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, editable: true, formatoptions: { disabled: false }, onclick:"checkBox(event)"  },
        { name: 'IsUpdateAllowed', index: 'IsUpdateAllowed', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, editable: true, formatoptions: { disabled: false }, },
        { name: 'IsCopy_Allowed', index: 'IsCopy_Allowed', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, editable: true, formatoptions: { disabled: false } },
        { name: 'IsDeleteAllowed', index: 'IsDeleteAllowed', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, editable: true, formatoptions: { disabled: false } },
    ],
    //rowNum: 10,
    //rowList: [10],
    pager: "#pager-json",            
    autowidth: true,            
    loadComplete: function () {
        var rowIDs = $("#Grid").jqGrid('getDataIDs');
        for (var i = 0; i < rowIDs.length ; i++) {
            var rowId = rowIDs[i];
            var rowData = jQuery('#Grid').jqGrid('getRowData', rowId);
            //below code to check the All column if the other columns have true in the db. But once checked attribute is added i am not able to uncheck
            if ((rowData['IsRead_Allowed'] == "True") && (rowData['IsCreate_Allowed'] == "True") && (rowData['IsUpdateAllowed'] == "True")
                && (rowData['IsCopy_Allowed'] == "True") && (rowData['IsDeleteAllowed'] == "True")) {
                var check = $("#" + rowId).find('input[type="checkbox"]');
                check.attr('checked', 'checked');
            }
        }
        for (var i = 0; i < rowIDs.length; i++) {
            var rowData = rowIDs[i];
            if (rowData['IsCopy_Allowed'] == null) {
                //alert("1");
                var checkbox = $("#Grid" + rowData.i);
                //checkbox.css("visibility", "hidden");
                checkbox.attr("disabled", true);
            }
        }
    }
});

Answer 1

You can use the following selector to get all of the input elements:

jQuery(".jqgrow td input", "#my_grid").each(function(){
        jQuery(this).unbind('click');
        jQuery(this).click(function(){
            ...
        });
});

The input element will actually be contained within a td:

<td ... aria-describedby="my-column"><input type="checkbox" ...></td>

You can use the aria-describedby attributed on the td element to determine whether or not to add your click handler. Something like:

var col = jQuery(this).parent().attr('aria-describedby');
if (col === "IDAccess") {
    // Add handler here, etc...
}

You would need to go through a similar exercise to find all checkboxes in a particular row, although with the ID you might be able to restrict the search, ie:

jQuery(".jqgrow td input", "#" + my_id)

---

Alternatively, you can also assign each column a unique class using the classes colmodel option. For example: classes:'col1'. That would simplify your code to setup the click handlers, and may allow you to avoid using the aria attribute at all.