How to perform multiple row selection using checkbox in a Grid?

By default, multiple selection is performed using the ctrl or shift key. You can also perform multiple selection by using Checkboxes that are bound to the Grid rows or using the checkbox bound to the header.

Solution

The Checkbox can be bound to the Grid rows using the template property of the Grid and to the Grid header using the headerTemplateID property of the Grid. The template property is used to bind unbound column to the Grid. The headerTemplateID is used to add template within the header element.

Example

The following example explains in detail on how to perform multiple selection of records using Checkboxes.

1. Code to render Checkbox.

JS

2. Render the Grid control.

JS

MVC

ASP.NET

3. In the create and actionComplete events of the Grid, the change event of the Checkbox is triggered.

JS

4. In the change event of the checkbox, the gridObj.multiSelectCtrlRequest is set as true in order to perform multiple selection.

JS

5. In the recordClick event of the Grid, the selected records are cleared and the Checkboxes corresponding to the selected records are unchecked.

JS

6. In the change event of the header checkbox (headerCheckChange), the grid contents are selected/unselected based on the header checkbox checked state.

The following screenshot displays the result.

Figure 1: Multiple selection in Grid using Checkboxes

Figure 2: Grid content is selected using the header checkbox