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

Group

configuration

The grouping configuration of the data source. If set, the data items will be grouped when the data source is populated. By default, grouping is not applied.

The data source groups the data items client-side unless the serverGrouping option is set to true.

group

Array|Object

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  // group by the "category" field
  group: { field: "category" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "2"
  var beverages = view[0];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.value); // displays "Beverages"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.items[0].name); // displays "Tea"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.items[1].name); // displays "Coffee"
  var food = view[1];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(food.value); // displays "Food"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(food.items[0].name); // displays "Ham"
});
</script>

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Pork", category: "Food", subcategory: "Meat" },
    { name: "Pepper", category: "Food", subcategory: "Vegetables" },
    { name: "Beef", category: "Food", subcategory: "Meat" }
  ],
  group: [
    // group by "category" and then by "subcategory"
    { field: "category" },
    { field: "subcategory" },
  ]
});
dataSource.fetch(function(){
  var view = dataSource.view();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(view.length); // displays "1"
  var food = view[0];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(food.value); // displays "Food"
  var meat = food.items[0];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(meat.value); // displays "Meat"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(meat.items.length); // displays "2"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(meat.items[0].name); // displays "Pork"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(meat.items[1].name); // displays "Beef"
  var vegetables = food.items[1];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(vegetables.value); // displays "Vegetables"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(vegetables.items.length); // displays "1"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(vegetables.items[0].name); // displays "Pepper"
});
</script>

group.aggregates

Array

The aggregates which are calculated during grouping.

The supported aggregates are:

"average"
"count"
"max"
"min"
"sum"

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages", price: 1 },
    { name: "Coffee", category: "Beverages", price: 2 },
    { name: "Ham", category: "Food", price: 3 },
  ],
  group: {
    field: "category",
    aggregates: [
      { field: "price", aggregate: "max" },
      { field: "price", aggregate: "min" }
    ]
  }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  var beverages = view[0];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.aggregates.price.max); // displays "2"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.aggregates.price.min); // displays "1"
  var food = view[1];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(food.aggregates.price.max); // displays "3"
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(food.aggregates.price.min); // displays "3"
});
</script>

group.compare

Function

A JavaScript function which is used to compare the groups (refer to sort.compare for comparing the items of the groups). It has the same signature as the compare function accepted by Array.sort.

<script>
    var dataSource = new kendo.data.DataSource({
        data: [
            { name: "Salmon", category: "Seafood" },
            { name: "Mackerel", category: "Seafood" },
            { name: "Ice cream", category: "Desserts" },
            { name: "Cake", category: "Desserts" },
            { name: "Lemonade", category: "Beverages" },
            { name: "Tea", category: "Beverages" },
            { name: "Coffee", category: "Beverages" }
        ],
        group: {
            field: "category",
            dir: "desc",
            compare: function(a, b) {
                if (a.items.length === b.items.length) {
                    return 0;
                } else if (a.items.length > b.items.length) {
                    return 1;
                } else {
                    return -1;
                }
            }
        }
    });

    dataSource.fetch(function() {
        var view = dataSource.view();
        var beverages = view[0];
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log(kendo.stringify(beverages.items));
        var seafood = view[1];
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log(kendo.stringify(seafood.items));
        var desserts = view[2];
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log(kendo.stringify(desserts.items));
    });
</script>>

group.dir

String

The sort order of the group.

The supported values are:

"asc" (ascending order)
"desc" (descending order)

The default sort order is ascending.

Default: "asc"

<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages"},
    { name: "Ham", category: "Food"},
  ],
  // group by "category" in descending order
  group: { field: "category", dir: "desc" }
});
dataSource.fetch(function(){
  var view = dataSource.view();
  var food = view[0];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(food.value); // displays "Food"
  var beverages = view[1];
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(beverages.value); // displays "Beverages"
});
</script>

group.field