From de648617b305c2cad7823d7b853a87d382c5dfa9 Mon Sep 17 00:00:00 2001 From: Viktor Kombov Date: Fri, 16 Oct 2026 13:23:38 +0300 Subject: [PATCH] fix(grid): preselect custom conditions in Excel-style filtering --- CHANGELOG.md | 2 + .../excel-style-custom-dialog.component.ts | 5 ++ .../grids/grid/src/grid-filtering-ui.spec.ts | 52 +++++++++++++++++++ 3 files changed, 59 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7d5d1e15d3..3698e26c0cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ All notable changes for each version of this project will be documented in this ### Bug Fixes +- `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent` + - Excel-style filtering now preselects custom conditions in the filter dialog when no filter value has been entered yet. - **Forms** - `igx-checkbox`, `igx-switch` and `igx-radio-group` no longer turn invalid while the bound Signal Forms field is untouched and pristine, e.g. right after `reset()` or when a cross-field rule makes a pristine field required. The invalid state now shows only once the field is touched or dirty, as with reactive and template-driven forms. - `IgxAccordionComponent` diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts index f584936a458..48a0f0373bf 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts @@ -190,6 +190,11 @@ export class IgxExcelStyleCustomDialogComponent { } private createCondition(conditionName: string) { + const condition = this.column.filters?.condition(conditionName); + if (condition) { + return condition; + } + switch (this.column.dataType) { case GridColumnDataType.Boolean: return IgxBooleanFilteringOperand.instance().condition(conditionName); diff --git a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts index cab28e30a07..0654b9a1793 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts @@ -5,6 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; import { INPUT_DEBOUNCE_TIME } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from './grid.component'; +import { IgxExcelStyleCustomDialogComponent } from '../../core/src/filtering/excel-style/excel-style-custom-dialog.component'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { IgxGridFilteringCellComponent } from 'igniteui-angular/grids/core'; import { IgxGridHeaderComponent } from 'igniteui-angular/grids/core'; @@ -3796,6 +3797,57 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { expect(GridFunctions.getExcelFilteringDDInput(fix, 1).value).toEqual('Less Than'); })); + it('Should preselect custom string condition when opening the custom filter dialog.', fakeAsync(() => { + GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'AnotherField'); + + GridFunctions.clickExcelFilterCascadeButton(fix); + tick(); + fix.detectChanges(); + + GridFunctions.clickOperatorFromCascadeMenu(fix, 0); + tick(100); + + expect(GridFunctions.getExcelFilteringDDInput(fix, 0).value).toEqual('custom'); + expect(GridFunctions.getExcelFilteringInput(fix, 0).value).toEqual(''); + })); + + it('Should preselect custom number condition when opening the custom filter dialog.', fakeAsync(() => { + grid.getColumnByName('Downloads').filters = fix.componentInstance.customFilter; + fix.detectChanges(); + + GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads'); + + GridFunctions.clickExcelFilterCascadeButton(fix); + tick(); + fix.detectChanges(); + + GridFunctions.clickOperatorFromCascadeMenu(fix, 0); + tick(100); + + expect(GridFunctions.getExcelFilteringDDInput(fix, 0).value).toEqual('custom'); + expect(GridFunctions.getExcelFilteringInput(fix, 0).value).toEqual(''); + })); + + it('Should use the default condition when it is not defined in the column filters.', fakeAsync(() => { + GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'AnotherField'); + + GridFunctions.clickExcelFilterCascadeButton(fix); + tick(); + fix.detectChanges(); + + GridFunctions.clickOperatorFromCascadeMenu(fix, 0); + tick(100); + + const dialog = fix.debugElement.query(By.directive(IgxExcelStyleCustomDialogComponent)) + .componentInstance as IgxExcelStyleCustomDialogComponent; + dialog.selectedOperator = 'contains'; + dialog.onCustomDialogOpening(); + + const expression = dialog.expressionsList[0].expression; + expect(expression.condition).toBe(IgxStringFilteringOperand.instance().condition('contains')); + expect(expression.conditionName).toEqual('contains'); + })); + it('Should display friendly conditions\' names in custom filter dialog.', fakeAsync(() => { GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');