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

• Expand and Collapse Details on Master Row Click in Grid