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

Expand and Collapse Group on Group Row Click in Grid

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version Created with 2018.1.221 version

Description

How can I expand and collapse the group rows by clicking the relevant group row in the Kendo UI Grid? I need the whole row to be clickable.

Solution

  1. To use the whole grouping row of the Kendo UI Grid to collapse and expand groups, you could add a click handler which targets them and then programmatically find and click the expand/collapse icons.

        $(".k-grouping-row").on("click", function(e){
            $(e.target).find(".k-icon").click();
        });
    
  2. To indicate that it the row is "clickable", then also add a CSS rule for the row:

        .k-grouping-row {
            cursor:pointer;
        }
    
    <div id="grid"></div>
    <script>
        var grid = $("#grid").kendoGrid({
          columns: [
            { field: "name" },
            { field: "age",
              groupHeaderTemplate: "Age: #= value # total: #= count #"
            }
          ],
          dataSource: {
            data: [
              { name: "Jane Doe", age: 30 },
              { name: "John Doe", age: 30 }
            ],
            group: { field: "age", aggregates: [ { field: "age", aggregate: "count" }] }
          }
        }).data("kendoGrid");


        $(".k-grouping-row").on("click", function(e){
          $(e.target).find(".k-icon").click();
        });
    </script>

    <style>
      .k-grouping-row {
        cursor:pointer;
      }
    </style>

See Also

In this article