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

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

Reply | Reply with quote

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,

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()

${field} - ${key} <input id="CheckboxGrid" class="groupcheck" type="checkbox" />

</script>

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.

Reply | Reply with quote

Can Gunaydin

Replied On February 11, 2020 12:21 PM UTC

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

Reply | Reply with quote

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,

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

Let us know if you have any concerns.

Regards,

Sujith R

Reply | Reply with quote

Mohamed BENNOUR

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,

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,

Reply | Reply with quote

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.

Regards,

Balaji Sekar

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
145551	Jun 27,2019 05:08 PM UTC	Dec 4,2020 04:57 PM UTC	ASP.NET MVC - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US