New to Kendo UI for jQueryStart a free 30-day trial

Get all the Groups and SubGroups in Grid

Environment

ProductProgress® Kendo UI® Grid for jQuery
Product VersionCreated 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:

    js
        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:

    js
        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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support