jqgrid checkbox select all, clear all

Question

I want to select checkbox when i click on select all button. get the selected values when click on get selected button. I am able to do this when multiselect is true. But I am using checkbox for IsEmployeeActive with out multiselect true. how can I implement this functionality with custom checkbox .

<div style="float: left;">
    <input id="getSelected" type="button" value="Get Selected" />
    <input id="selectAll" type="button" value="Select All" />
    <input id="clear" type="button" value="Clear Selection" />
    <div id="names"></div>
 </div>

jqGrid code

 colModel: [//Column details
                        { name: "Id", index: "Id", width: "220px" },
                        { name: "Name", index: "Name", width: "220px" },
                        //Do not allow sorting on Action Column
                        { name: "Action", index: "Action", sortable: false, width: "220px" },
                        { name: "IsEmployeeActive", index: "IsEmployeeActive", sortable: false, width: "220px" ,
                            editable:true, edittype:'checkbox', editoptions: { value:"true:false"},
                            formatter: "checkbox", formatoptions: {disabled : false},
                        }
            ]

        $("#selectAll").click(function(){
            $("#jqEmpGrid").jqGrid('resetSelection');
            var ids = $("#jqEmpGrid").jqGrid('getDataIDs');
            for (var i=0, il=ids.length; i < il; i++) {
                $("#jqEmpGrid").jqGrid('setSelection',ids[i], true);
            }
        });
        $("#clear").click(function(){
            $("#jqEmpGrid").jqGrid('resetSelection');
        });
        $("#getSelected").click(function(){
            var ids = $("#jqEmpGrid").jqGrid('getGridParam','selarrrow');
            if (ids.length>0) {
                var names = [];
                for (var i=0, il=ids.length; i < il; i++) {
                    var name = $("#jqEmpGrid").jqGrid('getCell', ids[i], 'Id');
                    names.push(name);
                }
                //alert ("Names: " + names.join(", ") + "; ids: " + ids.join(", "));
                $("#names").html(names.join(", "));
            }
        });

});

score 3 · Accepted Answer · answered Apr 13 '14 at 05:51

declare col name

colNames: ['Employee Id', 'Employee Name', 'Action','<input type="checkbox" id="selectallCB"/>'],//Column Names
        colModel: [//Column details
                    { name: "Id", index: "Id", width: "220px" },
                    { name: "Name", index: "Name", width: "220px" },
                    //Do not allow sorting on Action Column
                    { name: "Action", index: "Action", sortable: false, width: "220px" },
                    { name: "IsEmployeeActive", index: "IsEmployeeActive", sortable: false, width: "220px" ,
                        editable:true, edittype:'checkbox', editoptions: { value:"true:false"},
                        formatter: "checkbox", formatoptions: {disabled : false},
                        cellattr: function(rowId, val, rawObject) {
                            return " class='cbEmpActive'";
                        }
                    }
        ],

and write code to select all and to get selected items

/* use when custom checkbox is required    */

    $("#selectAll").click(function(){
        var td = $('.cbEmpActive');
        for(var i=0;i<td.length; i++){
            var checkbox = $('input[type="checkbox"]', $( td[i]).closest('td')).get(0).checked=true;
        }
    });
    $("#clear").click(function(){
        var td = $('.cbEmpActive');
        for(var i=0;i<td.length; i++){
            var checkbox = $('input[type="checkbox"]', $( td[i]).closest('td')).get(0).checked=false;
        }
    });
    $("#getSelected").click(function(){

        var ids = $("#jqEmpGrid").jqGrid('getDataIDs');
        if (ids.length>0) {
            var names = [];
            for (var i=0, il=ids.length; i < il; i++) {
                var checkbox =  $("#jqEmpGrid").jqGrid('getCell', ids[i], 'IsEmployeeActive');
                if(checkbox=='true')
                {
                    var name = $("#jqEmpGrid").jqGrid('getCell', ids[i], 'Name');
                    names.push(name);
                }
            }
            $("#names").html(names.join(", "));
        }

        $("#clear").click();// clear the selection after retriving selected values
    });



    // add multiple select / deselect functionality
    $("#selectallCB").click(function (e) {
        var isSelectAllTrue = $('#selectallCB').is(":checked");
        e = e||event;/* get IE event ( not passed ) */
        e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;

        var td = $('.cbEmpActive');
        for(var i=0;i<td.length; i++)
        {
            var checkbox = $('input[type="checkbox"]', $( td[i]).closest('td')).get(0);

            var checked = checkbox.checked;
            checkbox.checked = isSelectAllTrue;

        }

        //          $('.case').attr('checked', this.checked);
    });

jqgrid checkbox select all, clear all

1 Answers1