CODEWITHSUNDEEP
jqgridjqgrid-asp.netjqgrid-formatter
Tom S
Tom S

Reputation: 227

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

Upvotes: 0

Views: 3859

Answers (1)

Oleg
Oleg

Reputation: 221997

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/

Upvotes: 1

Related Questions