Autofit only for content avoid the header text and provide ellipsis in the header text

[Cesar Smerling]

Good morning,

I am trying to use autoFitColumns, but I am having some issues with the column. I would like it to adjust based on the content only, without considering the headerText size, making the headerText use clipMode=EllipsisWithTooltip. From what I can see, this option is not available.

Is there a correct way to make autoFit apply only to the content without taking the header into account? As shown in the image, I have a column with a checkbox, and it becomes too wide. I would prefer the header text to be ellipsized in this case, as I mentioned.

I managed to achieve this by using a headerTemplate with a div that has a max-width and is styled to make the text wrap as an ellipsis, but in this case, the sort icon is not visible.

What other alternatives do I have?

We are using version 20.1.47 since we are on Angular 11.

I also want to ask: What is the maximum Syncfusion version supported in Angular 11?

Thank you very much!

[Pavithra Subramaniyam]

Hi Cesar Smerling,

Query#1: Is there a correct way to make autoFit apply only to the content without taking the header into account?

The autoFitColumns method in the EJ2 Grid adjusts column widths based on both the content and the headerText, with no built-in option to ignore the header in this calculation. However, you can meet your requirement by dynamically modifying the headerText after the column auto-fit process is complete.

dataBound() {

    this.grid.autoFitColumns([]);

    [].slice

      .call(this.grid.element.querySelectorAll('.e-headertext'))

      .filter((e, i) => (e.innerText = this.hdrTextArray[i]));

  }

 

Sample: https://stackblitz.com/edit/angular-qdc78y2g-exhhisgd?file=src%2Fapp.component.ts

Query#2: What is the maximum Syncfusion version supported in Angular 11?

Our EJ2 version 18.4.31 and above is compatible with Angular 11. Please refer to the below documentation link for Angular Version Compatibility.

https://ej2.syncfusion.com/angular/documentation/upgrade/version-compatibility

Regards,

Pavithra S