Search code examples
jqgridjqgrid-asp.netjqgrid-formatter

How to check jqgrid checkbox by option outside the grid


I have a jqgrid with a checkbox as a leading column. I need to be able to use an optiongroup outside of the grid to either check All or uncheck All or check Some of the rows

<input id="rblAll" type="radio" name="rblOptStatus" value="All"/>Check All
<input id="rblNone" type="radio" name="rblOptStatus" value="None"/>Uncheck All
<input id="rblSome" type="radio" name="rblOptStatus" value="Some"/>Check 60%
<input id="rblReset" type="radio" name="rblOptStatus" value="Reset"  checked="checked" />Reset

So my grid is a loadOnce: true and multiselect is false. The column model is

colModel: [
        { name: 'ab', index: 'ab', width: 50, sortable: true, search: false, align: 'center', editable: true, formatter: 'checkbox', formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: 'True:False' } },

This is the code I was trying to use but the checkbox is not set.

$("input[name=rblOptStatus]").change(function () {
    var OptStatus = $("input[name=rblOptStatus]:checked").val()
    if (OptStatus == 'All') {
        var rows = jQuery("#grdOptionsGrid").getDataIDs();
        for (a = 0; a < rows.length; a++) {
            var q = jQuery("#grdOptionsGrid").jqGrid('getCell', rows[a], 'ab'); // displays true, for a checked record.
            if (q == 'False') {
                //MsgBox(q);
                //jQuery("#grdOptionsGrid").jqGrid('getCell', rows[a], 'ab').prop('checked', true);
                $(this).prop('checked', 'True')
            }
        }

So how should I be looping through the grid and then checking/unchecking the rows checkbox.

I appreciate your help


Solution

  • You should use getGridRowById to get DOM element of row (<tr>). The method getCell gets the value (the text) and you can't use .prop('checked', true) to check the checkbox. The fixed code could be like

    $("input[name=rblOptStatus]").change(function () {
        var status = $("input[name=rblOptStatus]:checked").val(),
            $grid = $("#grdOptionsGrid"),
            ids = $grid.jqGrid("getDataIDs"),
            setCheckboxes = function (maxIndex, value) {
                var i, $checkbox;
                for (i = 0; i < maxIndex; i++) {
                    $checkbox = $($grid.jqGrid('getGridRowById', ids[i]))
                            .children('td[aria-describedby="grdOptionsGrid_ab"]')
                            .find('input');
                    if ($checkbox.is(":checked") !== value) {
                        $checkbox.prop('checked', value);
                    }
                }
            };
        switch (status) {
            case 'All':
                setCheckboxes(ids.length, true);
                break;
            case 'None':
                setCheckboxes(ids.length, false);
                break;
            default: //Check 60%
                setCheckboxes(ids.length, false);
                setCheckboxes(ids.length*0.6, true);
        }
    });
    

    See https://jsfiddle.net/OlegKi/ef6zp25g/