fix(grid): correct Excel filter virtual sizing - 22.1.x - #17561
Merged
Conversation
viktorkombov
added
❌ status: awaiting-test
igdmdimitrov
added
✅ status: verified
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The Fluent theme rule relies on an undefined CSS variable for border width, making the intended sizing stabilization ineffective.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Fixes Excel-style filtering virtualization sizing in Ignite UI for Angular grids by measuring the first rendered list item height and aligning virtual item sizing and theme spacing, addressing scrollbar thumb lag and unreachable last-item scenarios (notably in Indigo).
Changes:
- Measure the first rendered Excel filter list item and use it to initialize
igxForvirtualitemSizeviaIgxExcelStyleSearchComponent. - Adjust Indigo theme spacing so vertical spacing is included in the measured item size (instead of CSS
gapbetween virtualized items). - Add unit test coverage validating that measured rendered height is applied to the virtualizer, and introduce Fluent/Indigo style updates plus a small virtualization sample tweak.
File summaries
| File | Description |
|---|---|
| src/app/virtual-for-directive/virtual-for.sample.html | Updates virtualization demo markup to apply fixed/variable heights on the list item host element. |
| src/app/virtual-for-directive/virtual-for.sample.css | Adds styling to ensure list item content stretches to the host height in the demo. |
| projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts | Adds a test asserting rendered item height is used to initialize the Excel filter virtualizer item size. |
| projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss | Moves Indigo list spacing into the rendered item size to stabilize virtual scrolling range. |
| projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss | Includes Fluent Excel filter theme styles in the shared theme forwards. |
| projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss | Adds Fluent-specific last-item styling intended to keep virtualized item height stable. |
| projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts | Measures first rendered list item height and uses it as the Excel filter virtual itemSize. |
Review details
- Files reviewed: 7/7 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
ChronosSF
enabled auto-merge (squash)
September 3, 2026 14:27
ChronosSF
approved these changes
Sep 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #17513
Closes #17521
Description
Uses the first rendered Excel-style filter item to initialize the virtual item size. Theme-specific spacing is kept within the measured item, stabilizing the scrollbar and ensuring the last Indigo item is reachable.
Motivation / Context
The configured virtual item size could differ from the rendered height, causing scrollbar thumb lag. In the Indigo theme, the scroll range could also end before the last item was fully visible.
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
How Has This Been Tested?
Added unit coverage verifying that the rendered item height is applied to the virtualizer. Manually verified the Indigo StackBlitz reproduction by dragging the scrollbar thumb to the bottom.
Test Configuration:
Screenshots / Recordings
See the recording attached to the related issue.
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdatesng updatemigrations for breaking changes (migrations guidelines)