CODEWITHSUNDEEP
angularkendo-ui-angular2
djarekg
djarekg

Reputation: 81

Kendo UI for Angular2 - Grid How to Add Columns Dynamically

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.

Upvotes: 6

Views: 10098

Answers (2)

vinay adepu
vinay adepu

Reputation: 51

 <kendo-grid [data]="gridData">
 </kendo-grid>

You can directly add "gridData" without column names.

Upvotes: 0

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

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

Upvotes: 13

Related Questions