Skip to content

Commit 90639ca

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge pull request #6436 from IgniteUI/dmdimitrov/issue6289-master
Fixed filtering and advanced filtering expression tree bindings
2 parents a92608b + fbb76c3 commit 90639ca

File tree

11 files changed

+168
-25
lines changed

11 files changed

+168
-25
lines changed

‎projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -507,8 +507,7 @@ export class IgxFilteringService implements OnDestroy {
507507
}
508508
}
509509

510-
public isFilteringExpressionsTreeEmpty(): boolean {
511-
const expressionTree = this.grid.filteringExpressionsTree;
510+
public isFilteringExpressionsTreeEmpty(expressionTree: IFilteringExpressionsTree): boolean {
512511
if (FilteringExpressionsTree.empty(expressionTree)) {
513512
return true;
514513
}

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

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -312,14 +312,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
312312
}
313313
}
314314

315-
// clone the filtering expression tree in order to trigger the filtering pipe
316-
const filteringExpressionTreeClone = new FilteringExpressionsTree(value.operator, value.fieldName);
317-
filteringExpressionTreeClone.type = FilteringExpressionsTreeType.Regular;
318-
filteringExpressionTreeClone.filteringOperands = value.filteringOperands;
319-
this._filteringExpressionsTree = filteringExpressionTreeClone;
315+
value.type = FilteringExpressionsTreeType.Regular;
316+
this._filteringExpressionsTree = value;
317+
this._filteringPipeTrigger++;
320318
this.filteringExpressionsTreeChange.emit(this._filteringExpressionsTree);
321319

