Hi,
I hope you all are doing well.
I have a grid (Asp.net 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:
http://jsfiddle.net/xwfg3/1/
But I couldn't make it for ASP.net 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 asp.net 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.
Thanks.
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>");
.Events(ev=>ev.DataBound("onDataBound"))
<script>
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
grid.select(currentGroupRow.nextUntil(".k-grouping-row", ":not('.k-group-footer')"));
});
}
</script>
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,
Tsvetomir
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/.