fix(AdvancedFiltering): Fixed advanced filtering count #15136

Author: MarielaTihova

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -117,6 +117,26 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
         }));
 
+        it('Should set initial Advanced Filtering', fakeAsync(() => {
+            // Set filtering expressions tree
+            const tree = new FilteringExpressionsTree(FilteringLogic.And);
+            tree.filteringOperands.push({
+                fieldName: 'ProductName',
+                condition: IgxStringFilteringOperand.instance().condition('contains'),
+                searchVal: 'angular',
+                ignoreCase: true
+            });
+
+            // Add filters to the grid
+            const advancedFilteringTree: FilteringExpressionsTree = tree;
+            grid.advancedFilteringExpressionsTree = advancedFilteringTree;
+            fix.detectChanges();
+
+            // Verify number of advanced filters is correct
+            const advancedFilters = grid.advancedFilteringExpressionsTree.filteringOperands;
+            expect(advancedFilters.length).toEqual(1);
+        }));
+
         it('Should close Advanced Filtering dialog through API by respecting \'applyChanges\' argument.', fakeAsync(() => {
             grid.openAdvancedFilteringDialog();
             fix.detectChanges();

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts

@@ -45,17 +45,16 @@ 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 {
         this.numberOfColumns = this.grid?.advancedFilteringExpressionsTree ? this.extractUniqueFieldNamesFromFilterTree(this.grid?.advancedFilteringExpressionsTree).length : 0;
+        this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => {
+            this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length;
+        });
     }
 
     protected extractUniqueFieldNamesFromFilterTree(filteringTree?: IFilteringExpressionsTree) : string[] {

src/app/grid-filtering/grid-filtering.sample.html

@@ -14,6 +14,7 @@ <h4>Sample 1</h4>
         [filterMode]="'excelStyleFilter'"
         [allowAdvancedFiltering]="true"
         [rowSelection]="selectionMode"
+        [advancedFilteringExpressionsTree]="advancedFilteringTree"
         [height]="'600px'"
         [columnSelection]="'single'">
         <igx-grid-toolbar >