CODEWITHSUNDEEP
jqueryjqgrid
Muhammad Ali
Muhammad Ali

Reputation: 873

Check/Uncheck JqGrid Header Checkbox

My header column check box in not working correctly.Kindly guide me,what i am doing wrong.

Here are my colNames:

  colNames: ['', '<input type="checkbox" id="cbox" onclick="checkBox(event)" />', 'Fee Type', 'Description','Actions']

Here is my colModel and rest properties:

colModel: [{ name: 'tc_id', index: 'tc_id', align: 'left', hidden: true, resizable: false, key: true },
                   { name: 'Check_Box',editable: true, index: 'Check_Box', width: 100, align: 'left', resizable: false, edittype: 'checkbox', formatoptions: { disabled: false }, editoptions: { value: "True:False" }, formatter: checkboxFormatter,sortable:false },
                   { name: 'Fee_Type', index: 'Fee_Type', width: 200, align: 'left', resizable: false },
                   { name: 'Description', index: 'Description', width: 400, align: 'left', resizable: false },
                   {
                       name: 'Actions', edittype: 'select', width: 95, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div style='float:left;margin-left:2px;margin-right:5px'><a class='ui-icon ui-icon-pencil' href=#" + rowObject[0] + " title='Edit'></a></div><div style='float:left;'><a class='ui-icon ui-icon-closethick' onclick=\"return confirm('Are you sure you want to delete this record?');\" title='Delete' href=#" + rowObject[0] + "></a></div><div class='clear'></div>"; }, resizable: false
                   }],
        rowNum: 20,
        rowList: [2, 10, 20, 50],   // page size dropdown
        pager: jQuery('#pager_Alerts'),
        pgbuttons: true,            
        viewrecords: true,      
        pagerpos: 'right',
        recordpos: 'left',
        shrinkToFit: false,
        sortorder: "asc",
        sortname: "tc_id",
        loadtext: "Loading",
        width: 795,
        hoverrows: false,
        gridComplete: function () {
        }

Here is my checkbox formatter:

function checkboxFormatter(cellvalue, options, rowObject) {
 return "<input type='checkbox' class='check' name='checkboxIsCC'>";
}

Here is my header column checkbox event:

function checkBox(e) {
    debugger;
   e = e || event;/* get IE event ( not passed ) */
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = false;


}

Here is my initial Screen: enter image description here

on click of header column checkbox,i want all rest of rows checkbox become checked and on unchecked of any row checkbox header checkbox become unchecked.

Upvotes: 2

Views: 12919

Answers (2)

MS Wani
MS Wani

Reputation: 31

The easy and best thing to do is use multiselect. No need of using input type = checkbox in your colNames. Below i'm mentioning an example.

                        data: JSON.parse(result), //Load Data
                        loadonce: true,
                        rowList: [5, 10, 20],
                        rowNum: 10, //Total records to display by default
                        pager: '#EmpPager',
                        viewrecords: true,
                        sortorder: 'asc',
                        gridview: true,
                        sortname: 'FirstName',
                        height: 'auto',
                        altRows: true,
                        hoverrows: true,
                        caption: "Student Details",
                        multiselect: true

Upvotes: 0

Jai
Jai

Reputation: 74738

I think you are after this:

multiselect: true

this allows to implement checkbox on each row and select all checkbox on header row.

You can put in the options provided:

    loadtext: "Loading",
    width: 795,
    multiselect: true, // <------like here or your choice.
    hoverrows: false,

Demo jqgrid with multiselect:true,

Upvotes: 3

Related Questions