Merge pull request #6086 from IgniteUI/tzhelev/noop-strategies

Expose NoopFilterStrategy and NoopSortStrategy for the grids

Author: DiyanDimitrov

CHANGELOG.md

@@ -17,6 +17,13 @@ All notable changes for each version of this project will be documented in this
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
 
 ### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`:
+    - `sortStrategy` input is added, which can be used to set a global sorting strategy for the entire grid.
+        (**NOTE**: The grid's `sortStrategy` is of different type compared to the column's `sortStrategy`.)
+    - `NoopSortingStrategy` is added, which can be used to disable the default sorting of the grid by assigning its instance to the grid's `sortStrategy` input. (Useful for remote sorting.)
+    - `NoopFilteringStrategy` is added, which can be used to disable the default filtering of the grid by assigning its instance to the grid's `filterStrategy` input. (Useful for remote filtering.)
+    - `sortingExpressionsChange` event emitter is added, which is fired whenever a change to the sorting expressions has occurred (prior to performing the actual sorting).
+    - `filteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the filtering expressions has occurred (prior to performing the actual filtering).
 - `IgxOverlayService`:
     - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
 - `IgxToggleDirective`:

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -1,6 +1,6 @@
 import { IFilteringState } from './filtering-state.interface';
 
-import { IgxSorting, IgxDataRecordSorting } from './sorting-strategy';
+import { IgxSorting, IgxDataRecordSorting, IGridSortingStrategy } from './sorting-strategy';
 import { IgxGrouping } from './grouping-strategy';
 import { IGroupByResult } from './grouping-result.interface';
 
@@ -30,24 +30,25 @@ export enum DataType {
  * @hidden
  */
 export class DataUtil {
-    public static sort<T>(data: T[], expressions: ISortingExpression[], sorting: IgxSorting = new IgxSorting()): T[] {
+    public static sort<T>(data: T[], expressions: ISortingExpression[], sorting: IGridSortingStrategy = new IgxSorting()): T[] {
         return sorting.sort(data, expressions);
     }
 
     public static treeGridSort(hierarchicalData: ITreeGridRecord[],
         expressions: ISortingExpression[],
+        sorting: IGridSortingStrategy = new IgxDataRecordSorting(),
         parent?: ITreeGridRecord): ITreeGridRecord[] {
         let res: ITreeGridRecord[] = [];
         hierarchicalData.forEach((hr: ITreeGridRecord) => {
             const rec: ITreeGridRecord = DataUtil.cloneTreeGridRecord(hr);
             rec.parent = parent;
             if (rec.children) {
-                rec.children = DataUtil.treeGridSort(rec.children, expressions, rec);
+                rec.children = DataUtil.treeGridSort(rec.children, expressions, sorting, rec);
             }
             res.push(rec);
         });
 
-        res = DataUtil.sort(res, expressions, new IgxDataRecordSorting());
+        res = DataUtil.sort(res, expressions, sorting);
 
         return res;
     }

projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts

@@ -5,6 +5,20 @@ export interface IFilteringStrategy {
     filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree): any[];
 }
 
+export class NoopFilteringStrategy implements IFilteringStrategy {
+    private static _instance: NoopFilteringStrategy = null;
+
+    private constructor() {  }
+
+    public static instance() {
+        return this._instance || (this._instance = new NoopFilteringStrategy());
+    }
+
+    public filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree): any[] {
+        return data;
+    }
+}
+
 export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
     public abstract filter(data: any[], expressionsTree: IFilteringExpressionsTree,
         advancedExpressionsTree?: IFilteringExpressionsTree): any[];

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts

@@ -71,7 +71,25 @@ export class DefaultSortingStrategy implements ISortingStrategy {
     }
 }
 
-export class IgxSorting {
+export interface IGridSortingStrategy {
+    sort(data: any[], expressions: ISortingExpression[]): any[];
+}
+
+export class NoopSortingStrategy implements IGridSortingStrategy {
+    private static _instance: NoopSortingStrategy = null;
+
+    private constructor() {  }
+
+    public static instance() {
+        return this._instance || (this._instance = new NoopSortingStrategy());
+    }
+
+    public sort(data: any[], expressions: ISortingExpression[]): any[] {
+        return data;
+    }
+}
+
+export class IgxSorting implements IGridSortingStrategy {
     public sort(data: any[], expressions: ISortingExpression[]): any[] {
         return this.sortDataRecursive(data, expressions);
     }

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

@@ -131,6 +131,7 @@ import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/r
 import { IgxGridToolbarCustomContentDirective } from './toolbar/toolbar.directive';
 import { IgxColumnComponent } from './columns/column.component';
 import { IgxColumnGroupComponent } from './columns/column-group.component';
+import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -168,6 +169,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     public _destroyed = false;
     private overlayIDs = [];
     private _filteringStrategy: IFilteringStrategy;
+    private _sortingStrategy: IGridSortingStrategy;
 
     private _hostWidth;
     private _advancedFilteringOverlayId: string;
@@ -327,7 +329,18 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     *@hidden
+     * Emitted before filtering is performed.
+     * Returns the filtering expressions tree of the column for which filtering was performed.
+     * ```typescript
+     * filteringExprTreeChange(event: IFilteringExpressionsTree){
+     *     const filteringTree = event;
+     * }
+     * ```
+     * ```html
+     * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
+     *              (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>
+     * ```
+     * @memberof IgxGridBaseDirective
      */
     @Output()
     public filteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
@@ -1078,6 +1091,27 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this._filteringStrategy = classRef;
     }
 
+    /**
+     * Gets the sorting strategy of the grid.
+     * ```typescript
+     *  let sortStrategy = this.grid.sortStrategy
+     * ```
+     */
+    @Input()
+    get sortStrategy(): IGridSortingStrategy {
+        return this._sortingStrategy;
+    }
+
+    /**
+     * Sets the sorting strategy of the grid.
+     * ```html
+     *  <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>
+     * ```
+     */
+    set sortStrategy(value: IGridSortingStrategy) {
+        this._sortingStrategy = value;
+    }
+
     /**
      * 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.
@@ -2155,7 +2189,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     *@hidden
+     * Emitted before sorting is performed. Returns the sorting expressions.
+     * ```html
+     * <igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
+     * ```
+     * ```typescript
+     * sortingExprChange(event: ISortingExpression[]){
+     *     const sortingExpressions = event;
+     * }
+     * ```
+     * @memberof IgxGridBaseDirective
      */
     @Output()
     public sortingExpressionsChange = new EventEmitter<ISortingExpression[]>();

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

@@ -45,6 +45,7 @@ import {
 } from '../../test-utils/grid-samples.spec';
 import { HelperUtils } from '../../test-utils/helper-utils.spec';
 import { GridSelectionMode, FilterMode } from '../common/enums';
+import { NoopFilteringStrategy } from '../../data-operations/filtering-strategy';
 
 const FILTER_UI_ROW = 'igx-grid-filtering-row';
 const FILTER_UI_CELL = 'igx-grid-filtering-cell';
@@ -3422,6 +3423,26 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(chip.componentInstance.selected).toBeTruthy();
     }));
 
+    it('Should disable filtering feature when using NoopFilteringStrategy.', (async () => {
+        // Use the NoopFilteringStrategy.
+        grid.filterStrategy = NoopFilteringStrategy.instance();
+        fix.detectChanges();
+
+        GridFunctions.clickFilterCellChip(fix, 'ProductName');
+        fix.detectChanges();
+
+        // Add first chip.
+        GridFunctions.typeValueInFilterRowInput('some value', fix);
+        await wait(16);
+        GridFunctions.submitFilterRowInput(fix);
+        await wait(100);
+
+        // Verify the grid is not filtered, because of the noop filter strategy.
+        expect(grid.rowList.length).toBe(8);
+        expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
+        expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
+      }));
+
     it('Should close filterRow when changing filterMode from \'quickFilter\' to \'excelStyleFilter\'', (async () => {
         GridFunctions.clickFilterCellChip(fix, 'ProductName');
         fix.detectChanges();

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

@@ -107,7 +107,7 @@
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger
-        | gridSort:sortingExpressions:id:pipeTrigger
+        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
         | gridPaging:page:perPage:id:pipeTrigger
         | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger"

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

@@ -12,6 +12,7 @@ import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { GridType } from '../common/grid.interface';
 import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
+import { IGridSortingStrategy } from '../../data-operations/sorting-strategy';
 
 /**
  *@hidden
@@ -27,14 +28,15 @@ export class IgxGridSortingPipe implements PipeTransform {
         this.gridAPI = <IgxGridAPIService>gridAPI;
     }
 
-    public transform(collection: any[], expressions: ISortingExpression[], id: string, pipeTrigger: number): any[] {
+    public transform(collection: any[], expressions: ISortingExpression[], sorting: IGridSortingStrategy,
+                     id: string, pipeTrigger: number): any[] {
         const grid = this.gridAPI.grid;
         let result: any[];
 
         if (!expressions.length) {
             result = collection;
         } else {
-            result = DataUtil.sort(cloneArray(collection), expressions);
+            result = DataUtil.sort(cloneArray(collection), expressions, sorting);
         }
         grid.filteredSortedData = result;
 

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

@@ -7,12 +7,13 @@ import { IgxGridModule } from './index';
 import { GridTemplateStrings, ColumnDefinitions } from '../../test-utils/template-strings.spec';
 import { BasicGridComponent } from '../../test-utils/grid-base-components.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { DefaultSortingStrategy, ISortingStrategy } from '../../data-operations/sorting-strategy';
+import { DefaultSortingStrategy, ISortingStrategy, NoopSortingStrategy } from '../../data-operations/sorting-strategy';
 import { IgxGridCellComponent } from '../cell.component';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxGridFilteringRowComponent } from '../filtering/base/grid-filtering-row.component';
 import { IgxChipComponent } from '../../chips/chip.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { GridFunctions } from '../../test-utils/grid-functions.spec';
 
 const SORTING_ICON_ASC_CONTENT = 'arrow_upward';
 const SORTING_ICON_DESC_CONTENT = 'arrow_downward';
@@ -353,6 +354,31 @@ describe('IgxGrid - Grid Sorting #grid', () => {
         expect(grid.headerGroups.toArray()[1].isFiltered).toBeTruthy();
     }));
 
+    it('Should disable sorting feature when using NoopSortingStrategy.', () => {
+        grid.sortStrategy = NoopSortingStrategy.instance();
+        fixture.detectChanges();
+
+        const gridData = fixture.componentInstance.data;
+        const firstHeaderCell = GridFunctions.getColumnHeader('ID', fixture);
+
+        clickCurrentRow(firstHeaderCell);
+        fixture.detectChanges();
+
+        // Verify that the grid is NOT sorted.
+        expect(getValueFromCellElement(getCurrentCellFromGrid(grid, 0, 1))).toEqual('Jane');
+        expect(getValueFromCellElement(getCurrentCellFromGrid(grid, grid.data.length - 1, 1))).toEqual('Connor');
+        grid.rowList.map((item, index) =>
+            expect(grid.getCellByColumn(index, 'ID').value).toEqual(gridData[index].ID));
+
+        clickCurrentRow(firstHeaderCell);
+        fixture.detectChanges();
+
+        // Verify that the grid is NOT sorted.
+        expect(getValueFromCellElement(getCurrentCellFromGrid(grid, 0, 1))).toEqual('Jane');
+        expect(getValueFromCellElement(getCurrentCellFromGrid(grid, grid.data.length - 1, 1))).toEqual('Connor');
+        grid.rowList.map((item, index) =>
+            expect(grid.getCellByColumn(index, 'ID').value).toEqual(gridData[index].ID));
+    });
 
     it(`Should allow sorting using a custom Sorting Strategy.`, () => {
         fixture = TestBed.createComponent(SortByParityComponent);

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

@@ -84,7 +84,7 @@
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger
-        | gridSort:sortingExpressions:id:pipeTrigger
+        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridHierarchicalPaging:page:perPage:id:pipeTrigger
         | gridHierarchical:hierarchicalState:id:primaryKey:childLayoutKeys:pipeTrigger" let-rowIndex="index"
             [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'