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 index d84cde1a188..82a57fc97bb 100644 --- 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 @@ -16,13 +16,14 @@ import { IgxGridExternalAdvancedFilteringComponent, IgxGridAdvancedFilteringBindingComponent, IgxGridAdvancedFilteringOverlaySettingsComponent, - IgxGridAdvancedFilteringDynamicColumnsComponent + IgxGridAdvancedFilteringDynamicColumnsComponent, + IgxGridAdvancedFilteringWithToolbarComponent } from '../../test-utils/grid-samples.spec'; import { ControlsFunction } from '../../test-utils/controls-functions.spec'; import { FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy'; import { IgxHierGridExternalAdvancedFilteringComponent } from '../../test-utils/hierarchical-grid-components.spec'; import { IgxHierarchicalGridComponent } from '../hierarchical-grid/public_api'; -import { IFilteringEventArgs } from '../public_api'; +import { IFilteringEventArgs, IgxGridToolbarAdvancedFilteringComponent } from '../public_api'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { By } from '@angular/platform-browser'; import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/date-time-editor.directive'; @@ -43,7 +44,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { IgxGridExternalAdvancedFilteringComponent, IgxGridAdvancedFilteringBindingComponent, IgxHierGridExternalAdvancedFilteringComponent, - IgxGridAdvancedFilteringDynamicColumnsComponent + IgxGridAdvancedFilteringDynamicColumnsComponent, + IgxGridAdvancedFilteringWithToolbarComponent ] }); })); @@ -3157,6 +3159,65 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { }); + describe('Advanced filtering with toolbar', () => { + let fix: ComponentFixture; + let grid: IgxGridComponent; + + beforeEach(fakeAsync(() => { + fix = TestBed.createComponent(IgxGridAdvancedFilteringWithToolbarComponent); + grid = fix.componentInstance.grid; + fix.detectChanges(); + })); + + it('Should update toolbar when advancedFilteringExpressionsTreeChange emits a new value', fakeAsync(() => { + // Set initial filtering expressions tree + const tree = new FilteringExpressionsTree(FilteringLogic.And); + tree.filteringOperands.push({ + fieldName: 'ProductName', + condition: IgxStringFilteringOperand.instance().condition('contains'), + searchVal: 'angular', + ignoreCase: true + }); + + // Apply the initial filtering tree + grid.advancedFilteringExpressionsTree = tree; + fix.detectChanges(); + + // Create a new filtering tree with more filters + const updatedTree = new FilteringExpressionsTree(FilteringLogic.And); + updatedTree.filteringOperands.push({ + fieldName: 'Downloads', + condition: IgxStringFilteringOperand.instance().condition('equals'), + searchVal: 10, + ignoreCase: true + }); + updatedTree.filteringOperands.push({ + fieldName: 'ProductName', + condition: IgxStringFilteringOperand.instance().condition('contains'), + searchVal: 'angular', + ignoreCase: true + }); + updatedTree.filteringOperands.push({ + fieldName: 'Category', + condition: IgxStringFilteringOperand.instance().condition('equals'), + searchVal: 'electronics', + ignoreCase: false + }); + + // Update the filtering expressions tree + grid.advancedFilteringExpressionsTree = updatedTree; + fix.detectChanges(); + + // Verify the correct number of filters + const toolbarDebugElement = fix.debugElement.query(By.directive(IgxGridToolbarAdvancedFilteringComponent)); + const toolbarComponent = toolbarDebugElement.componentInstance as IgxGridToolbarAdvancedFilteringComponent; + const numberOfFilters = (toolbarComponent as any).numberOfColumns; + + expect(grid.advancedFilteringExpressionsTree.filteringOperands.length).toEqual(3); + expect(numberOfFilters).toEqual(3); + })); + }) + describe('Localization - ', () => { it('Should correctly change resource strings for Advanced Filtering dialog.', fakeAsync(() => { const fix = TestBed.createComponent(IgxGridAdvancedFilteringComponent); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts index 06d6ed43f52..a28af5401aa 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, Inject, Input } from '@angular/core'; +import { Component, Inject, Input, OnInit } from '@angular/core'; import { IgxToolbarToken } from './token'; import { OverlaySettings } from '../../services/overlay/utilities'; import { IgxIconComponent } from '../../icon/icon.component'; @@ -33,7 +33,7 @@ import { IFilteringExpression } from '../../data-operations/filtering-expression standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf] }) -export class IgxGridToolbarAdvancedFilteringComponent implements AfterViewInit { +export class IgxGridToolbarAdvancedFilteringComponent implements OnInit { protected numberOfColumns: number; /** * Returns the grid containing this component. @@ -46,17 +46,18 @@ export class IgxGridToolbarAdvancedFilteringComponent implements AfterViewInit { @Input() public overlaySettings: OverlaySettings; - constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) { - this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => { - this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length; - }); - } + constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) { } /** * @hidden */ - public ngAfterViewInit(): void { + public ngOnInit(): void { + // Initial value this.numberOfColumns = this.grid?.advancedFilteringExpressionsTree ? this.extractUniqueFieldNamesFromFilterTree(this.grid?.advancedFilteringExpressionsTree).length : 0; + // Subscribing for future updates + this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => { + this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length; + }); } protected extractUniqueFieldNamesFromFilterTree(filteringTree?: IFilteringExpressionsTree) : string[] { 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 index 6a7dcb2990f..02cc500b82f 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1186,6 +1186,30 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent { } } +@Component({ + template: ` + + + Really advanced filtering + + + + + + + + + + + `, + standalone: true, + imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent] +}) +export class IgxGridAdvancedFilteringWithToolbarComponent extends BasicGridComponent { + public customFilter = CustomFilter.instance(); + public override data = SampleTestData.excelFilteringData(); +} + @Component({ template: `