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

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>
In this article