Creating Dynamic Multi-Column Headers in the Grid

Environment

Description

How can I create dynamic multi-column headers in the Data Grid?

Solution

To dynamically combine the ColumnGroupComponent and ColumnComponent in the Data Grid:

1. Create a collection of custom columns. The group of columns must have a Boolean, which will indicate that the column is a group, and another field, which will contain the actual child columns.

   You must know in advance the number of the columns that will be generated in the markup and the level of their nesting.

   Copy Codepublic groupedColumns = [
       {
         title: 'All',
         width: 500,
         isGroup: true,
         columns: [
           { field: 'ProductName', width: 200, isGroup: false },
           {
             title: 'CUSTOM GROUP HEADER TITLE',
             width: 300,
             isGroup: true,
             columns: [
               { field: 'UnitPrice', width: 100 },
               { field: 'UnitsInStock', width: 100 },
               { field: 'Discontinued', width: 100 }
             ]
           }
         ]
       }
     ];

2. In the HTML markup, wrap the <kendo-grid-column> component into a <ng-container> tag and use the ngFor Angular directive to iterate the collections. For each column group of the required Grid, you must repeat this structure. To conditionally render a column or a group column, use the ngIf Angular directive.

   Copy Code<kendo-grid [data]="gridData">
       <ng-container *ngFor="let group of groupedColumns">
           <kendo-grid-column-group
               *ngIf="group.columns"
               [title]="group.title">
               <ng-container *ngFor="let nested of group.columns">
                   <kendo-grid-column
                       *ngIf="!nested.columns"
                       [field]="nested.field">
                   </kendo-grid-column>
                   <kendo-grid-column-group
                       *ngIf="nested.columns"
                       [title]="nested.title">
                       <kendo-grid-column
                           *ngFor="let col of nested.columns"
                           [field]="col.field">
                       </kendo-grid-column>
                   </kendo-grid-column-group>
               </ng-container>
           </kendo-grid-column-group>
       </ng-container>
   </kendo-grid>

The following example demonstrates the suggested approach in action.