Client Group Header Template check boxes to check all sub elements

[Ross]

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 

[Eyup]

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

[Michel]

The dojo page with the example is not working.  Please fix it if possible.

[Eyup]

Hi Michel,

On my side the dojo sample seems to open as expected:

It could have been a temporary technical issue. Can you check the again?

Thank you.

[Ross]

Hi Eyup,

Thank you so much that worked perfectly.