From a30a38a0bc96c54852497d7a4adc68c523380e61 Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Thu, 21 Oct 2021 13:30:06 +0300 Subject: [PATCH 01/28] feat(IgxGridBaseDirective): add sorting options --- .../src/lib/grids/columns/interfaces.ts | 5 +++ .../src/lib/grids/common/enums.ts | 5 +++ .../src/lib/grids/grid-base.directive.ts | 36 ++++++++++++++++++- 3 files changed, 45 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts index f6a7ea4daf2..d1000828476 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts @@ -1,3 +1,4 @@ +import { SortingMode } from '../common/enums'; import { IgxColumnComponent } from './column.component'; @@ -43,3 +44,7 @@ export interface IColumnPipeArgs { */ display?: string; } + +export interface ISortingOptions { + mode: any; +} diff --git a/projects/igniteui-angular/src/lib/grids/common/enums.ts b/projects/igniteui-angular/src/lib/grids/common/enums.ts index 4b8f21ae4cd..c82228c0661 100644 --- a/projects/igniteui-angular/src/lib/grids/common/enums.ts +++ b/projects/igniteui-angular/src/lib/grids/common/enums.ts @@ -61,3 +61,8 @@ export enum GridInstanceType { Grid, TreeGrid } + +export enum SortingMode { + SINGLE = 'single', + MULTIPLE = 'multiple' +} diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 11efbf25c29..9aff8ccd9a9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -104,7 +104,8 @@ import { FilterMode, ColumnPinningPosition, RowPinningPosition, - GridPagingMode + GridPagingMode, + SortingMode } from './common/enums'; import { IGridCellEventArgs, @@ -155,6 +156,7 @@ 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'; let FAKE_ROW_ID = -1; const DEFAULT_ITEMS_PER_PAGE = 15; @@ -2106,6 +2108,27 @@ 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 + * + * ``` + */ + @Input() + public set sortingOptions(value: ISortingOptions) { + this._sortingOptions = Object.assign(this._sortingOptions, value); + } + + public get sortingOptions() { + return this._sortingOptions; + } + /** * Gets/Sets the current selection state. * @@ -2999,6 +3022,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements private _filteringStrategy: IFilteringStrategy; private _sortingStrategy: IGridSortingStrategy; private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start }; + private _sortingOptions: ISortingOptions = { mode: SortingMode }; private _hostWidth; private _advancedFilteringOverlayId: string; @@ -3486,6 +3510,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements } }); + this.sortingDone.pipe(destructor).subscribe(event => { + if(this._sortingOptions.mode === 'single') { + this.columns.forEach((col) => { + if (!(col.field === event.fieldName)) { + this.clearSort(col.field); + } + }); + } + }); + this.verticalScrollContainer.dataChanging.pipe(destructor, filter(() => !this._init)).subscribe(($event) => { const shouldRecalcSize = this.isPercentHeight && (!this.calcHeight || this.calcHeight === this.getDataBasedBodyHeight() || From 627b75295555f0afff32283098a8b9fbbaa94010 Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Thu, 21 Oct 2021 16:05:10 +0300 Subject: [PATCH 02/28] feat(IgxGridBaseDirective): remove enum and refactor code --- .../src/lib/grids/columns/interfaces.ts | 3 +-- .../src/lib/grids/common/enums.ts | 5 ----- .../src/lib/grids/grid-base.directive.ts | 21 +++++++------------ 3 files changed, 9 insertions(+), 20 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts index d1000828476..af8163bea26 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts @@ -1,4 +1,3 @@ -import { SortingMode } from '../common/enums'; import { IgxColumnComponent } from './column.component'; @@ -46,5 +45,5 @@ export interface IColumnPipeArgs { } export interface ISortingOptions { - mode: any; + mode: string; } diff --git a/projects/igniteui-angular/src/lib/grids/common/enums.ts b/projects/igniteui-angular/src/lib/grids/common/enums.ts index c82228c0661..4b8f21ae4cd 100644 --- a/projects/igniteui-angular/src/lib/grids/common/enums.ts +++ b/projects/igniteui-angular/src/lib/grids/common/enums.ts @@ -61,8 +61,3 @@ export enum GridInstanceType { Grid, TreeGrid } - -export enum SortingMode { - SINGLE = 'single', - MULTIPLE = 'multiple' -} diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 9aff8ccd9a9..86caef842c5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -104,8 +104,7 @@ import { FilterMode, ColumnPinningPosition, RowPinningPosition, - GridPagingMode, - SortingMode + GridPagingMode } from './common/enums'; import { IGridCellEventArgs, @@ -3022,7 +3021,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements private _filteringStrategy: IFilteringStrategy; private _sortingStrategy: IGridSortingStrategy; private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start }; - private _sortingOptions: ISortingOptions = { mode: SortingMode }; + private _sortingOptions: ISortingOptions = { mode: 'single' || 'multiple'} ; private _hostWidth; private _advancedFilteringOverlayId: string; @@ -3510,16 +3509,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements } }); - this.sortingDone.pipe(destructor).subscribe(event => { - if(this._sortingOptions.mode === 'single') { - this.columns.forEach((col) => { - if (!(col.field === event.fieldName)) { - this.clearSort(col.field); - } - }); - } - }); - this.verticalScrollContainer.dataChanging.pipe(destructor, filter(() => !this._init)).subscribe(($event) => { const shouldRecalcSize = this.isPercentHeight && (!this.calcHeight || this.calcHeight === this.getDataBasedBodyHeight() || @@ -4673,6 +4662,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements } else { if (expression.dir === SortingDirection.None) { this.gridAPI.remove_grouping_expression(expression.fieldName); + } else 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); } From c35b8698526d773e6f3f19fa63e24ba0452ba31d Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Thu, 21 Oct 2021 16:24:14 +0300 Subject: [PATCH 03/28] chore(IgxGridBaseDirective): fix trailing spaces and lint issues --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index db898260bf4..a5ce30a99f5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2019,6 +2019,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements /** * Gets/Sets the sorting options - single or multiple sorting. * Accepts an `ISortingOptions` object with any of the `mode` properties. + * * @example * ```typescript * const _sortingOptions: ISortingOptions = { @@ -2032,7 +2033,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements public set sortingOptions(value: ISortingOptions) { this._sortingOptions = Object.assign(this._sortingOptions, value); } - + + /** + * @hidden + * @internal + */ public get sortingOptions() { return this._sortingOptions; } From cdfc833bf30272fda27ed8d721e9e63e82878aab Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Thu, 21 Oct 2021 16:42:49 +0300 Subject: [PATCH 04/28] refactor(IgxGridBaseDirective): remove trailing spaces --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index a5ce30a99f5..1ed7e79d44e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2020,7 +2020,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Gets/Sets the sorting options - single or multiple sorting. * Accepts an `ISortingOptions` object with any of the `mode` properties. * - * @example + * @example * ```typescript * const _sortingOptions: ISortingOptions = { * mode: 'single' @@ -2033,7 +2033,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements public set sortingOptions(value: ISortingOptions) { this._sortingOptions = Object.assign(this._sortingOptions, value); } - + /** * @hidden * @internal From 02f5a1b9e629ebced8a53451b1d51a6ed2f7b33b Mon Sep 17 00:00:00 2001 From: Katrin Date: Thu, 21 Oct 2021 16:59:57 +0300 Subject: [PATCH 05/28] Update projects/igniteui-angular/src/lib/grids/columns/interfaces.ts change ISortingOptions interface Co-authored-by: Radoslav Karaivanov --- projects/igniteui-angular/src/lib/grids/columns/interfaces.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts index af8163bea26..76ecf6b2797 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/interfaces.ts @@ -45,5 +45,5 @@ export interface IColumnPipeArgs { } export interface ISortingOptions { - mode: string; + mode: 'single' | 'multiple'; } From e618bd5143c4c664c7483da015665492a10697ce Mon Sep 17 00:00:00 2001 From: Katrin Date: Fri, 22 Oct 2021 14:27:56 +0300 Subject: [PATCH 06/28] Update projects/igniteui-angular/src/lib/grids/grid-base.directive.ts Co-authored-by: Radoslav Karaivanov --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 1ed7e79d44e..a9501764da0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2839,7 +2839,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements private _filteringStrategy: IFilteringStrategy; private _sortingStrategy: IGridSortingStrategy; private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start }; - private _sortingOptions: ISortingOptions = { mode: 'single' || 'multiple'} ; + private _sortingOptions: ISortingOptions = { mode: 'multiple' } ; private _hostWidth; private _advancedFilteringOverlayId: string; From 45ed5184b8a3b86fd2b0ce63c2e56bb974a10f3b Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Thu, 11 Nov 2021 17:07:26 +0200 Subject: [PATCH 07/28] fix(sorting & groupBy): decouple sorting and groupBy features --- .../src/lib/grids/api.service.ts | 58 +++++++++++++++++++ .../src/lib/grids/common/events.ts | 4 +- .../src/lib/grids/common/grid.interface.ts | 1 + .../src/lib/grids/grid-base.directive.ts | 2 +- .../src/lib/grids/grid/grid-api.service.ts | 8 +-- .../src/lib/grids/grid/grid.component.ts | 56 +++++++++++++++++- .../grids/grouping/group-by-area.directive.ts | 17 +++++- 7 files changed, 133 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts index 452df1cbbab..b51ae46db57 100644 --- a/projects/igniteui-angular/src/lib/grids/api.service.ts +++ b/projects/igniteui-angular/src/lib/grids/api.service.ts @@ -13,6 +13,7 @@ import { GridType } from './common/grid.interface'; import { ColumnType } from './common/column.interface'; import { IGridEditEventArgs, IRowToggleEventArgs } from './common/events'; import { IgxColumnMovingService } from './moving/moving.service'; +import { IGroupingExpression } from '../data-operations/grouping-expression.interface'; /** * @hidden @@ -222,6 +223,15 @@ export class GridBaseAPIService { 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); @@ -235,6 +245,17 @@ export class GridBaseAPIService { 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 { }); } + public prepare_grouping_expression(stateCollections: Array>, 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) { } diff --git a/projects/igniteui-angular/src/lib/grids/common/events.ts b/projects/igniteui-angular/src/lib/grids/common/events.ts index 6ee430dc646..2862d7c6d06 100644 --- a/projects/igniteui-angular/src/lib/grids/common/events.ts +++ b/projects/igniteui-angular/src/lib/grids/common/events.ts @@ -10,6 +10,7 @@ import { ISortingExpression } from '../../data-operations/sorting-expression.int import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { RowType } from './row.interface'; import { CellType } from './cell.interface'; +import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; export { GridSelectionRange } from '../selection/selection.service'; export interface IGridClipboardEvent { @@ -207,7 +208,8 @@ export interface IActiveNodeChangeEventArgs extends IBaseEventArgs { } export interface ISortingEventArgs extends IBaseEventArgs, CancelableEventArgs { - sortingExpressions: ISortingExpression | Array; + sortingExpressions?: ISortingExpression | Array; + groupingExpressions?: IGroupingExpression | Array; } export interface IFilteringEventArgs extends IBaseEventArgs, CancelableEventArgs { diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index f12220cda4b..65ee8343e43 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -104,6 +104,7 @@ export interface FlatGridType extends GridType { toggleGroup(groupRow: IGroupByRecord): void; clearGrouping(field: string): void; groupBy(expression: IGroupingExpression | Array): void; + sortGrouping(expression: IGroupingExpression | Array): void; } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index a9501764da0..1f320f55f1e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2839,7 +2839,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements private _filteringStrategy: IFilteringStrategy; private _sortingStrategy: IGridSortingStrategy; private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start }; - private _sortingOptions: ISortingOptions = { mode: 'multiple' } ; + protected _sortingOptions: ISortingOptions = { mode: 'multiple' }; private _hostWidth; private _advancedFilteringOverlayId: string; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts index 33a3a1d7e52..70fc098e6de 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts @@ -12,18 +12,16 @@ export class IgxGridAPIService extends GridBaseAPIService { 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; @@ -134,7 +132,7 @@ export class IgxGridAPIService extends GridBaseAPIService { public arrange_sorting_expressions() { const groupingState = this.grid.groupingExpressions; - this.grid.sortingExpressions.sort((a, b) => { + this.grid.groupingExpressions.sort((a, b) => { const groupExprA = groupingState.find((expr) => expr.fieldName === a.fieldName); const groupExprB = groupingState.find((expr) => expr.fieldName === b.fieldName); if (groupExprA && groupExprB) { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 0e473e54b55..40c3960e9e4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -7,7 +7,7 @@ import { GridBaseAPIService } from '../api.service'; import { IgxGridBaseDirective } from '../grid-base.directive'; import { IgxGridNavigationService } from '../grid-navigation.service'; import { IgxGridAPIService } from './grid-api.service'; -import { ISortingExpression } from '../../data-operations/sorting-expression.interface'; +import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-expression.interface'; import { cloneArray, IBaseEventArgs } from '../../core/utils'; import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; import { IgxGroupByRowTemplateDirective, IgxGridDetailTemplateDirective } from './grid.directives'; @@ -33,6 +33,7 @@ import { IgxGridGroupByAreaComponent } from '../grouping/grid-group-by-area.comp import { IgxGridCell } from '../grid-public-cell'; import { CellType } from '../common/cell.interface'; import { DeprecateMethod } from '../../core/deprecateDecorators'; +import { ISortingEventArgs } from '../common/events'; let NEXT_ID = 0; @@ -376,8 +377,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, this._gridAPI.arrange_sorting_expressions(); this.notifyChanges(); } else { + //To do: remove coupling // setter called before grid is registered in grid API service - this.sortingExpressions.unshift.apply(this.sortingExpressions, this._groupingExpressions); + this.groupingExpressions.unshift.apply(this._groupingExpressions); } if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this.columnList) { const groupedCols: IgxColumnComponent[] = []; @@ -537,6 +539,40 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, }; } + public sortGrouping(expression: IGroupingExpression | Array): void { + const groupingState = cloneArray(this.groupingExpressions); + + if (expression instanceof Array) { + for (const each of expression) { + if (each.dir === SortingDirection.None) { + this.gridAPI.remove_grouping_expression(each.fieldName); + } + this.gridAPI.prepare_grouping_expression([groupingState], each); + } + } else { + if (expression.dir === SortingDirection.None) { + this.gridAPI.remove_grouping_expression(expression.fieldName); + } + + this.gridAPI.prepare_grouping_expression([groupingState], expression); + } + + const eventArgs: ISortingEventArgs = { owner: this, groupingExpressions: groupingState, cancel: false }; + this.sorting.emit(eventArgs); + + if (eventArgs.cancel) { + return; + } + + this.crudService.endEdit(false); + if (expression instanceof Array) { + this.gridAPI.sort_groupBy_multiple(expression); + } else { + this.gridAPI.sort_decoupled(expression); + } + requestAnimationFrame(() => this.sortingDone.emit(expression)); + } + /** * @hidden @internal */ @@ -955,6 +991,20 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, } }); }); + + this.groupingExpressionsChange.pipe(takeUntil(this.destroy$)).subscribe((groupingExpressions: IGroupingExpression[]) => { + if (!this.groupingExpressions || !this.groupingExpressions.length) { + return; + } + + groupingExpressions.forEach((sortExpr: IGroupingExpression) => { + const fieldName = sortExpr.fieldName; + const groupingExpr = this.groupingExpressions.find(ex => ex.fieldName === fieldName); + if (groupingExpr) { + groupingExpr.dir = sortExpr.dir; + } + }); + }); } /** @@ -1222,7 +1272,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @hidden @internal */ protected _applyGrouping() { - this._gridAPI.sort_multiple(this._groupingExpressions); + this._gridAPI.sort_groupBy_multiple(this._groupingExpressions); } private _setupNavigationService() { diff --git a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts index 3cb3f2e68c4..bbd288875fe 100644 --- a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts @@ -17,7 +17,7 @@ import { PlatformUtil } from '../../core/utils'; import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; import { SortingDirection } from '../../data-operations/sorting-expression.interface'; import { IgxColumnComponent } from '../columns/column.component'; -import { GridType } from '../common/grid.interface'; +import { FlatGridType, GridType } from '../common/grid.interface'; import { IgxColumnMovingDragDirective } from '../moving/moving.drag.directive'; /** @@ -52,7 +52,7 @@ export abstract class IgxGroupByAreaDirective { /** The parent grid containing the component. */ @Input() - public grid: GridType; + public grid: FlatGridType & GridType; /** * The group-by expressions provided by the parent grid. @@ -116,7 +116,12 @@ export abstract class IgxGroupByAreaDirective { if (!this.grid.getColumnByName(id).groupable) { return; } - this.updateSorting(id); + + if (this.grid.groupingExpressions) { + this.updateGroupSorting(id); + } else { + this.updateSorting(id); + } } public onDragDrop(event) { @@ -165,6 +170,12 @@ export abstract class IgxGroupByAreaDirective { this.grid.sort(expr); } + protected updateGroupSorting(id: string) { + const expr = this.grid.groupingExpressions.find(e => e.fieldName === id); + expr.dir = 3 - expr.dir; + this.grid.sortGrouping(expr); + } + protected expressionsChanged() { } From 3df6065fd9b8fbec7b84afa9d1524a3cc37d37e8 Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Fri, 12 Nov 2021 10:45:50 +0200 Subject: [PATCH 08/28] test(grid): fix trailing space, ng lnt --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- .../igniteui-angular/src/lib/grids/grid/grid.component.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index b5c56c22f7c..e4b9aac8638 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2804,6 +2804,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements protected _userOutletDirective: IgxOverlayOutletDirective; protected _transactions: TransactionService; protected _batchEditing = false; + protected _sortingOptions: ISortingOptions = { mode: 'multiple' }; /** @hidden @internal */ public get paginator() { @@ -2839,7 +2840,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements private _filteringStrategy: IFilteringStrategy; private _sortingStrategy: IGridSortingStrategy; private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start }; - protected _sortingOptions: ISortingOptions = { mode: 'multiple' }; private _hostWidth; private _advancedFilteringOverlayId: string; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 7f068e96538..51902542ed0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -565,7 +565,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, public sortGrouping(expression: IGroupingExpression | Array): void { const groupingState = cloneArray(this.groupingExpressions); - + if (expression instanceof Array) { for (const each of expression) { if (each.dir === SortingDirection.None) { @@ -577,7 +577,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, if (expression.dir === SortingDirection.None) { this.gridAPI.remove_grouping_expression(expression.fieldName); } - + this.gridAPI.prepare_grouping_expression([groupingState], expression); } @@ -596,7 +596,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, } requestAnimationFrame(() => this.sortingDone.emit(expression)); } - + /** * @hidden @internal */ @@ -1020,7 +1020,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, if (!this.groupingExpressions || !this.groupingExpressions.length) { return; } - + groupingExpressions.forEach((sortExpr: IGroupingExpression) => { const fieldName = sortExpr.fieldName; const groupingExpr = this.groupingExpressions.find(ex => ex.fieldName === fieldName); From 0613c244d0d85bbf62881bed353349a13d80500a Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Wed, 24 Nov 2021 17:36:01 +0200 Subject: [PATCH 09/28] ci(IgxGridComponent): fixed errors occured in merging --- .../src/lib/grids/grid/grid.component.ts | 85 +++++-------------- 1 file changed, 20 insertions(+), 65 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index ec6889fcbd1..43ee3c04b06 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1,12 +1,11 @@ import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren, QueryList, ViewChild, TemplateRef, DoCheck, AfterContentInit, HostBinding, - OnInit, AfterViewInit, ContentChildren + OnInit, AfterViewInit, ContentChildren, forwardRef } from '@angular/core'; import { IgxGridBaseDirective } from '../grid-base.directive'; import { IgxGridNavigationService } from '../grid-navigation.service'; import { IgxGridAPIService } from './grid-api.service'; -import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-expression.interface'; import { cloneArray, IBaseEventArgs } from '../../core/utils'; import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; import { IgxGroupByRowTemplateDirective, IgxGridDetailTemplateDirective } from './grid.directives'; @@ -29,7 +28,10 @@ import { IgxGridCRUDService } from '../common/crud.service'; import { IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../grid-public-row'; import { IgxGridGroupByAreaComponent } from '../grouping/grid-group-by-area.component'; import { IgxGridCell } from '../grid-public-cell'; +import { ISortingExpression } from '../../data-operations/sorting-strategy'; import { IGridGroupingStrategy } from '../common/strategy'; +import { GridBaseAPIService } from '../api.service'; + let NEXT_ID = 0; export interface IGroupingDoneEventArgs extends IBaseEventArgs { @@ -59,13 +61,14 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs { */ @Component({ changeDetection: ChangeDetectionStrategy.OnPush, + preserveWhitespaces: false, providers: [ IgxGridCRUDService, IgxGridNavigationService, IgxGridSummaryService, IgxGridSelectionService, - { provide: IGX_GRID_SERVICE_BASE, useClass: IgxGridAPIService }, - { provide: IGX_GRID_BASE, useExisting: IgxGridComponent }, + { provide: GridBaseAPIService, useClass: IgxGridAPIService }, + { provide: IgxGridBaseDirective, useExisting: forwardRef(() => IgxGridComponent) }, IgxFilteringService, IgxColumnResizingService, IgxForOfSyncService, @@ -375,9 +378,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, this._gridAPI.arrange_sorting_expressions(); this.notifyChanges(); } else { - //To do: remove coupling // setter called before grid is registered in grid API service - this.groupingExpressions.unshift.apply(this._groupingExpressions); + this.sortingExpressions.unshift.apply(this.sortingExpressions, this._groupingExpressions); } if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this.columnList) { const groupedCols: IgxColumnComponent[] = []; @@ -508,7 +510,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @param rowIndex * @param index */ - public getCellByColumnVisibleIndex(rowIndex: number, index: number): CellType { + public getCellByColumnVisibleIndex(rowIndex: number, index: number): CellType { const row = this.getRowByIndex(rowIndex); const column = this.columnList.find((col) => col.visibleIndex === index); if (row && row instanceof IgxGridRow && !row.data?.detailsData && column) { @@ -556,45 +558,11 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, }; } - public sortGrouping(expression: IGroupingExpression | Array): void { - const groupingState = cloneArray(this.groupingExpressions); - - if (expression instanceof Array) { - for (const each of expression) { - if (each.dir === SortingDirection.None) { - this.gridAPI.remove_grouping_expression(each.fieldName); - } - this.gridAPI.prepare_grouping_expression([groupingState], each); - } - } else { - if (expression.dir === SortingDirection.None) { - this.gridAPI.remove_grouping_expression(expression.fieldName); - } - - this.gridAPI.prepare_grouping_expression([groupingState], expression); - } - - const eventArgs: ISortingEventArgs = { owner: this, groupingExpressions: groupingState, cancel: false }; - this.sorting.emit(eventArgs); - - if (eventArgs.cancel) { - return; - } - - this.crudService.endEdit(false); - if (expression instanceof Array) { - this.gridAPI.sort_groupBy_multiple(expression); - } else { - this.gridAPI.sort_decoupled(expression); - } - requestAnimationFrame(() => this.sortingDone.emit(expression)); - } - /** * @hidden @internal */ public trackChanges(index, rec) { - if (rec && rec.detailsData !== undefined) { + if (rec.detailsData !== undefined) { return rec.detailsData; } return rec; @@ -633,7 +601,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @hidden @internal */ public isDetailRecord(record) { - return record && record.detailsData !== undefined; + return record.detailsData !== undefined; } /** @@ -902,7 +870,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, owner: tmlpOutlet, index: this.dataView.indexOf(rowData), templateID: { - type: 'detailRow', + type:'detailRow', id: rowID } }; @@ -911,7 +879,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, return { $implicit: rowData.detailsData, templateID: { - type: 'detailRow', + type:'detailRow', id: rowID }, index: this.dataView.indexOf(rowData) @@ -1008,20 +976,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, } }); }); - - this.groupingExpressionsChange.pipe(takeUntil(this.destroy$)).subscribe((groupingExpressions: IGroupingExpression[]) => { - if (!this.groupingExpressions || !this.groupingExpressions.length) { - return; - } - - groupingExpressions.forEach((sortExpr: IGroupingExpression) => { - const fieldName = sortExpr.fieldName; - const groupingExpr = this.groupingExpressions.find(ex => ex.fieldName === fieldName); - if (groupingExpr) { - groupingExpr.dir = sortExpr.dir; - } - }); - }); } /** @@ -1121,7 +1075,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, if (index < 0 || index > this.dataView.length) { return undefined; } - return new IgxGridRow(this as any, index, rec); + + return new IgxGridRow(this, index, rec); } /** @@ -1218,14 +1173,14 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, } if (rec && this.isGroupByRecord(rec)) { - row = new IgxGroupByRow(this as any, index, rec); + row = new IgxGroupByRow(this, index, rec); } if (rec && this.isSummaryRow(rec)) { - row = new IgxSummaryRow(this as any, index, rec.summaries, GridInstanceType.Grid); + row = new IgxSummaryRow(this, index, rec.summaries, GridInstanceType.Grid); } // if found record is a no a groupby or summary row, return IgxGridRow instance if (!row && rec) { - row = new IgxGridRow(this as any, index, rec); + row = new IgxGridRow(this, index, rec); } return row; @@ -1288,13 +1243,13 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @hidden @internal */ protected _applyGrouping() { - this._gridAPI.sort_groupBy_multiple(this._groupingExpressions); + this._gridAPI.sort_multiple(this._groupingExpressions); } private _setupNavigationService() { if (this.hasColumnLayouts) { this.navigation = new IgxGridMRLNavigationService(this.platform); - this.navigation.grid = this as any; + this.navigation.grid = this; } } From e659281746388957e2e5e4e1a3056b1814ca73f0 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Wed, 16 Mar 2022 10:59:01 +0200 Subject: [PATCH 10/28] fix(Grid): wrongfully resolved merge with master #9674 --- .../igniteui-angular/src/lib/grids/grid/grid.component.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 41e36d8df5c..8a28cb7b931 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1,7 +1,7 @@ import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren, QueryList, ViewChild, TemplateRef, DoCheck, AfterContentInit, HostBinding, - OnInit, AfterViewInit, ContentChildren, forwardRef + OnInit, AfterViewInit, ContentChildren } from '@angular/core'; import { IgxGridBaseDirective } from '../grid-base.directive'; import { IgxGridNavigationService } from '../grid-navigation.service'; @@ -30,7 +30,6 @@ import { IgxGridGroupByAreaComponent } from '../grouping/grid-group-by-area.comp import { IgxGridCell } from '../grid-public-cell'; import { ISortingExpression } from '../../data-operations/sorting-strategy'; import { IGridGroupingStrategy } from '../common/strategy'; -import { GridBaseAPIService } from '../api.service'; let NEXT_ID = 0; @@ -67,8 +66,8 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs { IgxGridNavigationService, IgxGridSummaryService, IgxGridSelectionService, - { provide: GridBaseAPIService, useClass: IgxGridAPIService }, - { provide: IgxGridBaseDirective, useExisting: forwardRef(() => IgxGridComponent) }, + { provide: IGX_GRID_SERVICE_BASE, useClass: IgxGridAPIService }, + { provide: IGX_GRID_BASE, useExisting: IgxGridComponent }, IgxFilteringService, IgxColumnResizingService, IgxForOfSyncService, From b5cfa6a370cc5baa0999cee1162b7c42da0be2a9 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Mon, 4 Apr 2022 10:15:53 +0300 Subject: [PATCH 11/28] feat(GroupBy): handle groupBy sorting without updating sorting expressions #9674 --- .../src/lib/grids/common/grid.interface.ts | 4 ++-- .../grids/grouping/group-by-area.directive.ts | 16 +++------------- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index c0001d3f110..37c51c1410d 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/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'; @@ -499,6 +499,7 @@ export interface GridType extends IGridDataBindable { filteringExpressionsTreeChange: EventEmitter; advancedFilteringExpressionsTree: IFilteringExpressionsTree; advancedFilteringExpressionsTreeChange: EventEmitter; + sortingOptions: ISortingOptions; batchEditing: boolean; groupingExpansionState?: IGroupByExpandState[]; @@ -606,7 +607,6 @@ export interface FlatGridType extends GridType { toggleGroup(groupRow: IGroupByRecord): void; clearGrouping(field: string): void; groupBy(expression: IGroupingExpression | Array): void; - sortGrouping(expression: IGroupingExpression | Array): void; } /** diff --git a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts index 5fa52b65419..b98972bb8f8 100644 --- a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts @@ -107,7 +107,7 @@ export abstract class IgxGroupByAreaDirective { public handleKeyDown(id: string, event: KeyboardEvent) { if (this.platform.isActivationKey(event)) { - this.updateSorting(id); + this.updateGroupSorting(id); } } @@ -115,11 +115,7 @@ export abstract class IgxGroupByAreaDirective { if (!this.grid.getColumnByName(id).groupable) { return; } - if (this.grid.groupingExpressions) { - this.updateGroupSorting(id); - } else { - this.updateSorting(id); - } + this.updateGroupSorting(id); } public onDragDrop(event) { @@ -162,16 +158,10 @@ export abstract class IgxGroupByAreaDirective { return newExpressions; } - protected updateSorting(id: string) { - const expr = this.grid.sortingExpressions.find(e => e.fieldName === id); - expr.dir = 3 - expr.dir; - this.grid.sort(expr); - } - protected updateGroupSorting(id: string) { const expr = this.grid.groupingExpressions.find(e => e.fieldName === id); expr.dir = 3 - expr.dir; - this.grid.sortGrouping(expr); + this.grid.pipeTrigger++; } protected expressionsChanged() { From dbe244075b0a807c805b71237a1274817c15c147 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Mon, 4 Apr 2022 14:18:16 +0300 Subject: [PATCH 12/28] feat(Sorting): remove sortIndex when single sorting mode is enabled #9674 --- .../src/lib/grids/headers/grid-header.component.html | 6 +++--- .../src/lib/grids/headers/grid-header.component.ts | 9 +++++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html index f660f47979b..dfbb7745502 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html @@ -17,8 +17,8 @@
- -
+
@@ -30,4 +30,4 @@
- \ No newline at end of file + diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index a186fbd52d0..d4abdfab346 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -149,6 +149,15 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy { return this.defaultSortHeaderIconTemplate; } } + /** + * @hidden + */ + public get disabled() { + if (this.grid.groupingExpressions.length && this.grid.groupingExpressions.map(g => g.fieldName).includes(this.column.field)) { + return true; + } + return false; + } public get sorted() { return this.sortDirection !== SortingDirection.None; From 51a6c5643b8d861168e33f95b84d733cabdcaf08 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Mon, 4 Apr 2022 14:19:18 +0300 Subject: [PATCH 13/28] feat(Sorting): grid sorting should not affect group by state #9674 --- .../src/lib/grids/grid-base.directive.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index b9fd517a6e5..148d1845cca 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -146,7 +146,7 @@ import { ConnectedPositioningStrategy } from '../services/overlay/position/conne 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'; @@ -4528,15 +4528,10 @@ 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); - } else if (this._sortingOptions.mode === 'single') { + if (this._sortingOptions.mode === 'single') { this.columns.forEach((col) => { if (!(col.field === expression.fieldName)) { this.clearSort(col.field); From 2c519a389af998159ce20d0edd6efec4e2102f95 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Mon, 4 Apr 2022 15:26:36 +0300 Subject: [PATCH 14/28] feat(*): update sort pipe to work based on group and sorting expressions #9674 --- .../src/lib/grids/grid/grid.component.html | 2 +- .../src/lib/grids/grid/grid.component.ts | 10 +++------- .../igniteui-angular/src/lib/grids/grid/grid.pipes.ts | 4 ++-- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 60a59e5e728..aca99444e2d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -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 diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 39e0c151ccc..c561a6879a5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -365,14 +365,10 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, this._groupingExpressions = cloneArray(value); this.groupingExpressionsChange.emit(this._groupingExpressions); if (this._gridAPI.grid) { - /* grouping should work in conjunction with sorting - and without overriding separate sorting expressions */ + debugger; + /* grouping and sorting are working separate from each other */ this._applyGrouping(); - this._gridAPI.arrange_sorting_expressions(); this.notifyChanges(); - } else { - // setter called before grid is registered in grid API service - this.sortingExpressions.unshift.apply(this.sortingExpressions, this._groupingExpressions); } if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this.columnList) { const groupedCols: IgxColumnComponent[] = []; @@ -1247,7 +1243,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @hidden @internal */ protected _applyGrouping() { - this._gridAPI.sort_multiple(this._groupingExpressions); + this._gridAPI.sort_groupBy_multiple(this._groupingExpressions); } private _setupNavigationService() { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index 0b02d8ddb85..8897a09e4c3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts @@ -19,10 +19,10 @@ export class IgxGridSortingPipe implements PipeTransform { constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { } - public transform(collection: any[], expressions: ISortingExpression[], sorting: IGridSortingStrategy, + public transform(collection: any[], sortExpressions: ISortingExpression[], groupExpressions: IGroupingExpression[], sorting: IGridSortingStrategy, id: string, pipeTrigger: number, pinned?): any[] { let result: any[]; - + const expressions = groupExpressions.concat(sortExpressions); if (!expressions.length) { result = collection; } else { From 70cc29121c6fda199daa08d65254b3a79a70a770 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Wed, 6 Apr 2022 11:44:19 +0300 Subject: [PATCH 15/28] fix(*): fix the iissues with hierarchical and tree grid #9674 --- .../igniteui-angular/src/lib/grids/common/grid.interface.ts | 2 ++ .../igniteui-angular/src/lib/grids/grid/grid.component.html | 2 +- .../src/lib/grids/grouping/group-by-area.directive.ts | 5 +++-- .../src/lib/grids/headers/grid-header.component.ts | 3 ++- .../grids/hierarchical-grid/hierarchical-grid.component.html | 4 ++-- .../src/lib/grids/tree-grid/tree-grid.component.html | 4 ++-- 6 files changed, 12 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index 37c51c1410d..6a998068360 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -36,6 +36,7 @@ import { OverlaySettings } from '../../services/overlay/utilities'; import { IPinningConfig } from '../grid.common'; import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType } from '../pivot-grid/pivot-grid.interface'; import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy'; +import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-area.component'; export const IGX_GRID_BASE = new InjectionToken('IgxGridBaseToken'); export const IGX_GRID_SERVICE_BASE = new InjectionToken('IgxGridServiceBaseToken'); @@ -444,6 +445,7 @@ export interface GridType extends IGridDataBindable { records?: Map; processedExpandedFlatData?: any[] | null; processedRecords?: Map; + treeGroupArea?: IgxTreeGridGroupByAreaComponent; activeNodeChange: EventEmitter; gridKeydown: EventEmitter; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index aca99444e2d..c471529b111 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/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'>
+ | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData">
@@ -51,7 +51,7 @@ | gridTransaction:id:pipeTrigger | visibleColumns:hasVisibleColumns | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger - | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger + | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger | gridHierarchicalPaging:paginator?.page:paginator?.perPage:id:pipeTrigger | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger | gridAddRow:false:pipeTrigger 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 index 47a184c076b..a08b21a767d 100644 --- 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 @@ -34,7 +34,7 @@ | treeGridAddRow:true:pipeTrigger | gridRowPinning:id:true:pipeTrigger | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true - | treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger:true as pinnedData'> + | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData'>
Toggle Summary Position
+ - Sorting mode +
- Show summary on collapse
@@ -28,7 +31,7 @@ style="display: block; width: 500px">
Hide Grouped Columns +
+ (cellEditDone)="cellEditDone()" + [sortingOptions]="{mode: 'single'}">