Skip to content

Commit b4a0296

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge pull request #6360 from IgniteUI/dmdimitrov/issue6289-8.2.x
Fixed filtering and advanced filtering expression tree bindings
2 parents 65ab86f + 7a8f4e3 commit b4a0296

File tree

11 files changed

+186
-24
lines changed

11 files changed

+186
-24
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
@@ -505,8 +505,7 @@ export class IgxFilteringService implements OnDestroy {
505505
}
506506
}
507507

508-
public isFilteringExpressionsTreeEmpty(): boolean {
509-
const expressionTree = this.grid.filteringExpressionsTree;
508+
public isFilteringExpressionsTreeEmpty(expressionTree: IFilteringExpressionsTree): boolean {
510509
if (FilteringExpressionsTree.empty(expressionTree)) {
511510
return true;
512511
}

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

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -387,14 +387,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
387387
}
388388
}
389389

390-
// clone the filtering expression tree in order to trigger the filtering pipe
391-
const filteringExpressionTreeClone = new FilteringExpressionsTree(value.operator, value.fieldName);
392-
filteringExpressionTreeClone.type = FilteringExpressionsTreeType.Regular;
393-
filteringExpressionTreeClone.filteringOperands = value.filteringOperands;
394-
this._filteringExpressionsTree = filteringExpressionTreeClone;
390+
value.type = FilteringExpressionsTreeType.Regular;
391+
this._filteringExpressionsTree = value;
392+
this._filteringPipeTrigger++;
395393
this.filteringExpressionsTreeChange.emit(this._filteringExpressionsTree);
396394

