fix(filtering): Fixed expression tree rehydrating before columns are generated

Author: Otixa

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -1856,8 +1856,8 @@ export abstract class IgxGridBaseDirective implements GridType,
             }
 
             value.type = FilteringExpressionsTreeType.Regular;
-            if (value && this.columns) {
-                this._filteringExpressionsTree = recreateTreeFromFields(value, this.columns) as IFilteringExpressionsTree;
+            if (value && this._columns && this._columns.length > 0) {
+                this._filteringExpressionsTree = recreateTreeFromFields(value, this._columns) as IFilteringExpressionsTree;
             } else {
                 this._filteringExpressionsTree = value;
             }
@@ -1906,7 +1906,11 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         if (value && isTree(value)) {
             value.type = FilteringExpressionsTreeType.Advanced;
-            this._advancedFilteringExpressionsTree = recreateTreeFromFields(value, this.columns) as IFilteringExpressionsTree;
+            if (this._columns && this._columns.length > 0) {
+                this._advancedFilteringExpressionsTree = recreateTreeFromFields(value, this._columns) as IFilteringExpressionsTree;
+            } else {
+                this._advancedFilteringExpressionsTree = value;
+            }
             this.filteringPipeTrigger++;
         } else {
             this._advancedFilteringExpressionsTree = null;
@@ -6607,6 +6611,9 @@ export abstract class IgxGridBaseDirective implements GridType,
         if (this._columns && this._filteringExpressionsTree) {
             this._filteringExpressionsTree = recreateTreeFromFields(this._filteringExpressionsTree, this.columns) as IFilteringExpressionsTree;
         }
+        if (this._columns && this._advancedFilteringExpressionsTree) {
+            this._advancedFilteringExpressionsTree = recreateTreeFromFields(this._advancedFilteringExpressionsTree, this.columns) as IFilteringExpressionsTree;
+        }
         this.resetCaches();
     }
 
@@ -6668,12 +6675,12 @@ export abstract class IgxGridBaseDirective implements GridType,
             this.autogenerateColumns();
         } else {
             this._columns = this.getColumnList();
-            if (this._columns && this._filteringExpressionsTree) {
-                this._filteringExpressionsTree = recreateTreeFromFields(this._filteringExpressionsTree, this._columns) as IFilteringExpressionsTree;
-            }
-            if (this._columns && this._advancedFilteringExpressionsTree) {
-                this._advancedFilteringExpressionsTree = recreateTreeFromFields(this._advancedFilteringExpressionsTree, this._columns) as IFilteringExpressionsTree;
-            }
+        }
+        if (this._columns && this._filteringExpressionsTree) {
+            this._filteringExpressionsTree = recreateTreeFromFields(this._filteringExpressionsTree, this._columns) as IFilteringExpressionsTree;
+        }
+        if (this._columns && this._advancedFilteringExpressionsTree) {
+            this._advancedFilteringExpressionsTree = recreateTreeFromFields(this._advancedFilteringExpressionsTree, this._columns) as IFilteringExpressionsTree;
         }
 
         this.initColumns(this._columns, (col: IgxColumnComponent) => this.columnInit.emit(col));

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

@@ -42,7 +42,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             ]
         });
     }));
-    
+
     describe('General tests - ', () => {
         let fix: ComponentFixture<IgxGridAdvancedFilteringComponent>;
         let grid: IgxGridComponent;
@@ -1226,11 +1226,11 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             tick(100);
             fix.detectChanges();
 
-            
+
             // Populate edit inputs.
             QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
             QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
-            
+
             let input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
             UIInteractions.clickAndSendInputElementValue(input, 'angular', fix); // Type filter value.
             // Commit the populated expression.
@@ -1279,7 +1279,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             grid = fix.componentInstance.grid;
             fix.detectChanges();
         }));
-        
+
         it('Should allow hosting Advanced Filtering dialog outside of the grid.', fakeAsync(() => {
             // Add a root 'and' group.
             QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
@@ -1394,14 +1394,14 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
     });
 
     describe('Expression tree serialization - ', () => {
-        fit('should correctly filter with a deserialized expression tree.', fakeAsync(() => {
-            const errorSpy = spyOn(console, 'error'); 
+        it('should correctly filter with a deserialized expression tree.', fakeAsync(() => {
+            const errorSpy = spyOn(console, 'error');
             let fix = TestBed.createComponent(IgxGridAdvancedFilteringSerializedTreeComponent);
-            fix.detectChanges();       
+            fix.detectChanges();
             let grid = fix.componentInstance.grid;
-            
+
             expect(errorSpy).not.toHaveBeenCalled();
-            
+
             // Verify filtered data
             expect(grid.filteredData.length).toEqual(3);
             expect(grid.rowList.length).toBe(3);