322-
if (this.filteringService.isFilteringExpressionsTreeEmpty() && !this.advancedFilteringExpressionsTree) {
320+
if (this.filteringService.isFilteringExpressionsTreeEmpty(this._filteringExpressionsTree) &&
321+
!this.advancedFilteringExpressionsTree) {
323322
this.filteredData = null;
324323
}
325324

@@ -399,23 +398,22 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
399398
*/
400399
set advancedFilteringExpressionsTree(value) {
401400
if (value && value instanceof FilteringExpressionsTree) {
402-
// clone the filtering expression tree in order to trigger the filtering pipe
403-
const filteringExpressionTreeClone = new FilteringExpressionsTree(value.operator, value.fieldName);
404-
filteringExpressionTreeClone.type = FilteringExpressionsTreeType.Advanced;
405-
filteringExpressionTreeClone.filteringOperands = value.filteringOperands;
406-
this._advancedFilteringExpressionsTree = filteringExpressionTreeClone;
401+
value.type = FilteringExpressionsTreeType.Advanced;
402+
this._advancedFilteringExpressionsTree = value;
403+
this._filteringPipeTrigger++;
407404
} else {
408405
this._advancedFilteringExpressionsTree = null;
409406
}
410407
this.advancedFilteringExpressionsTreeChange.emit(this._advancedFilteringExpressionsTree);
411408

412-
if (this.filteringService.isFilteringExpressionsTreeEmpty() && !this.advancedFilteringExpressionsTree) {
409+
if (this.filteringService.isFilteringExpressionsTreeEmpty(this._advancedFilteringExpressionsTree) &&
410+
!this.advancedFilteringExpressionsTree) {
413411
this.filteredData = null;
414412
}
415413

416414
this.selectionService.clearHeaderCBState();
417415
this.summaryService.clearSummaryCache();
418-
this.markForCheck();
416+
this.notifyChanges();
419417

420418
// Wait for the change detection to update filtered data through the pipes and then emit the event.
421419
requestAnimationFrame(() => this.onFilteringDone.emit(this._advancedFilteringExpressionsTree));
@@ -2192,6 +2190,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
21922190
return this._pipeTrigger;
21932191
}
21942192

2193+
/**
2194+
* @hidden
2195+
*/
2196+
get filteringPipeTrigger(): number {
2197+
return this._filteringPipeTrigger;
2198+
}
2199+
21952200
/**
21962201
* @hidden
21972202
*/
@@ -2751,6 +2756,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
27512756
* @hidden
27522757
*/
27532758
protected _pipeTrigger = 0;
2759+
/**
2760+
* @hidden
2761+
*/
2762+
protected _filteringPipeTrigger = 0;
27542763
/**
27552764
* @hidden
27562765
*/

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

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import { FilteringLogic } from '../../data-operations/filtering-expression.inter
1515
import {
1616
IgxGridAdvancedFilteringColumnGroupComponent,
1717
IgxGridAdvancedFilteringComponent,
18-
IgxGridExternalAdvancedFilteringComponent
18+
IgxGridExternalAdvancedFilteringComponent,
19+
IgxGridAdvancedFilteringBindingComponent
1920
} from '../../test-utils/grid-samples.spec';
2021

2122
const ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS = 'igx-filter-tree__line--and';
@@ -30,7 +31,8 @@ describe('IgxGrid - Advanced Filtering', () => {
3031
declarations: [
3132
IgxGridAdvancedFilteringColumnGroupComponent,
3233
IgxGridAdvancedFilteringComponent,
33-
IgxGridExternalAdvancedFilteringComponent
34+
IgxGridExternalAdvancedFilteringComponent,
35+
IgxGridAdvancedFilteringBindingComponent
3436
],
3537
imports: [
3638
NoopAnimationsModule,
@@ -355,6 +357,7 @@ describe('IgxGrid - Advanced Filtering', () => {
355357

356358
// Apply the filters.
357359
GridFunctions.clickAdvancedFilteringApplyButton(fix);
360+
fix.detectChanges();
358361

359362
// Verify that the advanced filtering button indicates there are filters.
360363
advFilterBtn = GridFunctions.getAdvancedFilteringButton(fix);
@@ -2793,8 +2796,36 @@ describe('IgxGrid - Advanced Filtering', () => {
27932796
expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
27942797
}));
27952798
});
2796-
});
27972799

2800+
describe('IgxGrid - Advanced filtering expression tree bindings #grid', () => {
2801+
let fix, grid: IgxGridComponent;
2802+
beforeEach(fakeAsync(() => {
2803+
fix = TestBed.createComponent(IgxGridAdvancedFilteringBindingComponent);
2804+
fix.detectChanges();
2805+
grid = fix.componentInstance.grid;
2806+
}));
2807+
2808+
it('should correctly filter with \'advancedFilteringExpressionsTree\' binding', fakeAsync(() => {
2809+
// Verify initially filtered in Advanced Filtering - 'Downloads > 200'
2810+
expect(grid.filteredData.length).toEqual(3);
2811+
expect(grid.rowList.length).toBe(3);
2812+
2813+
// Verify filtering expressions tree binding state
2814+
expect(grid.advancedFilteringExpressionsTree).toBe(fix.componentInstance.filterTree);
2815+
2816+
// Clear filter
2817+
grid.advancedFilteringExpressionsTree = null;
2818+
fix.detectChanges();
2819+
2820+
// Verify filtering expressions tree binding state
2821+
expect(grid.advancedFilteringExpressionsTree).toBe(fix.componentInstance.filterTree);
2822+
2823+
// Verify no filtered data
2824+
expect(grid.filteredData).toBe(null);
2825+
expect(grid.rowList.length).toBe(8);
2826+
}));
2827+
});
2828+
});
27982829

