Multi column grouping in Kendo Grid

Question

I am using kendo grid to display a set of records. But now I want to use Aggregates property to group columns and perform certain aggregate function on columns.

As per the below documentation,I can apply grouping on a single column,but I want to do grouping on multi column http://demos.telerik.com/kendo-ui/grid/aggregates

Please suggest how can I acheive it.

Thanks

Answer 1

You need to set the group option of the grid's data source as array. Here is some sample code:

  <div id="grid"></div> 
  <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" },
      ]
    });
    $("#grid").kendoGrid({
      dataSource: dataSource
    });
  </script>

Here is a live demo: http://dojo.telerik.com/@korchev/OBAva

Answer 2

Because it was asked, and is implied in the question title: it is possible to group "together" and not hierarchically. It requires a change to the data model so that all the grouping columns are held together in a single object.

In the datasource, the model and grouping configuration might look like

  data: [
    { name: "Pork", cat_group: { category: "Food", subcategory: "Meat" } },
    { name: "Pepper", cat_group: { category: "Food", subcategory: "Vegetables" } },
    { name: "Beef", cat_group: { category: "Food", subcategory: "Meat" } }
  ],
  group: [
    // group by "category" and "subcategory" together
    { field: "cat_group" },
  ]

UPDATE for MVC integration:

If this is being done with serialized objects in ASP.NET MVC using an AJAX datasource, note that the grouping object must have value semantics (overriding Equals and implementing ==/!=) as well as implementing IComparable.