Expand Inner Grouped Rows
Environment
Product Version | 2017.3 913 |
Product | Progress® Kendo UI® Grid for jQuery |
Description
My Grid is grouped by site and then room number, and when it displays its content, all rows are collapsed as intended.
How can I automatically expand any rows within that group when I manually expand a row?
Solution
Programmatically expand all items of the parent grouping field on the groupExpand
event:
The following example demonstrates how to implement the suggested approach—manually collapse all subgroups and then the main group to see how the subgroups programmatically expand once the main group gets expanded too.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
group: [{
field: "UnitsInStock"
},
{
field: "UnitPrice"
}],
aggregate: [ { field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" }]
},
sortable: true,
scrollable: false,
groupable:true,
pageable: true,
groupExpand: function(e) {
for (let i = 0; i < e.group.items.length; i++){
var expanded = e.group.items[i].value
e.sender.expandGroup(".k-grouping-row:contains("+expanded+")");
}
},
columns: [
{ field: "ProductName", title: "Product Name"},
{ field: "UnitPrice", title: "Unit Price"},
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock"}
]
});
});
</script>
</div>