Hi,
I'm using kendo-grid in Angular with both resizable columns and virtual scrolling enabled.
I also call the autoFitColumns() method (through ViewChild) to auto-adjust the column widths based on the content.
However, I noticed the following problematic behavior:
My grid uses
pageSize = 60, so only 60 rows are rendered in the DOM at a time.I have a total of about 101 rows.
The content in row #101 is much wider than any of the rows currently rendered.
When I call
autoFitColumns(), the method calculates the width based only on the visible (rendered) rows (the first 60).As a result, when I scroll down to row 101, the cell shows ellipsis (
...) because the column width didn't get adjusted based on its content.
It seems that autoFitColumns() does not take into account rows that aren't currently rendered due to virtual scrolling.
Expected behavior:
Ideally, autoFitColumns() should consider the ENTIRE dataset, or at least provide an option to temporarily render all rows, so the width is calculated correctly.
I'll attach a sample StackBlitz with:
101 records
Virtual scrolling + resizable = true
Last row has a long text
After calling
autoFitColumns, the column is not wide enough and shows "..."
Could you please confirm if this is expected behavior or if there's a recommended workaround?
https://stackblitz.com/edit/angular-8rzs1wr6-7hvlbi8f?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fproducts.ts
Thanks in advance!