397-
if (this.filteringService.isFilteringExpressionsTreeEmpty() && !this.advancedFilteringExpressionsTree) {
395+
if (this.filteringService.isFilteringExpressionsTreeEmpty(this._filteringExpressionsTree) &&
396+
!this.advancedFilteringExpressionsTree) {
398397
this.filteredData = null;
399398
}
400399

@@ -411,6 +410,23 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
411410
@Output()
412411
public filteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
413412

413+
/**
414+
* Emitted after advanced filtering is performed.
415+
* Returns the advanced filtering expressions tree.
416+
* ```typescript
417+
* advancedFilteringExprTreeChange(event: IFilteringExpressionsTree){
418+
* const filteringTree = event;
419+
* }
420+
* ```
421+
* ```html
422+
* <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
423+
* (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>
424+
* ```
425+
* @memberof IgxGridBaseComponent
426+
*/
427+
@Output()
428+
public advancedFilteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
429+
414430
/**
415431
* Returns the advanced filtering state of `IgxGridComponent`.
416432
* ```typescript
@@ -446,22 +462,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
446462
*/
447463
set advancedFilteringExpressionsTree(value) {
448464
if (value && value instanceof FilteringExpressionsTree) {
449-
// clone the filtering expression tree in order to trigger the filtering pipe
450-
const filteringExpressionTreeClone = new FilteringExpressionsTree(value.operator, value.fieldName);
451-
filteringExpressionTreeClone.type = FilteringExpressionsTreeType.Advanced;
452-
filteringExpressionTreeClone.filteringOperands = value.filteringOperands;
453-
this._advancedFilteringExpressionsTree = filteringExpressionTreeClone;
465+
value.type = FilteringExpressionsTreeType.Advanced;
466+
this._advancedFilteringExpressionsTree = value;
467+
this._filteringPipeTrigger++;
454468
} else {
455469
this._advancedFilteringExpressionsTree = null;
456470
}
471+
this.advancedFilteringExpressionsTreeChange.emit(this._advancedFilteringExpressionsTree);
457472

458-
if (this.filteringService.isFilteringExpressionsTreeEmpty() && !this.advancedFilteringExpressionsTree) {
473+
if (this.filteringService.isFilteringExpressionsTreeEmpty(this._advancedFilteringExpressionsTree) &&
474+
!this.advancedFilteringExpressionsTree) {
459475
this.filteredData = null;
460476
}
461477

462478
this.selectionService.clearHeaderCBState();
463479
this.summaryService.clearSummaryCache();
464-
this.markForCheck();
480+
this.notifyChanges();
465481

466482
// Wait for the change detection to update filtered data through the pipes and then emit the event.
467483
requestAnimationFrame(() => this.onFilteringDone.emit(this._advancedFilteringExpressionsTree));
@@ -2215,6 +2231,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
22152231
return this._pipeTrigger;
22162232
}
22172233

2234+
/**
2235+
* @hidden
2236+
*/
2237+
get filteringPipeTrigger(): number {
2238+
return this._filteringPipeTrigger;
2239+
}
2240+
22182241
/**
22192242
* @hidden
22202243
*/
@@ -2765,6 +2788,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
27652788
* @hidden
27662789
*/
27672790
protected _pipeTrigger = 0;
2791+
/**
2792+
* @hidden
2793+
*/
2794+
protected _filteringPipeTrigger = 0;
27682795
/**
27692796
* @hidden
27702797
*/

‎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
@@ -14,7 +14,8 @@ import { FilteringExpressionsTree } from '../../data-operations/filtering-expres
1414
import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
1515
import {
1616
IgxGridAdvancedFilteringColumnGroupComponent,
17-
IgxGridAdvancedFilteringComponent
17+
IgxGridAdvancedFilteringComponent,
18+
IgxGridAdvancedFilteringBindingComponent
1819
} from '../../test-utils/grid-samples.spec';
1920

2021
const ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS = 'igx-filter-tree__line--and';
@@ -28,7 +29,8 @@ describe('IgxGrid - Advanced Filtering', () => {
2829
TestBed.configureTestingModule({
2930
declarations: [
3031
IgxGridAdvancedFilteringColumnGroupComponent,
31-
IgxGridAdvancedFilteringComponent
32+
IgxGridAdvancedFilteringComponent,
33+
IgxGridAdvancedFilteringBindingComponent
3234
],
3335
imports: [
3436
NoopAnimationsModule,
@@ -353,6 +355,7 @@ describe('IgxGrid - Advanced Filtering', () => {
353355

354356
// Apply the filters.
355357
GridFunctions.clickAdvancedFilteringApplyButton(fix);
358+
fix.detectChanges();
356359

357360
// Verify that the advanced filtering button indicates there are filters.
358361
advFilterBtn = GridFunctions.getAdvancedFilteringButton(fix);
@@ -2739,8 +2742,36 @@ describe('IgxGrid - Advanced Filtering', () => {
27392742
expect(expectedValues).toEqual(dropdownValues);
27402743
}));
27412744
});
2742-
});
27432745

2746+
describe('IgxGrid - Advanced filtering expression tree bindings #grid', () => {
2747+
let fix, grid: IgxGridComponent;
2748+
beforeEach(fakeAsync(() => {
2749+
fix = TestBed.createComponent(IgxGridAdvancedFilteringBindingComponent);
2750+
fix.detectChanges();
2751+
grid = fix.componentInstance.grid;
2752+
}));
2753+
2754+
it('should correctly filter with \'advancedFilteringExpressionsTree\' binding', fakeAsync(() => {
2755+
// Verify initially filtered in Advanced Filtering - 'Downloads > 200'
2756+
expect(grid.filteredData.length).toEqual(3);
2757+
expect(grid.rowList.length).toBe(3);
2758+
2759+
// Verify filtering expressions tree binding state
2760+
expect(grid.advancedFilteringExpressionsTree).toBe(fix.componentInstance.filterTree);
2761+
2762+
// Clear filter
2763+
grid.advancedFilteringExpressionsTree = null;
2764+
fix.detectChanges();
2765+
2766+
// Verify filtering expressions tree binding state
2767+
expect(grid.advancedFilteringExpressionsTree).toBe(fix.componentInstance.filterTree);
2768+
2769+
// Verify no filtered data
2770+
expect(grid.filteredData).toBe(null);
2771+
expect(grid.rowList.length).toBe(8);
2772+
}));
2773+
});
2774+
});
27442775

27452776
function selectColumnInEditModeExpression(fix, dropdownItemIndex: number) {
27462777
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: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
@@ -132,7 +132,7 @@ export class IgxGridFilteringPipe implements PipeTransform {
132132

133133
public transform(collection: any[], expressionsTree: IFilteringExpressionsTree,
134134
filterStrategy: IFilteringStrategy,
135-
advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number) {
135+
advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number, filteringPipeTrigger: number) {
136136
const grid = this.gridAPI.grid;
137137
const state = {
138138
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: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: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
@@ -63,7 +63,8 @@ export class IgxTreeGridFilteringPipe implements PipeTransform {
6363

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

0 commit comments

Comments
 (0)