Is there a way to capture the dataBound event of the grid similar to the one we had in the jQuery version of Kendo UI. I need to perform an action after the data is loaded in the grid.
There is a dataStateChange event, but this event does not fire during the initial load.
Currently, I am using a timeout function to delay the execution, but this is not a permanent and reliable solution.
Thank you.
I think it will suffice to use Angulars built in tools for this.
First of all it is advisable to create a new component for the grid:
grid.component.html
<kendo-grid [data]="tableData" #myTable>
<kendo-grid-column field="ListItem" title="List Item">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.title }}
</ng-template>
</kendo-grid-column>
</kendo-grid>
The ngAfterViewInit lifecycle hook of Angular will fire after init:
grid.component.ts
import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: `./table.component.html`,
})
export class TableComponent implements AfterViewInit {
@ViewChild('myTable') myTable: ElementRef;
public ngAfterViewInit() {
console.log('loaded', this.myTable);
}
public tableData = [
{ title: 'Number 1', id: 'one'},
{ title: 'Number 2', id: 'two'},
];
}
If the content of the array changes we would want to choose AfterContentChecked, which runs after each time a class member has changed and detectChanges has been called, so to say, when the content re-rendered during the lifecycle of the component.