Last Updated: 02 Nov 2020 13:46 by ADMIN
Created on: 26 Oct 2020 21:17
Category: Grid
Type: Feature Request
CheckBox Selection in the Group Headers with ServerOperations Enabled


I hope you all are doing well.

I have a grid ( core) with groupable: true. Users are able to do grouping by all the columns.

Requirement 1

Some of the groups are quite large, so users would like to be able to select the entire group (whether it is open or collapsed).

Requirement 2

I would also like to show the count of the items in the group header (for each group).

I tried to do it with "ClientGroupHeaderColumnTemplate" and adding a button in the template and associate JavaScript to the button to select and unselect the rows in entire group but it didn't work! I search in your forum and saw this example for kendo jQuery:

But I couldn't make it for Core grid. This example is almost what I wanted except that in the example grouping is doing in kendo initial but In my case users are going to do grouping. It's not pre-defined.

Could you please guide me how can I make it for kendo grid in core? I really appreciate if you could make an example.

Requirement 3

The thing is that in my real project I am using serveroperation(true) in order to avoid rendering too much records. and I found that cause the problem.  I also do grouping, sorting, filtering in api side in my real project and return back a filtered, sorted and grouped object  to web.


1 comment
Posted on: 02 Nov 2020 13:46

Hi Durgesh,

Thank you for the provided requirements. I have investigated them and I would like to inform you that those are actually requirements for custom business logic rather than a suggestion for functionality to be implemented in the Kendo UI Grid widget. Hence, I am marking this thread as "Declined". 

The approach in the jsfiddle that you have share could be implemented in the ASP.NET Core environment as well. The click event is attached to the button in the DataBound event. It is triggered when grouping is initiated. Here are the relevant code snippets:

                    columns.Bound(p => p.OrderID).Filterable(false).ClientGroupHeaderColumnTemplate("Select items in current group<button class='myButton'>Select Items</button>");


            function onDataBound() {
                $(".myButton").on("click", function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    var currentGroupRow = $(this).closest(".k-grouping-row");
                    // Select the items in the current group
          ".k-grouping-row", ":not('.k-group-footer')"));

Also, it is correct that when the server operations are enabled, you cannot select rows that are out of the current page because they are non-existent. 

Attached is a sample of the approach covering "Requirement 2". If you have any further queries, please open an official Support Ticket in our ticketing system. This thread is in our public Feeback portal and its purpose is to discuss features that can be implemented in the widget's defaults.


Kind regards,
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

Attached Files: