OnDataRendered missing?

[Kristiyan]

 

Hi guys,

I would like to call the GridComponent's method autoFitColumns() after initially loading the data but don't want to have an extra button for this. Instead I would like to call the method only after the first time the data has been initially rendered (or every time new data has been loaded). Is that possible?

Regards, 

K. Dimitrov

[Svet]

Hi Kristiyan,

Indeed, the Kendo UI for Angular Grid does not provide such event. Instead, the autoFitColumns method could be called after the data is available and passed to the grid. We can nest the function call in a setTimeout to ensure, that it will be called once the Grid has been rendered with the data. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-ze868y?file=app%2Fapp.component.ts

constructor(private service: CategoriesService) {
    this.view = service;
    this.service.query(this.state);
    this.view.subscribe(res =>{
        this.data = res;
        setTimeout(()=>{
          this.grid.autoFitColumns();
        })
    })

}

If the used data is local, we can call the autoFitColumns method within one of Angular's lifecycle hooks as demonstrated below:

ngOnInit(){
  setTimeout(()=>{
    this.grid.autoFitColumns();
  })
}

I hope this helps. Let us know in case any further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Brian Vallelunga]

I'm finding that I need an event handler to indicate the grid has rendered as well. The loading indicator doesn't show for me because while the data has been sent to the grid it takes a few seconds to actually render. I'd like the loading indicator to be shown during that time.

[Svet]

Hi Brian,

If I understand correctly, the loading indicator should be displayed while the data is being rendered in the Grid. Such scenario could occur when some large data is passed to the Grid or if a heavy data operation is performed. This is why, when there are time-consuming synchronous operations that are blocking the main thread, the suggested approach is to make them asynchronous (for example via calling the time-consuming operation in a setTimeout). 

This way a loading indicator can be displayed before starting the time-consuming operation, and hidden synchronously after the operation is complete (in the body of the setTimeout callback, right after calling the time-consuming operation).

Check the following example where I am loading 1000 items at once in the Grid:
https://stackblitz.com/edit/angular-3viu72-wbzwxc?file=app/app.component.ts

I hope this helps. 

Regards,
Svetlin
Progress Telerik

[Brian Vallelunga]

That example cleared it up for me and the indicator now loads successfully. Thank you.