fix(advanced-filtering): pass overlay settings in GridType (#13974)

IgniteUI · Mar 7, 2024 · f82a469 · f82a469
1 parent 096f4a8
commit f82a469
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 4 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -1111,7 +1111,7 @@ export interface GridType extends IGridDataBindable {
     getVisibleContentHeight(): number;
     getDragGhostCustomTemplate(): TemplateRef<any> | null;
     openRowOverlay(id: any): void;
-    openAdvancedFilteringDialog(): void;
+    openAdvancedFilteringDialog(overlaySettings?: OverlaySettings): void;
     showSnackbarFor(index: number): void;
     getColumnByName(name: string): any;
     getColumnByVisibleIndex(index: number): ColumnType;

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
@@ -14,7 +14,8 @@ import {
     IgxGridAdvancedFilteringColumnGroupComponent,
     IgxGridAdvancedFilteringComponent,
     IgxGridExternalAdvancedFilteringComponent,
-    IgxGridAdvancedFilteringBindingComponent
+    IgxGridAdvancedFilteringBindingComponent,
+    IgxGridAdvancedFilteringOverlaySettingsComponent
 } from '../../test-utils/grid-samples.spec';
 import { ControlsFunction } from '../../test-utils/controls-functions.spec';
 import { FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy';
@@ -3043,6 +3044,29 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(grid.filteredData).toBe(null);
         }));
     });
+
+    describe('Overlay settings - ', () => {
+        it('Should respect the overlay settings set in the component.', fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridAdvancedFilteringOverlaySettingsComponent);
+            const grid: IgxGridComponent = fix.componentInstance.grid;
+            fix.detectChanges();
+
+            // Open Advanced Filtering dialog.
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            // Verify context menu is opened.
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).not.toBeNull();
+
+            // Press 'Escape' on the context menu.
+            UIInteractions.triggerKeyDownEvtUponElem('Escape', GridFunctions.getRowEditingOverlay(fix));
+            tick();
+            fix.detectChanges();
+
+            // Verify context menu is opened.
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).not.toBeNull();
+        }));
+    });
 });
 
 const selectColumnInEditModeExpression = (fix, dropdownItemIndex: number) => {

diff --git a/...cts/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html b/...cts/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html
@@ -1,6 +1,6 @@
 <button igxButton="outlined" type="button" [displayDensity]="grid.displayDensity" name="btnAdvancedFiltering" igxRipple
     [title]="grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip"
-    (click)="grid.openAdvancedFilteringDialog()"
+    (click)="grid.openAdvancedFilteringDialog(overlaySettings)"
     [ngClass]="grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'">
     <igx-icon>filter_list</igx-icon>
     <span #ref>

diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -14,7 +14,7 @@ import { IgxColumnComponent } from '../grids/columns/column.component';
 import { IgxFilteringOperand, IgxNumberFilteringOperand } from '../data-operations/filtering-condition';
 import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 import { FilteringStrategy, IgxFilterItem } from '../data-operations/filtering-strategy';
-import { ISortingOptions, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from '../grids/public_api';
+import { ISortingOptions, IgxExcelStyleHeaderIconDirective, IgxGridToolbarAdvancedFilteringComponent, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from '../grids/public_api';
 import { IgxRowAddTextDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective } from '../grids/grid.rowEdit.directive';
 import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-style/excel-style-filtering.component';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
@@ -41,6 +41,7 @@ import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCollapsibl
 import { IgxGroupByRowSelectorDirective, IgxHeadSelectorDirective, IgxRowSelectorDirective } from '../grids/selection/row-selectors';
 import { CellType, ColumnType, IgxAdvancedFilteringDialogComponent } from '../grids/public_api';
 import { IgxGridComponent } from '../grids/grid/public_api';
+import { OverlaySettings } from '../services/public_api';
 
 @Component({
     template: GridTemplateStrings.declareGrid('', '',
@@ -1172,6 +1173,35 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent {
     }
 }
 
+@Component({
+    template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="true">
+        <igx-grid-toolbar>
+            <igx-grid-toolbar-advanced-filtering
+                #filtering
+                [overlaySettings]="filteringOverlaySettings">
+            </igx-grid-toolbar-advanced-filtering>
+        </igx-grid-toolbar>
+        <igx-column width="100px" [field]="'ID'" [header]="'HeaderID'" [hasSummary]="true"></igx-column>
+        <igx-column width="100px" [field]="'ProductName'" dataType="string"></igx-column>
+        <igx-column width="100px" [field]="'Downloads'" dataType="number" [hasSummary]="true"></igx-column>
+        <igx-column width="100px" [field]="'Released'" dataType="boolean"></igx-column>
+        <igx-column width="100px" [field]="'ReleaseDate'" dataType="date" headerClasses="header-release-date"></igx-column>
+        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" dataType="string" [filters]="customFilter">
+        </igx-column>
+    </igx-grid>`,
+    standalone: true,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent]
+})
+export class IgxGridAdvancedFilteringOverlaySettingsComponent extends BasicGridComponent {
+    public customFilter = CustomFilter.instance();
+    public hidingOverlaySettings: OverlaySettings = {};
+    public override data = SampleTestData.excelFilteringData();
+
+    public filteringOverlaySettings: OverlaySettings = {
+        closeOnEscape: false
+    };
+}
+
 @Component({
     template: `
     <igx-grid #grid1 [data]="data" height="400px">