feat(filtering-strategy): exposing filtering strategy on a grid level

Closes #5323
IgniteUI · Sep 5, 2019 · f7e9b79 · f7e9b79
1 parent d565fbe
commit f7e9b79
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 6 deletions.
diff --git a/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts
@@ -54,6 +54,14 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
 }
 
 export class FilteringStrategy extends BaseFilteringStrategy {
+    private static _instace: FilteringStrategy = null;
+
+    public constructor() { super(); }
+
+    public static instance() {
+        return this._instace || (this._instace = new this());
+    }
+
     public filter<T>(data: T[], expressionsTree: IFilteringExpressionsTree): T[] {
         let i;
         let rec;

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -91,6 +91,7 @@ import { IgxDragDirective } from '../directives/drag-drop/drag-drop.directive';
 import { CharSeparatedValueData } from '../services/csv/char-separated-value-data';
 import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './igx-row-selectors.module';
 import { DeprecateProperty } from '../core/deprecateDecorators';
+import { FilteringStrategy, IFilteringStrategy } from '../data-operations/filtering-strategy';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -259,6 +260,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private _locale = null;
     public _destroyed = false;
     private overlayIDs = [];
+    private _filteringStrategy: IFilteringStrategy;
 
     private _hostWidth;
     /**
@@ -983,6 +985,27 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Gets the filtering strategy of the grid.
+     * ```typescript
+     *  let filterStrategy = this.grid.filterStrategy
+     * ```
+     */
+    @Input()
+    get filterStrategy(): IFilteringStrategy {
+        return this._filteringStrategy;
+    }
+
+    /**
+     * Sets the filtering strategy of the grid.
+     * ```html
+     *  <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>
+     * ```
+     */
+    set filterStrategy(classRef: IFilteringStrategy) {
+        this._filteringStrategy = classRef;
+    }
+
     /**
      * An @Input property that provides a callback for loading unique column values on demand.
      * If this property is provided, the unique values it generates will be used by the Excel Style Filtering.

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -112,7 +112,7 @@
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | gridFiltering:filteringExpressionsTree:id:pipeTrigger
+        | gridFiltering:filteringExpressionsTree:filterStrategy:id:pipeTrigger
         | gridSort:sortingExpressions:id:pipeTrigger
         | gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
         | gridPaging:page:perPage:id:pipeTrigger

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
@@ -10,6 +10,7 @@ import { IgxGridComponent } from './grid.component';
 import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseComponent, IGridDataBindable } from '../grid-base.component';
+import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
 
 /**
  *@hidden
@@ -130,9 +131,13 @@ export class IgxGridFilteringPipe implements PipeTransform {
     constructor(private gridAPI: GridBaseAPIService<IgxGridBaseComponent & IGridDataBindable>) { }
 
     public transform(collection: any[], expressionsTree: IFilteringExpressionsTree,
+        filterStrategy: IFilteringStrategy,
         id: string, pipeTrigger: number) {
         const grid = this.gridAPI.grid;
-        const state = { expressionsTree: expressionsTree };
+        const state = {
+            expressionsTree: expressionsTree,
+            strategy: filterStrategy
+        };
 
         if (!state.expressionsTree ||
             !state.expressionsTree.filteringOperands ||

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -80,7 +80,7 @@
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | gridFiltering:filteringExpressionsTree:id:pipeTrigger
+        | gridFiltering:filteringExpressionsTree:filterStrategy:id:pipeTrigger
         | gridSort:sortingExpressions:id:pipeTrigger
         | gridHierarchicalPaging:page:perPage:id:pipeTrigger
         | gridHierarchical:hierarchicalState:id:primaryKey:childLayoutKeys:pipeTrigger" let-rowIndex="index"

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -70,7 +70,7 @@
         | treeGridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:id:pipeTrigger
-        | treeGridFiltering:filteringExpressionsTree:id:pipeTrigger
+        | treeGridFiltering:filteringExpressionsTree:filterStrategy:id:pipeTrigger
         | treeGridSorting:sortingExpressions:id:pipeTrigger
         | treeGridFlattening:id:expansionDepth:expansionStates:pipeTrigger
         | treeGridPaging:page:perPage:id:pipeTrigger

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts
@@ -3,7 +3,7 @@ import { DataUtil } from '../../data-operations/data-util';
 import { GridBaseAPIService } from '../api.service';
 import { IgxTreeGridComponent } from './tree-grid.component';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
-import { BaseFilteringStrategy } from '../../data-operations/filtering-strategy';
+import { BaseFilteringStrategy, IFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { IFilteringState } from '../../data-operations/filtering-state.interface';
 import { ITreeGridRecord } from './tree-grid.interfaces';
 import { IgxTreeGridAPIService } from './tree-grid-api.service';
@@ -60,13 +60,18 @@ export class IgxTreeGridFilteringPipe implements PipeTransform {
      }
 
     public transform(hierarchyData: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
+        filterStrategy: IFilteringStrategy,
         id: string, pipeTrigger: number): ITreeGridRecord[] {
         const grid: IgxTreeGridComponent = this.gridAPI.grid;
-        const state = {
+        const state: IFilteringState = {
             expressionsTree: expressionsTree,
             strategy: new TreeGridFilteringStrategy()
         };
 
+        if (filterStrategy) {
+            state.strategy = filterStrategy;
+        }
+
         this.resetFilteredOutProperty(grid.records);
 
         if (!state.expressionsTree ||