Is it possible to group kendo grid columns with two column names?

Question

I am using kendo grid and I have to group columns by two column names which have aggregates defined.

Ex:

{
            'Name': "Test",
            'Type': 'ProjectOne',
            'HFB': 'Eating',
            'week1': '10',
            'week2': '10',
            'week3': '10',
            'week4': '10',
            'week5': '10',
},
{
            'Name': "Test",
            'Type': 'ProjectOne',
            'HFB': 'Eating',
            'week1': '10',
            'week2': '10',
            'week3': '10',
            'week4': '10',
            'week5': '10',
},
{
            'Name': "Test",
            'Type': 'ProjectTwo',
            'HFB': 'Decoration',
            'week1': '10',
            'week2': '10',
            'week3': '10',
            'week4': '10',
            'week5': '10',
},
{
            'Name': "Test",
            'Type': 'ProjectTwo',
            'HFB': 'Decoration',
            'week1': '10',
            'week2': '10',
            'week3': '10',
            'week4': '10',
            'week5': '10',
}

and the columns object is like the following

 group: {
                field: 'Type',
                aggregates: [
                    { field: "week1", aggregate: "sum" },
                    { field: "week2", aggregate: "sum" },
                    { field: "week3", aggregate: "sum" },
                    { field: "week4", aggregate: "sum" },
                    { field: "week5", aggregate: "sum" },
       ]
}

now I want to group the columns also with the 'HFB' property and the and the result should look like the following

Eating -> ProjectOne
Decoration -> ProjectTwo

I tried changing the columns array into object and values in the array as objects, it didn't work because aggregates is an array.

Answer 1

You can use column.groupHeaderColumnTemplate in order to have proper aggregates at each grouping tier.

Example (Dojo):

The example uses some tricks

• hidden span containing a sequence number
• hide column added to grid in order to set the title and groupHeaderTemplate

in order to get the month groups in the data order. The default is that the grid will sort the groups in ascending value order.

  <style>
  .hidden {display:none}
  </style>
  <div id="grid"></div>
  <script>
    data = [
      { region: 'A', month: 'Jan', week: 1, sales:  10 },
      { region: 'A', month: 'Jan', week: 2, sales:  10 },
      { region: 'A', month: 'Jan', week: 3, sales:  10 },
      { region: 'A', month: 'Jan', week: 4, sales:  10 },
      { region: 'A', month: 'Feb', week: 1, sales:  10 },
      { region: 'A', month: 'Feb', week: 2, sales:  20 },
      { region: 'A', month: 'Feb', week: 3, sales:  30 },
      { region: 'A', month: 'Feb', week: 4, sales:  40 },
      { region: 'A', month: 'Mar', week: 1, sales:  10 },
      { region: 'A', month: 'Mar', week: 2, sales:  50 },
      { region: 'A', month: 'Mar', week: 3, sales:  60 },
      { region: 'A', month: 'Mar', week: 4, sales:  60 },
      { region: 'B', month: 'Jan', week: 1, sales:  10 },
      { region: 'B', month: 'Jan', week: 2, sales:  20 },
      { region: 'B', month: 'Jan', week: 3, sales:  30 },
      { region: 'B', month: 'Jan', week: 4, sales:  40 },
      { region: 'B', month: 'Feb', week: 1, sales:  10 },
      { region: 'B', month: 'Feb', week: 2, sales:  60 },
      { region: 'B', month: 'Feb', week: 3, sales:  70 },
      { region: 'B', month: 'Feb', week: 4, sales:  80 },
      { region: 'B', month: 'Mar', week: 1, sales:  10 },
      { region: 'B', month: 'Mar', week: 2, sales: 100 },
      { region: 'B', month: 'Mar', week: 3, sales: 110 },
      { region: 'B', month: 'Mar', week: 4, sales: 120 },
     ];
    
     function z7(n) {
       return ("0000000" + n).slice(-7);
     }
    
     var month = 'zzz', ix = 0;
    
     for (var index = 0; index<data.length; index++) {
       var item = data[index];
       if (item.month != month) {
         month = item.month;
         ix++;
       }
       item.monthgroup = "<span class=hidden>" + z7(ix) + "</span>" + month;
     }
    
     $("#grid").kendoGrid({  
        dataSource: {
          data: data,
          group: [
                        { field: "region", aggregates: [ {field:"sales", aggregate:"sum" }] },
                        { field: "monthgroup",  aggregates: [ {field:"sales", aggregate:"sum" }] },
          ],
          sort: { field: 'mon' }
        },
        columns: [
          { field: 'monthgroup', title: 'month', groupHeaderTemplate: "#=value#" },
          { field: 'week', width: '5em' },
          { field: 'sales', width: '6em', groupHeaderColumnTemplate: "#=sum#" },
          { field: 'sizebalance', title: ' ' }
        ],
        height: 750,
        scrollable: true,
        groupable: true,
      });  
    
      var grid = $("#grid").data("kendoGrid");
            grid.hideColumn(0);
  </script>

