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

1
votes

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

2
angularkendo-ui-angular2
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 - 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
What is the change detection policy for the component containing the grid? Is it OnPush? – Shai
@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
Where do you get dataItem from and where do you get elementsMeta from and when? – Shai

2 Answers

2
votes

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

0
votes

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>