27992830
function selectColumnInEditModeExpression(fix, dropdownItemIndex: number) {
28002831
GridFunctions.clickAdvancedFilteringColumnSelect(fix);

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

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { IgxStringFilteringOperand,
1414
import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
1515
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
1616
import { GridFunctions, GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
17-
import { IgxGridFilteringComponent, CustomFilter } from '../../test-utils/grid-samples.spec';
17+
import { IgxGridFilteringComponent, CustomFilter, IgxGridFilteringBindingComponent } from '../../test-utils/grid-samples.spec';
1818
import { ExpressionUI } from '../filtering/grid-filtering.service';
1919

2020
describe('IgxGrid - Filtering actions #grid', () => {
@@ -663,6 +663,48 @@ describe('IgxGrid - Filtering actions #grid', () => {
663663
}));
664664
});
665665

666+
describe('IgxGrid - Filtering expression tree bindings #grid', () => {
667+
configureTestSuite();
668+
beforeEach(async(() => {
669+
TestBed.configureTestingModule({
670+
declarations: [
671+
IgxGridFilteringBindingComponent
672+
],
673+
imports: [
674+
BrowserAnimationsModule,
675+
IgxGridModule]
676+
})
677+
.compileComponents();
678+
}));
679+
680+
let fix, grid: IgxGridComponent;
681+
beforeEach(fakeAsync(() => {
682+
fix = TestBed.createComponent(IgxGridFilteringBindingComponent);
683+
fix.detectChanges();
684+
grid = fix.componentInstance.grid;
685+
}));
686+
687+
it('should correctly filter with \'filteringExpressionsTree\' binding', fakeAsync(() => {
688+
// Verify initially filtered 'Downloads > 200'
689+
expect(grid.rowList.length).toEqual(3);
690+
expect(grid.filteringExpressionsTree.filteringOperands.length).toEqual(1);
691+
692+
// Verify filtering expressions tree binding state
693+
expect(grid.filteringExpressionsTree).toBe(fix.componentInstance.filterTree);
694+
695+
// Clear filter
696+
grid.clearFilter('Downloads');
697+
fix.detectChanges();
698+
699+
// Verify filtering expressions tree binding state
700+
expect(grid.filteringExpressionsTree).toBe(fix.componentInstance.filterTree);
701+
702+
// Verify no filtered data
703+
expect(grid.rowList.length).toEqual(8);
704+
expect(grid.filteringExpressionsTree.filteringOperands.length).toEqual(0);
705+
}));
706+
});
707+
666708
const expectedResults = [];
667709

668710
// Fill expected results for 'date' filtering conditions based on the current date

‎projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1689,6 +1689,8 @@ describe('IgxGrid - Row Selection #grid', () => {
16891689
ignoreCase: true
16901690
});
16911691
grid.advancedFilteringExpressionsTree = tree;
1692+
fix.detectChanges();
1693+
tick();
16921694
GridSelectionFunctions.headerCheckboxClick(grid);
16931695
fix.detectChanges();
16941696
tick();

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
<ng-template igxGridFor let-rowData [igxGridForOf]="data
107107
| gridTransaction:id:pipeTrigger
108108
| visibleColumns:hasVisibleColumns
109-
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger
109+
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
110110
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
111111
| gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
112112
| gridPaging:page:perPage:id:pipeTrigger

‎projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export class IgxGridFilteringPipe implements PipeTransform {
135135

136136
public transform(collection: any[], expressionsTree: IFilteringExpressionsTree,
137137
filterStrategy: IFilteringStrategy,
138-
advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number) {
138+
advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number, filteringPipeTrigger: number) {
139139
const grid = this.gridAPI.grid;
140140
const state = {
141141
expressionsTree: expressionsTree,

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
<ng-template igxGridFor let-rowData [igxGridForOf]="data
8484
| gridTransaction:id:pipeTrigger
8585
| visibleColumns:hasVisibleColumns
86-
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger
86+
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
8787
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
8888
| gridHierarchicalPaging:page:perPage:id:pipeTrigger
8989
| gridHierarchical:hierarchicalState:id:primaryKey:childLayoutKeys:pipeTrigger" let-rowIndex="index"

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
| treeGridTransaction:id:pipeTrigger
7575
| visibleColumns:hasVisibleColumns
7676
| treeGridHierarchizing:primaryKey:foreignKey:childDataKey:id:pipeTrigger
77-
| treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger
77+
| treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
7878
| treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger
7979
| treeGridFlattening:id:expansionDepth:expansionStates:pipeTrigger
8080
| treeGridPaging:page:perPage:id:pipeTrigger

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ export class IgxTreeGridFilteringPipe implements PipeTransform {
6464

6565
public transform(hierarchyData: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
6666
filterStrategy: IFilteringStrategy,
67-
advancedFilteringExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number): ITreeGridRecord[] {
67+
advancedFilteringExpressionsTree: IFilteringExpressionsTree, id: string,
68+
pipeTrigger: number, filteringPipeTrigger: number): ITreeGridRecord[] {
6869
const grid: IgxTreeGridComponent = this.gridAPI.grid;
6970
const state: IFilteringState = {
7071
expressionsTree: expressionsTree,

0 commit comments

Comments
 (0)