Edit this page

Expand Inner Grouped Rows

Environment

Product Version 2017.3 913
Product Progress Kendo UI Grid

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy