group Array|Object

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.

Example - set a group as an 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>

Example - set a group as an array (subgroups)

<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"

Example - set the group aggregates

<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.aggregates.aggregate String

The name of the aggregate function. Specifies the aggregate function.

The supported aggregates are:

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

Example - specify an aggregate function

<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: [
      // calculate max price
      { field: "price", aggregate: "max" }
    ]
  }
});
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"
});
</script>

group.aggregates.field String

The data item field which will be used to calculate the aggregates.

Example - specify an aggregate field

<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: [
      // calculate max price
      { field: "price", aggregate: "max" }
    ]
  }
});
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"
});
</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.

Example - use a custom function to compare the groups in the DataSource

<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 (default: "asc")

The sort order of the group.

The supported values are:

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

The default sort order is ascending.

Example - sort the groups in descending order

<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 String

The data item field to group by.

Example - set the field

<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();
  var beverages = view[0];
/* 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.items[0].name); // displays "Ham"
});
</script>

groupPaging Boolean (default: false)

When set to true, dataSource treats groups as items during pagination.

In this article
Related articles
Not finding the help you need? Improve this article