Get all the Groups and SubGroups in Grid
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product Version | Created with 2018.1.221 version |
Description
In our requirement, we want the count of rows of grid based on group by multiple fields in the datasource.
Solution
-
To search for the subgroups of the Kendo UI Data Source till they have no more subGroups you can use any search algorithm of your choice. For example, you could utilize a function which is publically available in the
kendo.data.js
file and use the callback func to count the subgroups:function eachGroupItems(data, func) { for (var idx = 0, length = data.length; idx < length; idx++) { if (data[idx].hasSubgroups) { if (eachGroupItems(data[idx].items, func)) { return true; } } else if (func(data[idx].items, data[idx])) { return true; } } }
-
I suggest you do that in the
dataBound
event of the grid, for example:dataBound: function(e){ var view = this.dataSource.view(); if(this.dataSource.group()){ var count = 0; eachGroupItems(view, function(items, index){ count++ }); console.log(count); } }
<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ name: "name1", Location: "ckm", Supplier: "sup1" },
{ name: "name2", Location: "ckm", Supplier: "sup1" },
{ name: "name3", Location: "ckm", Supplier: "sup2" },
{ name: "name4", Location: "hok", Supplier: "sup3" },
{ name: "name5", Location: "hof", Supplier: "sup2" }
],
group: [
{ field: "Location" },
{ field: "Supplier" }
]
});
$("#grid").kendoGrid({
dataSource:dataSource,
columns:["name", "Location", "Supplier"],
groupable:true,
dataBound: function(e){
var view = this.dataSource.view();
if(this.dataSource.group()){
var count = 0;
eachGroupItems(view, function(items, index){
count++
});
console.log(count);
}
}
});
function eachGroupItems(data, func) {
for (var idx = 0, length = data.length; idx < length; idx++) {
if (data[idx].hasSubgroups) {
if (eachGroupItems(data[idx].items, func)) {
return true;
}
} else if (func(data[idx].items, data[idx])) {
return true;
}
}
}
</script>