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.
Syncfusion Feedback

Can I put a checkbox in groupcaption to select / unselect records within the group?

Thread ID:





145551 Jun 27,2019 05:08 PM UTC Dec 4,2020 04:57 PM UTC ASP.NET MVC - EJ 2 5
Tags: Grid
Juan Cruz
Asked On June 27, 2019 05:08 PM UTC

Hello, I'm setting up a grid using grouping and I'd like to put a checkbox to work like the checbox in the column header (if I select it, all are selected). Can I do what I need? 
Question 2: Can I align the checkbox that is in the header of the column?
I hope you can help me. I thank you in advance

Attachment: Checkbox_93bc50af.rar

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 28, 2019 01:25 PM UTC

Hi Juan, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement. Based on your requirement we have prepared a sample for your convenience. Please download the sample from the link below, 
We have used the “Group Caption Template” feature of Grid to achieve your requirement. In this template we have provided a HTML checkbox element to get display this element in the Group caption. And in the “DataBound” event of Grid we have applied Syncfusion checkbox wrapper for this HTML checkbox element. We have used the “change” event of “CheckBox” to get the rows in the particular area and select those particular rows when click on the corresponding checkbox in the group caption. Please refer the code example below, 

Documentation :  
    @Html.EJS()...DataBound("DataBound").AllowGrouping().GroupSettings(group => { group.CaptionTemplate("#captiontemplate"); }).Render() 
    <script id="captiontemplate" type="text/x-template"> 
            ${field} - ${key}  <input id="CheckboxGrid" class="groupcheck" type="checkbox" /> 
    <script type="text/javascript"> 
        function DataBound(args) { 
            var chaecksavil = document.getElementsByClassName("groupcheck"); 
            if (chaecksavil.length) { 
                for (var i = 0; i < chaecksavil.length; i++) { 
                    var checkBoxObj = new ej.buttons.CheckBox({ change: onChange }); 
                    checkBoxObj.appendTo(chaecksavil[i]);  //Render Syncfusion checkbox component in group caption 
        function onChange(args) { 
            var obj = document.getElementsByClassName("e-grid")[0].ej2_instances[0] 
            var tr = ej.grids.parentsUntil(args.event.target, 'e-groupcaption').parentElement; 
            let i = tr.rowIndex; 
            let nextRow; 
            let indexes = []; 
            nextRow = tr.parentElement.rows[i]; 
            while (nextRow.classList.contains('e-row')) {     //Perform select/de-select here 
                if (args.checked && (obj.getSelectedRowIndexes().indexOf(parseInt(nextRow.getAttribute('aria-rowindex'))) > -1)) { 
                nextRow = tr.parentElement.rows[i]; 

Please get back to us if you need further assistance. 

Thavasianand S. 

Can Gunaydin
Replied On February 11, 2020 12:21 PM UTC

I want to implement the same behavior with angular grid component do you have any sample for it?

Sujith Kumar Rajkumar [Syncfusion]
Replied On February 12, 2020 10:54 AM UTC

Hi Can Gunaydin, 

Please find the angular grid component sample implemented with the same behavior below, 

Let us know if you have any concerns. 

Sujith R 

Replied On December 3, 2020 12:08 PM UTC

Hi Can Gunaydin, 

Please find the angular grid component sample implemented with the same behavior below, 

Let us know if you have any concerns. 

Sujith R 

Hi Sujith Kumar Rajkumar,

Nice sample for angular, thanks !

We found a problem with this implementation in our case.
We add a simple detailTemplate like this (it can be easily reproduced in your sample)

<ng-template #detailTemplate let-data>

If we check the group checkbox then, it propagates to the rows.
But if we open the third child detailTemplate for example, then the group check only propagates the check/uncheck to that child, even if we close this detailTemplate.

If we open and close the fourth child detailTemplate, the group check only propagates ito the first three.
But if we open and close the second child detailTemplate, the propagation is on the first two !

Question: Is there a fix to this or an explanation ?


Balaji Sekar [Syncfusion]
Replied On December 4, 2020 04:57 PM UTC

Hi Can Gunaydin, 

Before proceeding your query we need to confirm that you want to bind the grouping with DetailTemplate in the DataGrid. If we misunderstood your query, please replicate the reported problem in our previous updated sample and share to us that will help to validate further. 

Balaji Sekar 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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
Live Chat Icon