feat(grids/filtering): Add percent representation hint to filter inputs for percent columns by Copilot · Pull Request #17083 · IgniteUI/igniteui-angular

Copilot · 2026-03-23T15:29:55Z

When filtering a percent-type column, the input gives no indication of whether the user should enter the raw underlying value (0.03) or the display percentage (3). The cell editor already shows a live percent preview suffix — this brings the same UX to the filter row and the Excel-style filter custom dialog.

Changes

grid-filtering-row.component.ts
- Fixed missing Percent case in type getter (was returning undefined, leaving the input without a type attribute)
- Added IgxPercentFormatterPipe to component imports
grid-filtering-row.component.html
- When column is percent and a value is present, renders a <span class="igx-grid__filtering-row-percent-hint"> inside the suffix showing the typed value formatted as a percentage (e.g. 0.03 → 3%)
excel-style-default-expression.component.ts / .html
- Added IgxSuffixDirective + IgxPercentFormatterPipe to imports
- Adds the same percent hint suffix to the value input in the ESF custom filter dialog when searchVal is set
column.spec.ts
- Two new tests covering the filter row and ESF dialog percent hint behavior

The hint mirrors what the cell editor already shows:

<!-- filter row suffix (when value is present and column.dataType === 'percent') -->
<span class="igx-grid__filtering-row-percent-hint">
  {{ value | percent:column.pipeArgs.digitsInfo:filteringService.grid.locale }}
</span>

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

accounts.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5005 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-44524039 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5881548494751122789,9020479793249870160,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14794112411320260731,5892079242632477046,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5003 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61884147 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,15645166211072150218,11605460742287624889,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12108632259767633110,17344837188505846502,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
- Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome --user-data-dir=/tmp/karma-44524039 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=44524039 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
android.clients.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=6286 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-97485483 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,9854082182616735546,13678260469158639640,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,16015504881944042256,17532224460988987701,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
- Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome --user-data-dir=/tmp/karma-97485483 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=97485483 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
clients2.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5005 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-44524039 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5881548494751122789,9020479793249870160,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14794112411320260731,5892079242632477046,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5004 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-81516743 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,11109773833415926646,15267211610726191680,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,4426389747823820436,15682720818887519377,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5003 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61884147 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,15645166211072150218,11605460742287624889,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12108632259767633110,17344837188505846502,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
content-autofill.googleapis.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=6278 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-56702612 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,6329673334288820058,9412723425518903040,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12562857759879053444,8746962202129281808,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
- Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome --user-data-dir=/tmp/karma-56702612 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=56702612 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=6286 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-97485483 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,9854082182616735546,13678260469158639640,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,16015504881944042256,17532224460988987701,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
redirector.gvt1.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5005 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-44524039 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5881548494751122789,9020479793249870160,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14794112411320260731,5892079242632477046,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
- Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome --user-data-dir=/tmp/karma-44524039 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=44524039 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5004 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-81516743 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,11109773833415926646,15267211610726191680,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,4426389747823820436,15682720818887519377,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
www.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5005 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-44524039 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5881548494751122789,9020479793249870160,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14794112411320260731,5892079242632477046,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5003 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61884147 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,15645166211072150218,11605460742287624889,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12108632259767633110,17344837188505846502,4 --trace-process-track-uuid=3190708989122997041 bash (dns block)
- Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome /home/REDACTED/.cache/puppeteer/chrome/linux-146.0.7680.153/chrome-linux64/chrome --user-data-dir=/tmp/karma-44524039 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=44524039 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

This section details on the original issue you should resolve

<issue_title>Filtering by percent UI is unclear on whether you need to type the % representation or the actual value.</issue_title>
<issue_description>## Is your feature request related to a problem? Please describe.

You can refer to the following sample: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types#angular-column-types-example

When filtering a percent type column, you get a simple number input:

It's unclear if you are supposed to type in the % representation to filter by it (like 1, 2, 3 etc.) or the actual underlaying value in the data (0.01, 0.02, 0.03 etc).

Describe the solution you'd like

For editing, we show by default a suffix, with what the value you typed in the editor would translate as in %:

So maybe we can add something like that in the Filter UI, so the user knows what the number they typed to filter by looks like in %.

