How can I set the width of the column based on the content?

[Stavros]

Hello guys.

I have a Kendo Grid and I want to set the minimum width of some columns to the size of their content.

Any ideas on how to do that?

Thank you.

[Stoyan]

Hi Stavros,

To set the width of a column based on the content inside, the autoFitColumns method of the grid can be utilized which adjusts the width of the specified columns to fit the entire content. Please bear in mind if no parameters are passed to the method, it will resize all of the columns.

I've prepared a short StackBlitz demo that demonstrates the wanted behavior:

https://stackblitz.com/edit/angular-gihb18?file=app/app.component.ts

I hope this helps.

Regards,
Stoyan
Progress Telerik

[Stavros]

I think that it is not working for async data.

Here's how I fill my grid :

public gridData$ = this.service.cdiVariable$.pipe(
    tap(console.log),
    switchMap(cdiVariable =>
      this.dataSource.getContracts(cdiVariable).pipe(
        catchError(error => {
          if (error.error instanceof ErrorEvent) {
            this.errorMsg = `Error: ${error.error.message}`;
          } else {
            this.errorMsg = `Error: ${error.message}`;
          }
          return of([]);
        })
      )
    ),
    tap(console.log)
  );

[Stoyan]

Hi Stavros,

Thanks for the code snippet.

As in the code snippet, it is not visible where the autoFitColumns method is called. When retrieving data asynchronously, it has to be made sure that the data is available on the client.

I've created a short StackBlitz demo, that shows the autoFitColumns method working with async retrieved data:

https://stackblitz.com/edit/angular-gj7hyk

I hope this helps.

Regards,
Stoyan
Progress Telerik