12

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.

dpdragnev
  • 2,011
  • 2
  • 28
  • 55

1 Answers1

5

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.

mchl18
  • 2,119
  • 12
  • 20
  • Great suggestion. Thanks. I was hoping for more component oriented approach though. An event fired by the component itself. I just checked their latest release and there is no dataBound event yet. Perhaps using Angular's ngAfterViewInit might be the best option. – dpdragnev Jul 30 '18 at 20:04
  • Sadly kendo seems to have chosen more template-oriented approaches to their components, presumably due to the fact that kendo is in its essence just a jquery plugin. For full component-based support you would have to look towards angular material. I am having the same issues: I chose kendo for the implementation of a project within our company but due to issues like this we are switching away from kendo towards angular material. – mchl18 Aug 02 '18 at 10:50
  • This solution works. Mods, please mark it as solution. – Kings Sep 27 '18 at 10:52
  • handling the data changi inside ngOnChanges is probably the best, as the input might change and ngAfterViewInit is called just once! – baHI Jun 03 '19 at 18:39
  • When an input changes, change detection will run again. No need to use `ngOnChanges` unless there is special stuff to do with `onPush` – mchl18 Jun 11 '19 at 08:41
  • hi @mchl18 you are correct, it only works once after first initialization , if the grid data changes from more parent inputs, it isnt called anymore –  Jul 20 '20 at 21:55
  • @marksmith542 yes, if the data is changing we would need something like `afterContentChecked` – mchl18 Jul 21 '20 at 10:56
  • Yeah I would be more than happy if this could be flagged as the correct answer. – mchl18 Jul 21 '20 at 10:59