Describe alternatives you've considered

Or at least document this in the related section, so there's no confusion.

Additional context

Add any other context or screenshots about the feature request here.
</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Filtering by percent UI is unclear on whether you need to type the % representation or the actual value. #16505

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

…g for percent columns Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com> Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/b546a4e6-6867-4617-ad80-073cc007b26d

… filter row Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com> Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/b546a4e6-6867-4617-ad80-073cc007b26d

Copilot

Pull request overview

This PR improves filtering UX for percent-type grid columns by adding a live “percent representation” hint (e.g. 0.03 → 3%) in both the filter row and the Excel-style custom filter dialog, aligning the experience with the existing cell editor behavior.

Changes:

Add a percent preview suffix hint in the filter row input and in the Excel-style custom filter dialog input for percent columns.
Fix the filter-row input type getter to correctly handle Percent and ensure the appropriate formatter pipe is available to templates.
Add tests covering the percent hint rendering behavior in both UIs.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
projects/igniteui-angular/grids/grid/src/column.spec.ts	Adds tests asserting the percent hint suffix appears only when a value is provided (filter row + ESF custom dialog).
projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts	Imports `IgxSuffixDirective` and `IgxPercentFormatterPipe` to support rendering a percent hint suffix in the ESF custom dialog.
projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.html	Renders the conditional percent hint suffix for percent columns when `searchVal` is set.
projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts	Adds `Percent` handling to input `type` getter and imports `IgxPercentFormatterPipe` for the template.
projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.html	Renders the percent hint span within the suffix area when filtering a percent column and a value is present.
package.json	Adds `node-releases` as a direct devDependency.
package-lock.json	Updates lockfile to reflect dependency changes (including `node-releases` and other npm resolution churn).

Copilot · 2026-03-24T06:51:34Z

projects/igniteui-angular/grids/grid/src/column.spec.ts

+            // Enter a value to trigger the suffix (350ms debounce is applied to the filter row input)
+            GridFunctions.typeValueInFilterRowInput(0.03, fix, input);
+            tick(350);
+            fix.detectChanges();


This test hard-codes the filter-row debounce duration (350ms). Since the debounce is defined by INPUT_DEBOUNCE_TIME in the component, consider referencing that exported token’s factory value (or a shared constant used in tests) to avoid brittle failures if the debounce time changes in the future.

Initial plan

eb9878b

Copilot AI assigned Copilot and kdinev Mar 23, 2026

Copilot started work on behalf of kdinev March 23, 2026 15:30 View session

Copilot AI and others added 2 commits March 23, 2026 15:48

feat(grids/filtering): add percent suffix to filter row and ESF dialo…

5c19548

…g for percent columns Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com> Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/b546a4e6-6867-4617-ad80-073cc007b26d

refactor(grids/filtering): use specific CSS class for percent hint in…

34290e3

… filter row Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com> Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/b546a4e6-6867-4617-ad80-073cc007b26d

Copilot AI changed the title ~~[WIP] Fix unclear percent filtering representation in UI~~ feat(grids/filtering): Add percent representation hint to filter inputs for percent columns Mar 23, 2026

Copilot AI requested a review from kdinev March 23, 2026 15:56

Copilot finished work on behalf of kdinev March 23, 2026 15:56

kdinev added grid: filter-ui filtering grid: excel-style-filtering grid ❌ status: awaiting-test PRs awaiting manual verification version: 22.0.x labels Mar 24, 2026

kdinev requested review from MayaKirova and Copilot March 24, 2026 06:46

kdinev assigned MayaKirova Mar 24, 2026

Copilot started reviewing on behalf of kdinev March 24, 2026 06:47 View session

chore(*): updating package-lock

cf9a296

Copilot AI reviewed Mar 24, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(grids/filtering): Add percent representation hint to filter inputs for percent columns#17083

feat(grids/filtering): Add percent representation hint to filter inputs for percent columns#17083
Copilot wants to merge 4 commits intomasterfrom
copilot/clarify-percent-filter-ui

Copilot AI commented Mar 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Copilot AI commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

I tried to connect to the following addresses, but was blocked by firewall rules:

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Comments on the Issue (you are @copilot in this section)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Copilot AI commented Mar 23, 2026 •

edited

Loading