Kendo UI for Angular 2 Grid dataBound event

Question

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.

Answer 1

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'},
  ];
}

Here is a Stackblitz

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.