Wijgrid provides the feature to select rows by clicking on them and not just one row; you may select multiple rows by dragging the mouse over the rows or by Ctrl+click combination.

Now, users may want to select/unselect rows by clicking on a checkbox. Please refer to this blog post where the implementation to select/unselect rows by using a checkbox is demonstrated.

In this blog, I'm going to talk about how to implement selection in wijgrid with a Tri-state checkbox in the column header i.e :

  • When all rows are selected, checkbox in header is checked

  • When all rows are unselected, checkbox in header is unchecked

  • When few rows are selected, checkbox in header is in indeterminate state


Something like this :


Add Checkbox


It is pretty easy to add a checkbox in a column. We'll handle the cellFormatter option of a column, add checkboxes to its cells and set its headerText to display a checkbox in the header as well. Take a look at the code below :
columns: [{
//add the checkbox column
headerText: "<input type=\"checkbox\" id='cb' class=\"mycbheader\" />",
cellFormatter: function (args) {

//code to add checkbox
}]

Since the blog I mentioned earlier already explains how to add checkboxes, I haven't explained it here in detail.

However, since we wish to have a tri-state checkbox in the header, we'll initialize it as a Wijcheckbox. Wijcheckbox allows tri-state with the help of the jQueryUI icons.
$(".mycbheader").wijcheckbox(
{
changed: toggleSelection
});

Tri-State Implementation


To implement tri-state in wijcheckbox, we'll handle the change event of the checkboxes in data rows and add/remove rows to/from wijgrid's selection object accordingly. We also need to handle the selectionChanged event of wijgrid and set the state of wijcheckbox depending on the number of selected rows. The code implementing this is given below :
$("<input type='checkbox' class='mycb' />")
.click(function (e) {
e.stopPropagation();
})
.change(function (e) {
//add row to selection if checkbox is selected else remove it
if (e.target.checked) {
$("#demo").wijgrid("selection").addRows(args.row.dataRowIndex);
}
else {
$("#demo").wijgrid("selection").removeRows(args.row.dataRowIndex);
}
})
selectionChanged: function (e, args) {
var selectedRows = $("#demo").wijgrid("selection").selectedCells()._getSelectedRowsIndicies().length;
var headerCheckbox = $(".mycbheader").parents(".wijmo-checkbox").find(".wijmo-checkbox-icon");

//check header checkbox if all rows are selected
if (selectedRows == totalRows) {
headerCheckbox.removeClass("ui-icon-stop");
headerCheckbox.addClass("ui-icon ui-icon-check");
}
//uncheck header checkbox if no rows are selected
else if (selectedRows == 0) {
headerCheckbox.removeClass("ui-icon ui-icon-stop");
headerCheckbox.removeClass("ui-icon-check");
}
//add indeterminate icon to header checkbox
else {
headerCheckbox.addClass("ui-icon ui-icon-stop");
headerCheckbox.removeClass("ui-icon-check");
}
}

Conclusion


The blog above shows how to implement a tri-state checkbox in a column header of wijgrid. You may tweak the code above to suit your requirements.

Please download the sample given below for the complete implementation.

Download Sample