Get all the Groups and SubGroups in Grid

Environment

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

Description

In our requirement, we want the count of rows of grid based on group by multiple fields in the datasource.

Solution

1. To search for the subgroups of the Kendo UI Data Source till they have no more subGroups you can use any search algorithm of your choice. For example, you could utilize a function which is publically available in the kendo.data.js file and use the callback func to count the subgroups:

       function eachGroupItems(data, func) {
           for (var idx = 0, length = data.length; idx < length; idx++) {
              if (data[idx].hasSubgroups) {
                  if (eachGroupItems(data[idx].items, func)) {
                      return true;
                  }
              } else if (func(data[idx].items, data[idx])) {
                  return true;
              }
           }
       }
   

2. I suggest you do that in the dataBound event of the grid, for example:

       dataBound: function(e){
           var view = this.dataSource.view();
           if(this.dataSource.group()){
             var count = 0;
             eachGroupItems(view, function(items, index){
               count++
             });
             console.log(count);
           }
       }
   

<div id="grid"></div>
    <script>
      var dataSource = new kendo.data.DataSource({
        data: [
          { name: "name1", Location: "ckm", Supplier: "sup1" },
          { name: "name2", Location: "ckm", Supplier: "sup1" },
          { name: "name3", Location: "ckm", Supplier: "sup2" },
          { name: "name4", Location: "hok", Supplier: "sup3" },
          { name: "name5", Location: "hof", Supplier: "sup2" }
        ],
        group: [
          { field: "Location" },
          { field: "Supplier" }
        ]
      });
      $("#grid").kendoGrid({
        dataSource:dataSource,
        columns:["name", "Location", "Supplier"],
        groupable:true,
        dataBound: function(e){
          var view = this.dataSource.view();
          if(this.dataSource.group()){
            var count = 0;
            eachGroupItems(view, function(items, index){
              count++
            });
            console.log(count);
          }
        }
      });

      function eachGroupItems(data, func) {
        for (var idx = 0, length = data.length; idx < length; idx++) {
          if (data[idx].hasSubgroups) {
            if (eachGroupItems(data[idx].items, func)) {             
              return true;
            }
          } else if (func(data[idx].items, data[idx])) {
            return true;
          }
        }
      }
    </script>