This is a migrated thread and some comments may be shown as answers.

Client Group Header Template check boxes to check all sub elements

2 Answers 78 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ross
Top achievements
Rank 1
Ross asked on 19 Aug 2020, 12:04 PM

I have a grid with a Client Group Header Template like this:

columns.Bound(model => model.Area).ClientGroupHeaderTemplate(@"<input onclick='SelectAllSubStores(this)' type='checkbox' style='margin-right:5px;'/>");

I have been trying to get it so when I check the group header check box it will automatically check all the rows within the header. 

In the sub rows there is a column like this so that there are check boxes in the sub rows:

columns.Bound(model => model.Store)
                                        .ClientTemplate("<input type='checkbox'/>")
                                        .Sortable(false).Width(100)
                                        .HtmlAttributes(new { style = "text-align:center" })
                                        .HeaderHtmlAttributes(new { style = "text-align:center" });

 

I have tried this but nothing happens:

function SelectAllSubStores(e) {

$("#Grid tbody input:checkbox").prop("checked", this.checked);

}

and I have tried a few other ways but I wasn't getting anywhere.

 

How do I get it to auto select the sub row check boxes when I select the Group header template check box?

 

Thanks 

2 Answers, 1 is accepted

Sort by
0
Accepted
Eyup
Telerik team
answered on 21 Aug 2020, 02:14 AM

Hello Ross,

 

You can try adding a CSS class name to the item checkboxes and slightly modifying the JavaScript logic. I've prepared a live sample to demonstrate that:
https://dojo.telerik.com/eKUzITAH/5

I hope this will prove helpful. Feel free to give it a try and let me know if it works for you.

 

Regards,
Eyup
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ross
Top achievements
Rank 1
answered on 21 Aug 2020, 10:38 AM

Hi Eyup,

Thank you so much that worked perfectly.

Tags
Grid
Asked by
Ross
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Ross
Top achievements
Rank 1
Share this question
or