Edit this page

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();
  console.log(view.length); // displays "2"
  var beverages = view[0];
  console.log(beverages.value); // displays "Beverages"
  console.log(beverages.items[0].name); // displays "Tea"
  console.log(beverages.items[1].name); // displays "Coffee"
  var food = view[1];
  console.log(food.value); // displays "Food"
  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();
  console.log(view.length); // displays "1"
  var food = view[0];
  console.log(food.value); // displays "Food"
  var meat = food.items[0];
  console.log(meat.value); // displays "Meat"
  console.log(meat.items.length); // displays "2"
  console.log(meat.items[0].name); // displays "Pork"
  console.log(meat.items[1].name); // displays "Beef"
  var vegetables = food.items[1];
  console.log(vegetables.value); // displays "Vegetables"
  console.log(vegetables.items.length); // displays "1"
  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 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];
  console.log(beverages.aggregates.price.max); // displays "2"
  console.log(beverages.aggregates.price.min); // displays "1"
  var food = view[1];
  console.log(food.aggregates.price.max); // displays "3"
  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];
  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];
  console.log(beverages.aggregates.price.max); // displays "2"
});
</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];
  console.log(food.value); // displays "Food"
  var beverages = view[1];
  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];
  console.log(beverages.items[0].name); // displays "Tea"
  console.log(beverages.items[1].name); // displays "Coffee"
  var food = view[1];
  console.log(food.items[0].name); // displays "Ham"
});
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy