How to create dynamic columns from kendogriddetailtemplate

[alex]

Hello,
how can i create dynamic columns in a detail template?

I want to create as many columns as there are elements within 'data' as shown in the attached image

 

great regards, 

Alex

 

 

 

 

 

 

 

[schakravarty]

You use an ngFor to loop the properties or columns of the object and put the template inside of that loop.

<ng-container *ngFor="let column of gridColumns">
      <kendo-grid-column
        field="{{column.field}}"
        title="{{column.title}}"
        width="{{column.width}}"
        [minResizableWidth]="column.minResizableWidth"
        [resizable]="column.resizable"
        [sortable]="column.sortable ? { mode: 'single', allowUnsort: false } : false"
        [filterable]="column.filterable"
        [hidden]="column.hidden"
        [lockable]="column.lockable"
        [locked]="column.locked"
        [columnMenu]="column.columnMenu"
        kendoGridSelectBy="nameId"
        [selectedKeys]="selectedKeys">

<ng-template kendoGridCellTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">

In the above sample I am loading a list of columns to be displayed in the grid. You can put ngif in the cell template if you need to control how the data is displayed for an individual column.