diff --git a/CHANGELOG.md b/CHANGELOG.md index 62f1182c6f4..3444cac05ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,11 @@ All notable changes for each version of this project will be documented in this - `IgxOverlayService` - **Deprecation** - The `outlet` property in `OverlaySettings`, `IgxOverlayOutletDirective`, and `igxToggleOutlet` input on `IgxToggleActionDirective` are deprecated and will be removed in a future version. As overlay service now integrates the HTML Popover API and prefers rendering content in place / in the top layer, significantly reducing the need for outlet containers, new code should rely on the default in-place / top-layer rendering behavior instead of custom outlet containers. +### Bug Fixes + +- `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent` + - Excel-style filtering now preselects custom conditions in the filter dialog when no filter value has been entered yet. + ## 21.1.3 ### Security Fixes 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 e1837de0c1f..b78ed402ea1 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 @@ -189,6 +189,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 387d730c2a9..c6beb49564e 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'; @@ -3719,6 +3720,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');