Answer 2

You will have to specify the aggregates array for each grouping variable (and change grouping from object to array to specify a group nesting of two columns) and then render them in a groupFooterTemplate. There is a side effect of the grid displaying two adjacent footer rows (the second repeating the first) when there is more than one grouping column. The second row can be hidden using an adjacent CSS selector tr.k-group-footer + tr.k-group-footer {display:none} .

Example grid (image):

Example code (Dojo):

I changed the week data values from strings containing a number to just number.

  <div id="grid"></div>
  <style>
    tr.k-group-footer + tr.k-group-footer { display: none }
  </style>
  <script>
    data = [
{
            'Name': "Test",
            'Type': 'ProjectOne',
            'HFB': 'Eating',
            'week1': 10,
            'week2': 20,
            'week3': 30,
            'week4': 40,
            'week5': 50,
},
{
            'Name': "Test",
            'Type': 'ProjectOne',
            'HFB': 'Eating',
            'week1': 10,
            'week2': 11,
            'week3': 12,
            'week4': 13,
            'week5': 14,
},
{
            'Name': "Test",
            'Type': 'ProjectTwo',
            'HFB': 'Decoration',
            'week1': 21,
            'week2': 22,
            'week3': 23,
            'week4': 24,
            'week5': 25,
},
{
            'Name': "Test",
            'Type': 'ProjectTwo',
            'HFB': 'Decoration',
            'week1': 10,
            'week2': 10,
            'week3': 10,
            'week4': 10,
            'week5': 10,
}    
];

// https://stackoverflow.com/questions/62930100/
//   is-it-possible-to-group-kendo-grid-columns-with-two-column-names
    
    
    $(document).ready(function() {
      $("#grid").kendoGrid({  
        dataSource: {
          data: data,
          group: [
                        { field: "HFB",
                aggregates: [
                { field: "week1", aggregate: "sum" },
                { field: "week2", aggregate: "sum" },
                { field: "week3", aggregate: "sum" },
                { field: "week4", aggregate: "sum" },
                { field: "week5", aggregate: "sum" }
                    ]
            }, 
                        { field: "Type",
                aggregates: [
                { field: "week1", aggregate: "sum" },
                { field: "week2", aggregate: "sum" },
                { field: "week3", aggregate: "sum" },
                { field: "week4", aggregate: "sum" },
                { field: "week5", aggregate: "sum" }
                    ]
            }
          ],
        },
        columns: [
          { field: 'Name', width: '5em' },
/*        'Type', */
/*              'HFB', */
          {field: 'week1', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'week2', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'week3', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'week4', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'week5', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'sizebalance', title: ' ' }
        ],
        height: 750,
        scrollable: true,
        sortable: true,
        groupable: true,
      });
    });    
  </script>

Image of footer rows if the CSS is not used to hide extra one.