CODEWITHSUNDEEP
kendo-uikendo-gridangular7
user12093961
user12093961

Reputation: 81

Kendo Grid dynamic header population with angular 7

Am developing a kendo grid with column header to be dynamic from a api response data , i could find lots of idea when using jquery, is there anyway to load the columns data from angular component class to template html.any links would do.

Upvotes: 0

Views: 1532

Answers (1)

Shai
Shai

Reputation: 3872

What you're looking for is setting the header template. You can read about it here.

Basically, you do the following:

<kendo-grid [data]="gridData">
    <kendo-grid-column field="ProductName">
        <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              {{column.field}}({{columnIndex}})
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

Inside the template you can use whatever members you have on the component.

Note: If the data you're using in the template is updated in an asynchronous call and you're using ChangeDetectionStrategy.OnPush, you need to add changeDetector: ChangeDetectorRef to your constructor parameters and let the change detector know that it has to check for changes using this.changeDetector.markForCheck().

See a demo here.

Upvotes: 1

Related Questions