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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: ejGrid
Tags: selection, 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.


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.


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

  1. Code to render Checkbox.


  1. Render the Grid control.




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


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


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


  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

You must log in to leave a comment
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
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

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile