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..

Can you provide a runnable example (e.g. via Stackblitz) showing that behaviour? When I add {{ dataItem[column.field] }} to the cell-template to the sample from the docs it works just fine. — Philipp
– Philipp, Commented Jan 23, 2019 at 15:04
@Philipp - appriciate your help, in stackblitz standard cli-based project it works fine! but inside my production application it doesn't work, even if I just pass a list of simple list of columns and do: {{ dataItem[column }}, unfortunately I can't supply a stackblitz that will mock my environment (old angular 6 with a lots of upgrade manipulations) — liron_hazan
– liron_hazan, Commented Jan 23, 2019 at 16:48
What is the change detection policy for the component containing the grid? Is it OnPush? — Shai
– Shai, Commented Jan 27, 2019 at 12:21
@Shai - I checked that angle as well, it's OnPush, I tried Default but that didn't work, the component btw gets the binded data from its parent so it's not a tick — liron_hazan
– liron_hazan, Commented Jan 27, 2019 at 18:33
Where do you get dataItem from and where do you get elementsMeta from and when? — Shai
– Shai, Commented Jan 28, 2019 at 9:12

Rohìt Jíndal · Accepted Answer · 2020-02-10 11:22:09Z

4

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

answered Feb 10, 2020 at 11:22

Rohìt Jíndal

27.3k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saulyasar Over a year ago

I'm doing exactly the same in my grid, i can see columns and colunmnames correctly but i can't see data's inside row. Why? here is stackblitx link stackblitz.com/edit/angular-xymaqy?file=app%2Fproducts.ts

Pranay Kharsamble · Accepted Answer · 2020-02-10 04:52:13Z

1

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>

answered Feb 10, 2020 at 4:52

Pranay Kharsamble

1912 silver badges3 bronze badges

Comments

Panku · Accepted Answer · 2022-10-14 19:13:44Z

0

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

edited Oct 14, 2022 at 19:13

answered Oct 14, 2022 at 19:08

Panku

112 bronze badges

Comments

Armando Cordova · Accepted Answer · 2023-08-31 19:11:09Z

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);}

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related