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

[Juan Cruz]

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]

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, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-1106610789 

 

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 :  

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/grouping/#caption-template 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound 

https://ej2.syncfusion.com/javascript/documentation/api/check-box/#change 

 

[Index.cshtml] 

 

    @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> 

    <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 = []; 

            i++; 

            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.getElementsByTagName('input')[0].click()     

                } 

                nextRow.getElementsByTagName('input')[0].click() 

                i++; 

                nextRow = tr.parentElement.rows[i]; 

            } 

        } 

    </script> 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Can Gunaydin]

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

[Sujith Kumar Rajkumar]

Hi Can Gunaydin, 

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

Sample: https://stackblitz.com/edit/angular-vgckor?file=app.component.ts 

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Mohamed BENNOUR]

Hi Can Gunaydin, 

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

Sample: https://stackblitz.com/edit/angular-vgckor?file=app.component.ts 

Let us know if you have any concerns. 

Regards, 

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>

            <div>test</div>

        </ng-template>

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 ?

Regards,

[Balaji Sekar]

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. 

Regards, 

Balaji Sekar