New to Kendo UI for jQuery? Download free 30-day trial

Expand Inner Grouped Rows


Product Version 2017.3 913
Product Progress Kendo UI Grid


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?


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>
        $(document).ready(function() {
            dataSource: {
              type: "odata",
              transport: {
                read: ""
                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,
            pageable: true,
            groupExpand: function(e) {
              for (let i = 0; i <; i++){
                var expanded =[i].value
            columns: [
              { field: "ProductName", title: "Product Name"},
              { field: "UnitPrice", title: "Unit Price"},
              { field: "UnitsOnOrder", title: "Units On Order" },
              { field: "UnitsInStock", title: "Units In Stock"}
In this article
Not finding the help you need? Improve this article