feat(IgxGridBaseDirective): Add Single and Multiple sorting options

CHANGELOG.md

@@ -2,12 +2,17 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-## 13.2.0 
+## 13.2.0
 
 ### New palette
 
 A new fluent light and dark palettes that use the default fluent colors - `$light-fluent-palette` and `$dark-fluent-palette`.
 
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - new *sortingOption* property has been introduced on grid level; This property allows you to set either `single` or `multiple` sorting mode; When single mode is enabled you can sort one column at a time; The default value of the property is `multiple`;
+
+    - **Behavioral Change** - sorting and grouping expressions are now working separately; If grouping/sorting expressions are in a conflict, grouping expressions take precedence. You can read more about that in our official documentation.
 ## 13.1.0
 
 ### New Features
@@ -138,7 +143,7 @@ A new fluent light and dark palettes that use the default fluent colors - `$ligh
 - `IgxDialog`
     - Added `focusTrap` input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to `true`.
 - `IgxProgressBar`
-    - Exposed new animationDuration input - sets the duration of the progress animation. 
+    - Exposed new animationDuration input - sets the duration of the progress animation.
 
 ### General
 

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -8,6 +8,7 @@ import { IgxCell, IgxGridCRUDService, IgxEditRow } from './common/crud.service';
 import { CellType, ColumnType, GridServiceType, GridType, RowType } from './common/grid.interface';
 import { IGridEditEventArgs, IRowToggleEventArgs } from './common/events';
 import { IgxColumnMovingService } from './moving/moving.service';
+import { IGroupingExpression } from '../data-operations/grouping-expression.interface';
 import { ISortingExpression, SortingDirection } from '../data-operations/sorting-strategy';
 import { FilterUtil } from '../data-operations/filtering-strategy';
 
@@ -221,6 +222,15 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
         this.grid.sortingExpressions = sortingState;
     }
 
+    public sort_decoupled(expression: IGroupingExpression): void {
+        if (expression.dir === SortingDirection.None) {
+            this.remove_grouping_expression(expression.fieldName);
+        }
+        const groupingState = cloneArray((this.grid as any).groupingExpressions);
+        this.prepare_grouping_expression([groupingState], expression);
+        (this.grid as any).groupingExpressions = groupingState;
+    }
+
     public sort_multiple(expressions: ISortingExpression[]): void {
         const sortingState = cloneArray(this.grid.sortingExpressions);
 
@@ -234,6 +244,17 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
         this.grid.sortingExpressions = sortingState;
     }
 
+    public sort_groupBy_multiple(expressions: ISortingExpression[]): void {
+        const groupingState = cloneArray((this.grid as any).groupingExpressions);
+
+        for (const each of expressions) {
+            if (each.dir === SortingDirection.None) {
+                this.remove_grouping_expression(each.fieldName);
+            }
+            this.prepare_grouping_expression([groupingState], each);
+        }
+    }
+
     public clear_sort(fieldName: string) {
         const sortingState = this.grid.sortingExpressions;
         const index = sortingState.findIndex((expr) => expr.fieldName === fieldName);
@@ -460,6 +481,43 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
         });
     }
 
+    public prepare_grouping_expression(stateCollections: Array<Array<any>>, expression: IGroupingExpression) {
+        if (expression.dir === SortingDirection.None) {
+            stateCollections.forEach(state => {
+                state.splice(state.findIndex((expr) => expr.fieldName === expression.fieldName), 1);
+            });
+            return;
+        }
+
+        /**
+         * We need to make sure the states in each collection with same fields point to the same object reference.
+         * If the different state collections provided have different sizes we need to get the largest one.
+         * That way we can get the state reference from the largest one that has the same fieldName as the expression to prepare.
+         */
+        let maxCollection = stateCollections[0];
+        for (let i = 1; i < stateCollections.length; i++) {
+            if (maxCollection.length < stateCollections[i].length) {
+                maxCollection = stateCollections[i];
+            }
+        }
+        const maxExpr = maxCollection.find((expr) => expr.fieldName === expression.fieldName);
+
+        stateCollections.forEach(collection => {
+            const myExpr = collection.find((expr) => expr.fieldName === expression.fieldName);
+            if (!myExpr && !maxExpr) {
+                // Expression with this fieldName is missing from the current and the max collection.
+                collection.push(expression);
+            } else if (!myExpr && maxExpr) {
+                // Expression with this fieldName is missing from the current and but the max collection has.
+                collection.push(maxExpr);
+                Object.assign(maxExpr, expression);
+            } else {
+                // The current collection has the expression so just update it.
+                Object.assign(myExpr, expression);
+            }
+        });
+    }
+
     public remove_grouping_expression(_fieldName) {
     }
 

projects/igniteui-angular/src/lib/grids/columns/interfaces.ts

@@ -43,3 +43,7 @@ export interface IColumnPipeArgs {
      */
     display?: string;
 }
+
+export interface ISortingOptions {
+    mode: 'single' | 'multiple';
+}

projects/igniteui-angular/src/lib/grids/common/events.ts

@@ -2,6 +2,7 @@ import { IBaseEventArgs, CancelableEventArgs } from '../../core/utils';
 import { GridKeydownTargetType } from './enums';
 import { CellType, ColumnType, GridType, RowType } from './grid.interface';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
 import { IgxBaseExporter } from '../../services/exporter-common/base-export-service';
 import { IgxExporterOptionsBase } from '../../services/exporter-common/exporter-options-base';
 import { ISortingExpression } from '../../data-operations/sorting-strategy';
@@ -201,7 +202,8 @@ export interface IActiveNodeChangeEventArgs extends IBaseEventArgs {
 }
 
 export interface ISortingEventArgs extends IBaseEventArgs, CancelableEventArgs {
-    sortingExpressions: ISortingExpression | Array<ISortingExpression>;
+    sortingExpressions?: ISortingExpression | Array<ISortingExpression>;
+    groupingExpressions?: IGroupingExpression | Array<IGroupingExpression>;
 }
 
 export interface IFilteringEventArgs extends IBaseEventArgs, CancelableEventArgs {

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -27,7 +27,7 @@ import { ITreeGridRecord } from '../tree-grid/tree-grid.interfaces';
 import { State, Transaction, TransactionService } from '../../services/transaction/transaction';
 import { GridColumnDataType } from '../../data-operations/data-util';
 import { IgxFilteringOperand } from '../../data-operations/filtering-condition';
-import { IColumnPipeArgs, MRLResizeColumnInfo } from '../columns/interfaces';
+import { IColumnPipeArgs, ISortingOptions, MRLResizeColumnInfo } from '../columns/interfaces';
 import { IgxSummaryResult } from '../summaries/grid-summary';
 import { ISortingExpression, ISortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
 import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
@@ -444,6 +444,7 @@ export interface GridType extends IGridDataBindable {
     records?: Map<any, ITreeGridRecord>;
     processedExpandedFlatData?: any[] | null;
     processedRecords?: Map<any, ITreeGridRecord>;
+    treeGroupArea?: any;
 
     activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs>;
     gridKeydown: EventEmitter<IGridKeydownEventArgs>;
@@ -499,6 +500,7 @@ export interface GridType extends IGridDataBindable {
     filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>;
     advancedFilteringExpressionsTree: IFilteringExpressionsTree;
     advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>;
+    sortingOptions: ISortingOptions;
 
     batchEditing: boolean;
     groupingExpansionState?: IGroupByExpandState[];

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

@@ -138,14 +138,15 @@ import { IgxPaginatorComponent } from '../paginator/paginator.component';
 import { IgxGridHeaderRowComponent } from './headers/grid-header-row.component';
 import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component';
 import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from '../services/transaction/transaction-factory.service';
+import { ISortingOptions } from './columns/interfaces';
 import { GridSelectionRange, IgxGridTransaction } from './common/types';
 import { VerticalAlignment, HorizontalAlignment, PositionSettings, OverlaySettings } from '../services/overlay/utilities';
 import { IgxOverlayService } from '../services/overlay/overlay';
 import { ConnectedPositioningStrategy } from '../services/overlay/position/connected-positioning-strategy';
 import { ContainerPositionStrategy } from '../services/overlay/position/container-position-strategy';
 import { AbsoluteScrollStrategy } from '../services/overlay/scroll/absolute-scroll-strategy';
 import { Action, StateUpdateEvent, TransactionEventOrigin } from '../services/transaction/transaction';
-import { ISortingExpression, SortingDirection } from '../data-operations/sorting-strategy';
+import { ISortingExpression } from '../data-operations/sorting-strategy';
 import { IGridSortingStrategy } from './common/strategy';
 import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
 import { IgxGridHeaderComponent } from './headers/grid-header.component';
@@ -2110,6 +2111,33 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._sortingStrategy = value;
     }
 
+    /**
+     * Gets/Sets the sorting options - single or multiple sorting.
+     * Accepts an `ISortingOptions` object with any of the `mode` properties.
+     *
+     * @example
+     * ```typescript
+     * const _sortingOptions: ISortingOptions = {
+     *      mode: 'single'
+     * }
+     * ```html
+     * <igx-grid [sortingOptions]="sortingOptions"><igx-grid>
+     * ```
+     */
+    @Input()
+    public set sortingOptions(value: ISortingOptions) {
+        this.clearSort();
+        this._sortingOptions = Object.assign(this._sortingOptions, value);
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public get sortingOptions() {
+        return this._sortingOptions;
+    }
+
     /**
      * Gets/Sets the current selection state.
      *
@@ -2764,6 +2792,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     protected _userOutletDirective: IgxOverlayOutletDirective;
     protected _transactions: TransactionService<Transaction, State>;
     protected _batchEditing = false;
+    protected _sortingOptions: ISortingOptions = { mode: 'multiple' };
     protected _filterStrategy: IFilteringStrategy = new FilteringStrategy();
     protected _autoGeneratedCols = [];
     protected _dataView = [];
@@ -4527,14 +4556,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         if (expression instanceof Array) {
             for (const each of expression) {
-                if (each.dir === SortingDirection.None) {
-                    this.gridAPI.remove_grouping_expression(each.fieldName);
-                }
                 this.gridAPI.prepare_sorting_expression([sortingState], each);
             }
         } else {
-            if (expression.dir === SortingDirection.None) {
-                this.gridAPI.remove_grouping_expression(expression.fieldName);
+            if (this._sortingOptions.mode === 'single') {
+                this.columns.forEach((col) => {
+                 if (!(col.field === expression.fieldName)) {
+                    this.clearSort(col.field);
+                 }
+               });
             }
             this.gridAPI.prepare_sorting_expression([sortingState], expression);
         }

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

@@ -12,18 +12,16 @@ export class IgxGridAPIService extends GridBaseAPIService<GridType> implements G
 
     public groupBy(expression: IGroupingExpression): void {
         const groupingState = cloneArray(this.grid.groupingExpressions);
-        const sortingState = cloneArray(this.grid.sortingExpressions);
-        this.prepare_sorting_expression([sortingState, groupingState], expression);
+        this.prepare_grouping_expression([groupingState], expression);
         this.grid.groupingExpressions = groupingState;
         this.arrange_sorting_expressions();
     }
 
     public groupBy_multiple(expressions: IGroupingExpression[]): void {
         const groupingState = cloneArray(this.grid.groupingExpressions);
-        const sortingState = cloneArray(this.grid.sortingExpressions);
 
         for (const each of expressions) {
-            this.prepare_sorting_expression([sortingState, groupingState], each);
+            this.prepare_grouping_expression([groupingState], each);
         }
 
         this.grid.groupingExpressions = groupingState;
@@ -32,14 +30,11 @@ export class IgxGridAPIService extends GridBaseAPIService<GridType> implements G
 
     public clear_groupby(name?: string | Array<string>) {
         const groupingState = cloneArray(this.grid.groupingExpressions);
-        const sortingState = cloneArray(this.grid.sortingExpressions);
 
         if (name) {
             const names = typeof name === 'string' ? [name] : name;
             const groupedCols = groupingState.filter((state) => names.indexOf(state.fieldName) < 0);
-            const newSortingExpr = sortingState.filter((state) => names.indexOf(state.fieldName) < 0);
             this.grid.groupingExpressions = groupedCols;
-            this.grid.sortingExpressions = newSortingExpr;
             names.forEach((colName) => {
                 const grExprIndex = groupingState.findIndex((exp) => exp.fieldName === colName);
                 const grpExpandState = this.grid.groupingExpansionState;
@@ -56,13 +51,6 @@ export class IgxGridAPIService extends GridBaseAPIService<GridType> implements G
             // clear all
             this.grid.groupingExpressions = [];
             this.grid.groupingExpansionState = [];
-            for (const grExpr of groupingState) {
-                const sortExprIndex = sortingState.findIndex((exp) => exp.fieldName === grExpr.fieldName);
-                if (sortExprIndex > -1) {
-                    sortingState.splice(sortExprIndex, 1);
-                }
-            }
-            this.grid.sortingExpressions = sortingState;
         }
     }
 
@@ -134,19 +122,14 @@ export class IgxGridAPIService extends GridBaseAPIService<GridType> implements G
 
     public arrange_sorting_expressions() {
         const groupingState = this.grid.groupingExpressions;
-        this.grid.sortingExpressions.sort((a, b) => {
-            const groupExprA = groupingState.find((expr) => expr.fieldName === a.fieldName);
-            const groupExprB = groupingState.find((expr) => expr.fieldName === b.fieldName);
-            if (groupExprA && groupExprB) {
-                return groupingState.indexOf(groupExprA) > groupingState.indexOf(groupExprB) ? 1 : -1;
-            } else if (groupExprA) {
-                return -1;
-            } else if (groupExprB) {
-                return 1;
-            } else {
-                return 0;
+        const sortingState = cloneArray(this.grid.sortingExpressions);
+        for (const grExpr of groupingState) {
+            const sortExprIndex = sortingState.findIndex((exp) => exp.fieldName === grExpr.fieldName);
+            if (sortExprIndex > -1) {
+                sortingState.splice(sortExprIndex, 1);
             }
-        });
+        }
+        this.grid.sortingExpressions = sortingState;
     }
 
     public get_groupBy_record_id(gRow: IGroupByRecord): string {

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

@@ -52,7 +52,7 @@
         | gridAddRow:true:pipeTrigger
         | gridRowPinning:id:true:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
-        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
+        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
             <div #pinContainer *ngIf='pinnedData.length > 0'
                 [ngClass]="{
                     'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
@@ -70,7 +70,7 @@
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
-        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
+        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger
         | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger
         | gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger
         | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger