diff --git a/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts index 9bf47444fec..0c604bb21b6 100644 --- a/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts @@ -7,6 +7,7 @@ import { GridType } from '../grids/common/grid.interface'; export interface IMergeByResult { rowSpan: number; root?: any; + childRecords?: any[]; } /** @@ -75,10 +76,11 @@ export class DefaultMergeStrategy implements IGridMergeStrategy { continue; } const recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map(), ghostRecord: rec.ghostRecord }; - recToUpdateData.cellMergeMeta.set(field, { rowSpan: 1 }); + recToUpdateData.cellMergeMeta.set(field, { rowSpan: 1, childRecords: [] }); if (prev && comparer.call(this, prev.recordRef, recToUpdateData.recordRef, field, isDate, isTime) && prev.ghostRecord === recToUpdateData.ghostRecord) { const root = prev.cellMergeMeta.get(field)?.root ?? prev; root.cellMergeMeta.get(field).rowSpan += 1; + root.cellMergeMeta.get(field).childRecords.push(recToUpdateData); recToUpdateData.cellMergeMeta.get(field).root = root; } prev = recToUpdateData; 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 9631c1bd71a..f7b47ea5aec 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -69,7 +69,8 @@ | gridRowPinning:id:true:pipeTrigger | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true - | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:activeRowIndexes:true:pipeTrigger; as pinnedData) { + | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger + | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) { @if (pinnedData.length > 0) {
x - this.grid.pinnedRecordsCount); } - const result = DataUtil.merge(cloneArray(collection), colsToMerge, mergeStrategy, activeRowIndexes, this.grid); + activeRowIndexes = Array.from(new Set(activeRowIndexes)).filter(x => !isNaN(x)); + const rootsToUpdate = []; + activeRowIndexes.forEach(index => { + const target = collection[index]; + if (target) { + colsToMerge.forEach(col => { + const colMeta = target.cellMergeMeta.get(col.field); + const root = colMeta.root || (colMeta.rowSpan > 1 ? target : null); + if (root) { + rootsToUpdate.push(root); + } + }); + } + }); + const uniqueRoots = Array.from(new Set(rootsToUpdate)); + if (uniqueRoots.length === 0) { + // if nothing to update, return + return collection; + } + let result = cloneArray(collection) as any; + uniqueRoots.forEach(x => { + const index = result.indexOf(x); + const colKeys = [...x.cellMergeMeta.keys()]; + const cols = colsToMerge.filter(col => colKeys.indexOf(col.field) !== -1); + let res = []; + for (const col of cols) { + + let childData = x.cellMergeMeta.get(col.field).childRecords; + const childRecs = childData.map(rec => rec.recordRef); + const isDate = col?.dataType === 'date' || col?.dataType === 'dateTime'; + const isTime = col?.dataType === 'time' || col?.dataType === 'dateTime'; + res = this.grid.mergeStrategy.merge( + [x.recordRef, ...childRecs], + col.field, + col.mergingComparer, + res, + activeRowIndexes.map(ri => ri - index), + isDate, + isTime, + this.grid); + + } + result = result.slice(0, index).concat(res, result.slice(index + res.length)); + }); + + return result; } } 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 index 276e89cb377..2b640e97ddd 100644 --- 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 @@ -51,7 +51,8 @@ | gridRowPinning:id:true:pipeTrigger | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true - | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:activeRowIndexes:true:pipeTrigger; as pinnedData + | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger + | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData ) { @if (pinnedData.length > 0) {
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 80c7c7c1f96..789b46b4453 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -50,7 +50,7 @@ import { IgxGridValidationService } from '../grid/grid-validation.service'; import { IgxGridHierarchicalPipe, IgxGridHierarchicalPagingPipe } from './hierarchical-grid.pipes'; import { IgxSummaryDataPipe } from '../summaries/grid-root-summary.pipe'; import { IgxGridTransactionPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, IgxGridAddRowPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxStringReplacePipe } from '../common/pipes'; -import { IgxGridSortingPipe, IgxGridFilteringPipe, IgxGridCellMergePipe } from '../grid/grid.pipes'; +import { IgxGridSortingPipe, IgxGridFilteringPipe, IgxGridCellMergePipe, IgxGridUnmergeActivePipe } from '../grid/grid.pipes'; import { IgxGridColumnResizerComponent } from '../resizing/resizer.component'; import { IgxRowEditTabStopDirective } from '../grid.rowEdit.directive'; import { IgxIconComponent } from '../../icon/icon.component'; @@ -353,7 +353,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { IgxGridHierarchicalPagingPipe, IgxStringReplacePipe, IgxGridCellMergePipe, - IgxScrollInertiaDirective + IgxScrollInertiaDirective, + IgxGridUnmergeActivePipe ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) 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 33c79416332..7195fcbf71b 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 @@ -53,7 +53,8 @@ | gridRowPinning:id:true:pipeTrigger | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true - | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:activeRowIndexes:true:pipeTrigger; as pinnedData + | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger + | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData ) { @if (pinnedData.length > 0) {
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts index 4820bca8339..40196a62d0b 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts @@ -82,7 +82,7 @@ import { IgxGridDragSelectDirective } from '../selection/drag-select.directive'; import { IgxGridBodyDirective } from '../grid.common'; import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'; import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service'; -import { IgxGridCellMergePipe } from '../grid/grid.pipes'; +import { IgxGridCellMergePipe, IgxGridUnmergeActivePipe } from '../grid/grid.pipes'; import { DefaultTreeGridMergeStrategy, IGridMergeStrategy } from '../../data-operations/merge-strategy'; import { IgxScrollInertiaDirective } from '../../directives/scroll-inertia/scroll_inertia.directive'; @@ -173,7 +173,8 @@ let NEXT_ID = 0; IgxTreeGridAddRowPipe, IgxStringReplacePipe, IgxGridCellMergePipe, - IgxScrollInertiaDirective + IgxScrollInertiaDirective, + IgxGridUnmergeActivePipe ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/src/app/grid-cellMerging/grid-cellMerging.component.html b/src/app/grid-cellMerging/grid-cellMerging.component.html index 73233eb9c1c..b578fb8c3ef 100644 --- a/src/app/grid-cellMerging/grid-cellMerging.component.html +++ b/src/app/grid-cellMerging/grid-cellMerging.component.html @@ -50,7 +50,7 @@

Grid with cell merge

Value: {{val}},Index: {{cell.row.index}} - + @@ -70,8 +70,7 @@

Grid with cell merge

- - + diff --git a/src/app/grid-cellMerging/grid-cellMerging.component.ts b/src/app/grid-cellMerging/grid-cellMerging.component.ts index 3374c5e606f..19c7ed681e1 100644 --- a/src/app/grid-cellMerging/grid-cellMerging.component.ts +++ b/src/app/grid-cellMerging/grid-cellMerging.component.ts @@ -38,7 +38,7 @@ import { INVOICE_DATA } from '../shared/invoiceData'; FormsModule, IgxColumnComponent, IgxGridComponent, - IgxPaginatorComponent, + // IgxPaginatorComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridToolbarComponent, @@ -66,6 +66,17 @@ export class GridCellMergingComponent { @ViewChild('grid1', { static: true }) public grid: IgxGridComponent; public data = INVOICE_DATA; + constructor(){ + const allData = INVOICE_DATA + const length = INVOICE_DATA.length; + for (let i = 1; i <= 600_000; i++) { + const rnd = Math.floor(Math.random() * length); + allData.push(Object.assign({}, INVOICE_DATA[rnd])); + } + + this.data = allData; + } + public toggleStrategy() { if (this.treeGridMergeStrategy instanceof ByLevelTreeGridMergeStrategy) { this.treeGridMergeStrategy = new DefaultTreeGridMergeStrategy();