AutoResize Columns

[bhavin]

Hi,

  Its been nearly a year now that I am waiting for Kendo to provide a auto-fit/ resize option. Tried something like

public onDataStateChange(): void {
    this.fitColumns();
  }
  private fitColumns(): void {
      this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
        this.grid.autoFitColumns();
      });
  }

 

But this doesn't seem to work also. Our business requirement needs us to do the auto resize since we create our grids on the fly. 

Any solutions yet?

 

 

[Svet]

Hi Bhavin,

Indeed the use of the autoFitColumns function can be used in order to automatically set the size of each column according to the content of the column cells. Check this function and its functionality at the following articles :
https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/#toc-auto-fitting-content

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-autofitcolumns

The autoFitColumns function should be called only after the data has been already loaded in the Grid. This can be done on the initial loading of data for the Grid and in any subsequent (dataStateChange) event. In order to make sure, that the data has already been rendered in the Grid we can nest the autoFitColumns call inside a setTimeOut function. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-ze868y-umgxac?file=app/app.component.ts

If the total width of all columns exceeds the width of the Grid, then a horizontal scrollbar will be added. However, if the total width does not exceed the width of the Grid, then a white space will be present in order take the available space of the Grid. This behavior is by design and is documented in the Resizing article of the Grid Columns section:
https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/#toc-resizing

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

Regards,
Svetlin
Progress Telerik