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

Skricki

In group,I tried to mention more than one field object,but while rendering the grid it grouped the last field that was mentioned. – Skricki

Could you edit the question to include the code? – Joule

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

Retrieval

Thanks alot!! This is just perfect and works really well – Skricki

Hi. Is it possible group together, not "then"? Thanks – Marauding

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.

Kreiker

Great MVC tip thanks!! The last part of the MVC is very important in the case of columns that are class objects. Although remember to not use == within the override of == otherwise you get infinite recursion! #4219761 So you need something like this: #25462085 – Klusek