Description
When the application is running in a zoneless change detection environment, the auto-size column feature for the Grid and Tree Grid components does not work correctly when the screen is not wide enough to fit all columns.
In this case, the column headers and the columns inside the grid body are rendered with different widths, which makes the Grid / Tree Grid layout appear broken.
This appears to be related to zoneless change detection, as the column widths are not synchronized correctly between the header and body sections when auto-sizing is applied and the available horizontal space is limited.
I have created a sample that reproduces the behavior:
https://y6yhtvg7.stackblitz.io
Framework
Angular
Angular Version
21.2
Ignite UI for Angular Version
21.2.0
Component / Area
Tree Grid
Browser
Chrome
Operating System
No response
Command Not Working
Steps to Reproduce
- Open the sample: https://y6yhtvg7.stackblitz.io
- Observe the alignment between the column headers and the grid body columns.
Actual Result
The column headers and the body columns are rendered with different widths. The Grid / Tree Grid appears misaligned and visually broken.
Expected Result
The auto-size column feature should calculate and apply consistent column widths for both the header and body sections, even when the available width is not enough to fit all columns.
Reproduction URL
https://y6yhtvg7.stackblitz.io
Attachments
Description
When the application is running in a zoneless change detection environment, the auto-size column feature for the Grid and Tree Grid components does not work correctly when the screen is not wide enough to fit all columns.
In this case, the column headers and the columns inside the grid body are rendered with different widths, which makes the Grid / Tree Grid layout appear broken.
This appears to be related to zoneless change detection, as the column widths are not synchronized correctly between the header and body sections when auto-sizing is applied and the available horizontal space is limited.
I have created a sample that reproduces the behavior:
https://y6yhtvg7.stackblitz.io
Framework
Angular
Angular Version
21.2
Ignite UI for Angular Version
21.2.0
Component / Area
Tree Grid
Browser
Chrome
Operating System
No response
Command Not Working
Steps to Reproduce
Actual Result
The column headers and the body columns are rendered with different widths. The Grid / Tree Grid appears misaligned and visually broken.
Expected Result
The auto-size column feature should calculate and apply consistent column widths for both the header and body sections, even when the available width is not enough to fit all columns.
Reproduction URL
https://y6yhtvg7.stackblitz.io
Attachments