Group Grid Columns Which Are Bound to Objects

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	2017.2.621

Description

How can I group columns which are bound to objects?

Solution

1. When the group event fires, check for a group by the column which is bound to an object.

2. If such a group exists, use the group method of the dataSource to add a group by one of the properties of the object.

    <div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        columns: [
          "id",
          { field: "person", template:"#=person.name#, #=person.age#" }
        ],
        dataBound(e){

          setTimeout(function(){
            $('.k-group-indicator a.k-link').each(function(_,x){
                            x= $(x);
              if(x.text().includes(".")){
                x.text(x.text().split(".")[0]);
              }
            })

             $('.k-grouping-row p').each(function(_,x){
                            x= $(x);
              if(x.text().includes(".")){
                var splitted = x.text().split(":");
                x.text(splitted[0].split(".")[0] +":"+ splitted[splitted.length-1]);
              }
            })
          })

        },
        dataSource: {
          data: [
            { id: 1, person:{ name: "Jane Doe", age: 30 }},
            { id: 2, person:{ name: "John Doe", age: 33 }},
            { id: 3, person:{ name: "John Doe", age: 23 }}

          ],
          schema: {
            model: { id: "id" }
          }
        },
        groupable: true,
        group: function(e) {
          if (e.groups.length) {
            var isNestedGrouped;

            e.groups.map(function(x){
              if(x.field == "person"){
                isNestedGrouped = true;
              }
            })

            if(isNestedGrouped){
              e.preventDefault()
              var newGroups = [];
              this.dataSource.group().forEach(function(x){
                if(x.field != "person"){
                  newGroups.push(x)
                }
              })
              newGroups.push({field:"person.name"})
              this.dataSource.group(newGroups)
            }
          }
        }
      });
    </script>