How to dynamically create angular-kendo grid columns using columns settings?

Question

I'm basing on latest docs: https://www.telerik.com/kendo-angular-ui/components/grid/columns/auto-generated/

<kendo-grid [kendoGridBinding]="elements" ...some props>
           <kendo-grid-column *ngFor="let column of elementsMeta"
               field="{{column.name}}"
               title="{{column.name}}">
               <ng-template kendoGridCellTemplate let-dataItem>
                   <div>
                       {{ column.name }}
                       {{ dataItem[column.name] }}
                   </div>
               </ng-template>
           </kendo-grid-column>
</kendo-grid>

I have a list of metadata containing the dynamic columns name, I'm trying to iterate the col names according to the angular-kendo API in order to represent the actual data. (just like in the example).

when printing {{ column.name }} I see the key name of each column, when printing: {{ dataItem | json }} I can see model from it I want the evaluation of [column.name] be taken, I'm not sure why when trying to eveal both {{ dataItem[column.name] }} I'm not getting anything, is it an angular template limitation? did anyone manage to do so? must my current col definition model contain a 'type' field?

will appreciate any working - non-hackish - example :)

BTW I also tried following approach:

        <ng-container *ngFor="let column of elementsMeta">
            <kendo-grid-column  field="{{column.field}}"
                                title="{{column.title}}">
                <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem | json }} <br>
                {{ dataItem[column.field] }} <br>
                {{ column.field }}    
                </ng-template>
            </kendo-grid-column>
        </ng-container>

won't work as well :(

I'm running angular 6, with webpack and ngUpgrade config, compiling JIT, no cli involve, maybe the compiler havng an hard time with the double evaluation? dataItem[column.field]

not sure what to do..

Answer 1

My solution table dynamic:

<kendo-grid 
                [kendoGridBinding]="gridResumenView"
                [height]="550"
                [columnMenu]="{ filter: true }"
                [pageable]="false"
                [sortable]="true"
                [filterable]="true"
                [reorderable]="true"
                [resizable]="true"
                [navigable]="true"
            >
                <ng-template kendoGridToolbarTemplate>
                    <button kendoButton icon="file-pdf" (click)="onPdfResumen()">Exportar a PDF</button>
                    <button kendoButton icon="file-excel" (click)="onXlsxResumen()">Exportar a Excel</button>
                </ng-template>
                <kendo-grid-column 
                    *ngFor="let item of columns" 
                    [headerStyle]="{'text-align': 'center','font-size' : '0.8rem','background-color': '#666',color: '#fff'}"
                    field="{{item.field}}" 
                    title="{{item.title}}"
                    [style]="{'font-size' : '0.7rem','text-align': 'left'}"
                    width="180" 
                    >
                    <ng-template kendoGridCellTemplate let-dataItem>
                        <span *ngIf="dataItem[item.field] > 0">{{ intl.formatNumber(dataItem[item.field], "###,##0.000000") }}</span>
                        <span *ngIf="dataItem[item.field] == 0 || !isNumber(dataItem[item.field])  " >{{ dataItem[item.field] }}</span>
                    </ng-template>
                </kendo-grid-column>
            </kendo-grid>

function isNumeric:

  public isNumber(value : any): boolean { 
return typeof value === 'number'; 

}

And import format:

import { IntlService } from "@progress/kendo-angular-intl";

constructor(public intl: IntlService) { 
super(translate);}

Answer 2

this is the way to work with dynamic columns: columnList should contains all the properties names from rowListData like below.

rowListData = [ { "field": "", "dataElement": "Replacement Cost", "value": null, "value2": null}],

columnList = [{field: "field", title: ""}, { field: "dataElement", title: "Data Element"},{field: "value", title: "Review Start 2023"},{field: "value2",title: "Review Start 2024"}]

use this official Doc for additional help: https://www.telerik.com/kendo-angular-ui/components/grid/columns/define-columns/#toc-dynamic-column-generation

Answer 3

HTML Template :

    <kendo-grid [data]="elements">
        <kendo-grid-column 
        *ngFor="let item of elementsMeta" 
        field="{{item.columnField}}" 
        title="{{item.columnTitle}}">
            <ng-template kendoGridCellTemplate let-dataItem>
                {{dataItem[item.columnField]}}
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>

JSON :

this.elements = [{
    "ProductID": 1,
    "ProductName": "Chai",
    "UnitPrice": 18.0000
}, {
    "ProductID": 2,
    "ProductName": "Chang",
    "UnitPrice": 19.0000
}, {
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "UnitPrice": 10.0000
}, {
    "ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning",
    "UnitPrice": 22.0000
}, {
    "ProductID": 5,
    "ProductName": "Chef Anton's Gumbo Mix",
    "UnitPrice": 21.3500
}];

this.elementsMeta = [{
    "columnField": "ProductID",
    "columnTitle": "ID",
},{
    "columnField": "ProductName",
    "columnTitle": "Name",
},{
    "columnField": "UnitPrice",
    "columnTitle": "Price",
}]

Working Demo : https://stackblitz.com/edit/angular-ckztcy-s3vrhf

Answer 4

Try with below code :

<kendo-grid>
<kendo-grid-column *ngFor="let column of columns" [field]="column.field" [title]="column.title" [format]="column.format" [width]="column.width" [filter]="column.filter" [editable]="column.editable" [filterable]="column.filterable" [groupable]="column.groupable" [hidden]="column.hidden" 
[reorderable]="column.reorderable" [locked]="column.locked" >
    <div *ngIf="column.template && column.template !== ''">
        <ng-template kendoGridCellTemplate let-dataItem let-column="column">
            {{dataItem[column.field]}}
        </ng-template>
    </div>
</kendo-grid-column>
</kendo-grid>