We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

  1. Render the Grid control.

JS

MVC

ASP.NET

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

JS

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

JS

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

JS

  1. 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

Article ID: Published Date: Last Revised Date: Platform: Control:
3180 01/12/2015 08/26/2015 JavaScript ejGrid
Tags:
Did you find this information helpful?
Comments
Mitch Aug 10, 2015
This works well for regular row selection, but is there a method to select all Checkboxes in the current filtered list? Maybe relating to the headerTemplateId
Reply
Ragavee U S [Syncfusion] Aug 11, 2015
@Mitch: Based on your suggestion we have modified this Knowledge base document such that it explains both about selecting the grid rows based on the header checkbox and row checkbox.
Reply
Lory Aug 25, 2015
This has been a great help but it should be noted that in rendering the grid through Javascript it should be headerTemplateID:'"#headerTemplate". Otherwise, the checkbox to select all checkboxes in the header would not display.
Reply
Ragavee U S [Syncfusion] Aug 26, 2015
@Lory: Thanks for your comments. We have modified and refreshed this document based on your suggestion.
Reply
Todd M Jan 20, 2016
Is it possible to enable the filterbar show that only the selected records are displayed?
Reply
Ragavee U S [Syncfusion] Jan 20, 2016
@Todd: As we are unclear on your requirement, could you please explain it elaborately?
Reply
Todd M Jan 20, 2016
using the code above but adding .AllowFiltering() & .FilterSettings(d => d.FilterType(FilterType.FilterBar)). The filter text box where the user would normally type true or false is disabled, but only for the checkbox all other fields work as expected.
Reply
Todd M Jan 22, 2016
To further clarify. I would like the user to be able to select x number of records in the grid using the checkboxes. Then be able to type "true" into the filterbar (or select a checkbox) and then have only those x records displayed
Reply
Ottorino Bruni Mar 18, 2016
Great example, but i would like to know how to get record information on checkChange method. Is it possible to get model information from $("#Grid .rowCheckbox"). ?
Reply
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon