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. (Last updated on: June 24, 2019).
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 Feb 12,2020 10:54 AM UTC ASP.NET MVC - EJ 2 3
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 


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