CODEWITHSUNDEEP
jquerycheckboxjqgrid
Abb
Abb

Reputation: 3061

JQgrid not checking the Header Checkbox when all checkboxes are checked in the table

Here I am facing a problem. When I do check all the row checboxes, the header checkbox doesnt seem to get checked automatically. Moreover it works vice-versa.

 datatype: "json",
    contentType: 'application/json',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    colNames: ['Id', 'Machine Name', 'IP Address', 'Discovered Date', 'Agent Install Status', 'Agent Installation Date', 'Agent Status', 'Agent Version', 'Last HeartBeat Received'],
    colModel: [            
        { name: 'id', hidden: false, width: 20, key: true, sorttype: 'int', search: true },
        { name: 'machineName', width: 120, search: true },
        { name: 'ipAddress', width: 60, search: true },
        //{ name: 'discoveredDate', width: 110, formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'l, F d, Y' } },
        { name: 'discoveredDate', width: 110, search:true, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
        { name: 'agentInstallStatus', width: 100, search: true },
        { name: 'agentInstallationDate', width: 110, search:true, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
        { name: 'agentStatusName', width: 60, search: true },
        { name: 'agentVersion', width: 50, search: true },
        { name: 'lastHeartBeatRecieved', width: 110, search:true,formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } }
    ],
    rowattr: function (rd) {
        if (rd.agentInstallStatus != 'Completed' && rd.agentInstallStatus != 'Upgrade Completed' && rd.agentInstallStatus != 'Uninstallation Failed') {
            return {
                "class": "ui-state-disabled ui-jqgrid-disablePointerEvents"
            };
        }
    },

    sortname: 'id',
    sortorder: 'asc',
    loadonce: true,
    viewrecords: true,
    gridview: true,      
    width: gwdth,
    height: 650,
    sortable:true,
    rowNum: 30,        
    rowList: [10, 20, 30],
    mtype: 'GET',
    multiselect: true,
    multipleSearch: true,
    pager: "#jqGridPager",

    onSelectRow: function () {
        var s_row = $("#jQGridMonitoredMachines").jqGrid('getGridParam', 'selarrrow');
        var a_row = $('#jQGridMonitoredMachines').jqGrid('getDataIDs');
        if (s_row.sort(function (a, b) {
            return a - b
        }
            ).join() == a_row.sort(function (a, b) {
                return a - b
        }
            ).join()) {
            $('#cb_list').prop('checked', true);
        }
    },
    loadBeforeSend: function (xhr) {
        var authData = localStorageService.get('authorizationData');

        if (authData) {
            xhr.setRequestHeader("Authorization", 'Bearer ' + authData.token);
        }
        return xhr;
    }
});

jQuery("#jQGridMonitoredMachines").jqGrid('navGrid', '#jqGridPager',
{ edit: false, add: false, del: false, search: true }, {}, {}, {}, { closeAfterSearch: true });
});

Current Situation

It should be like in the below image.

enter image description here

How this can be achieved?

Upvotes: 0

Views: 2619

Answers (2)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You can do it in onSelectRow event of jqgrid. If all row ids and selected row ids are equal then set main checkbox checked property true.

onSelectRow: function(){
    var s_row = $("#list").jqGrid('getGridParam','selarrrow');
    var a_row = $('#list').jqGrid('getDataIDs');
    if(s_row.sort(function(a, b){return a-b}).join()==
                a_row.sort(function(a, b){return a-b}).join()){
        $('#cb_list').prop('checked', true);            
    }
}

DEMO

Upvotes: 3

Udy Kenshi
Udy Kenshi

Reputation: 46

if you are using JQuery, you can add your own code to the page like this

$("input[type=checkbox]").click(function(){
var totalCheckbox = 10;// all your checkboxes excluding the Header check box
var checkedOnes = $("input[type=checkbox]:checked").val().length; //all boxes that are checked

if(checkedOnes ==totalCheckbox ){
    $(".headerCheckBox").attr("checked","checked");// check the header check box
    }
})

Upvotes: 0

Related Questions