Wijmo Grid TriState CheckBox Selection

Wijmo's JavaScript DataGrid 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 the JavaScript DataGrid'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