Kendo UI for Angular2 - Grid How to Add Columns Dynamically

Question

For the Grid compomemet, if I already have a couple columns predefined in the html but the resultset can have a variety of additional columns on top of the predefined ones, how can I dynamically adds those columns?

There is no way to know what those extra columns are until after I retrieve the data? I am able to access the grid component after the data is fetched using the ViewChild directive, but looking over the grid's columns' array like object, I don't see a way to add columns programmatically on the fly.

Answer 1

You can use ngFor to make a variable number of columns:

    <kendo-grid [data]="gridData">
      <ng-template ngFor [ngForOf]="columns" let-column>
        <kendo-grid-column field="{{column}}"></kendo-grid-column>
      </ng-template>
    </kendo-grid>

If you want to try this out, see the "showing and hiding columns" demo in the docs (scroll down in the columns examples).