Kendo UI Grid: Group on one-to-many

Question

Is it possible to apply a group in Kendo UI Grid on a column that has an array as value?

[{name: "Tony Stark", title: ["CEO", "Super Hero"]}, {name: "Elon Musk", title: "CEO"}]

I would like to end up with the following hierarchy:

CEO
 |_ Tony Stark
 |_ Elon Musk
Super Hero
 |_ Tony Stark

Answer 1

The hierarchy representation you show can be rendered by Kendo UI TreeView, but you mention Grid.

Grid displays hierarchies as grids with expandable group headers. The group is specified on the data source and the data source should be 'flattened'.

So, you can .map your array of name/title and name/[title] into a flattened array of name/title and use that as the grids data source.

For example:

var name_titles = [
  {name: "Tony Stark", title: ["CEO", "Super Hero"]},
  {name: "Elon Musk", title: "CEO"}
];

var title_names = $.map(name_titles,function(item){
  if (item.title) {
    if (item.title.constructor === Array) {
      return $.map(item.title,function(title) {
        return {name:item.name, title:title}
      })
    }
    else {
      return item;
    }
  }
  else {
    return null;
  }
});    

$("#grid").kendoGrid({
  dataSource: {
    data: title_names,
    group: { field: "title" }
  }
});