+
+
+
+
+
+
+
+
+
+ @if (val) {
+ 
+ }
+ @if (!val) {
+ 
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @for (type of mergeTypes; track type) {
+
+ {{type.name}}
+
+ }
+
+
+
+
diff --git a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.scss b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.scss
new file mode 100644
index 0000000000..7bb594da30
--- /dev/null
+++ b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.scss
@@ -0,0 +1,33 @@
+.grid-controls {
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ margin: 0 16px 24px;
+
+ igx-switch {
+ margin-top: 24px;
+ }
+
+}
+
+.grid__wrapper {
+ padding-top: 16px;
+ margin: 0 16px;
+}
+
+.header-icon {
+ font-size: 1.4em;
+ width: 1.1em;
+ height: 1.1em;
+ float: right;
+ cursor: pointer;
+}
+
+.header {
+ height: 100%;
+}
+
+.igx-grid__th .title {
+ width: 100%;
+ cursor: auto;
+}
diff --git a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.spec.ts b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.spec.ts
new file mode 100644
index 0000000000..a385108a5e
--- /dev/null
+++ b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { GridCellMergeSampleComponent } from './grid-cell-merge-sample.component';
+
+describe('GridGroupBySample', () => {
+ let component: GridCellMergeSampleComponent;
+ let fixture: ComponentFixture
+ }
+ @if (!val) {
+
+ }
+
+
+
+
+
+ @for (type of mergeTypes; track type) {
+
+ {{type.name}}
+
+ }
+
+
+
+ @for (type of mergeTypes; track type) {
+
+ {{type.name}}
+
+ }
+
+
+
+
+
+
diff --git a/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.scss b/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.scss
new file mode 100644
index 0000000000..b6f79f464f
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.scss
@@ -0,0 +1,3 @@
+.grid__wrapper {
+ margin: 16px;
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.ts b/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.ts
new file mode 100644
index 0000000000..a237e2dc2a
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.ts
@@ -0,0 +1,40 @@
+import { ChangeDetectorRef, Component, ContentChild, inject, ViewChild } from '@angular/core';
+import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, SortingDirection, GridCellMergeMode, IgxGridToolbarComponent, IgxSelectComponent, IgxSelectItemComponent, IgxLabelDirective } from 'igniteui-angular';
+import { HIERARCHICAL_DATA } from '../../data/hierarchical-data';
+import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'app-hierarchical-grid-cell-merge',
+ styleUrls: ['./hierarchical-grid-cell-merge.component.scss'],
+ templateUrl: 'hierarchical-grid-cell-merge.component.html',
+ imports: [
+ IgxHierarchicalGridComponent,
+ IgxPreventDocumentScrollDirective,
+ IgxColumnComponent,
+ IgxRowIslandComponent,
+ IgxGridToolbarComponent,
+ IgxSelectComponent,
+ IgxSelectItemComponent,
+ IgxLabelDirective,
+ FormsModule
+ ]
+})
+
+export class HGridCellMergeComponent {
+
+ public localData = HIERARCHICAL_DATA;
+ public cellMergeMode: GridCellMergeMode = 'always';
+ public cellMergeModeRowIsland: GridCellMergeMode= 'always';
+ public mergeTypes = [{ name: 'Merge always', value: GridCellMergeMode.always }, { name: 'Merge on sort', value: GridCellMergeMode.onSort }];
+ public sortExpr = [
+ {
+ dir: SortingDirection.Asc, fieldName: 'ContactTitle'
+ }
+ ];
+
+ public strategySelection(e, hgrid: IgxHierarchicalGridComponent) {
+ this.cellMergeModeRowIsland = e.newSelection.value;
+ hgrid.getChildGrids().forEach(x => x.notifyChanges(true));
+ }
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
index 609041d67b..b6839117aa 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
@@ -1,6 +1,7 @@
/* eslint-disable max-len */
export const hierarchicalGridRoutesData = {
+ 'hierarchical-grid-cell-merge': { displayName: 'Hierarchical Grid Cell Merging', parentName: 'Hierarchical Grid' },
'hierarchical-grid-editing': { displayName: 'Hierarchical Grid Editing', parentName: 'Hierarchical Grid' },
'hierarchical-grid-editing-events': { displayName: 'Hierarchical Grid Editing Events', parentName: 'Hierarchical Grid'},
'hierarchical-grid-editing-style': { displayName: 'Hierarchical Grid Editing Style', parentName: 'Hierarchical Grid'},
diff --git a/src/app/hierarchical-grid/hierarchical-grid.routes.ts b/src/app/hierarchical-grid/hierarchical-grid.routes.ts
index 128cff572a..929027f996 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.routes.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid.routes.ts
@@ -101,6 +101,7 @@ import { HierarchicalGridValidatorServiceCrossCellComponent } from './hierarchic
import { HGridValidationStyleComponent } from './hierarchical-grid-validation-style/hierarchical-grid-validation-style.component';
import { HierarchicalGridValidatorServiceExtendedComponent } from './hierarchical-grid-validator-service-extended/hierarchical-grid-validator-service-extended.component';
import { HGridSummaryExportComponent } from './hgrid-summary-export/hgrid-summary-export.component';
+import { HGridCellMergeComponent } from './hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component';
export const HierarchicalGridRoutes: Routes = [
{
@@ -581,5 +582,10 @@ export const HierarchicalGridRoutes: Routes = [
component: HGridSummaryExportComponent,
data: hierarchicalGridRoutesData['hierarchical-grid-summary-export'],
path: 'hierarchical-grid-summary-export'
+ },
+ {
+ component: HGridCellMergeComponent,
+ data: hierarchicalGridRoutesData['hierarchical-grid-cell-merge'],
+ path: 'hierarchical-grid-cell-merge'
}
];
diff --git a/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.html b/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.html
new file mode 100644
index 0000000000..8acfe7060e
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ @for (type of mergeTypes; track type) {
+
+ {{type.name}}
+
+ }
+
+
+
+
+ @for (type of mergeStrategies; track type) {
+
+ {{type.name}}
+
+ }
+
+
+
+
diff --git a/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.scss b/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.scss
new file mode 100644
index 0000000000..58232c0b31
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.scss
@@ -0,0 +1,11 @@
+.grid__wrapper {
+
+ position: relative;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+}
diff --git a/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.ts b/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.ts
new file mode 100644
index 0000000000..9840e32ad4
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.ts
@@ -0,0 +1,40 @@
+import { ChangeDetectorRef, Component, inject, ViewChild } from '@angular/core';
+import { IgxTreeGridComponent, IgxColumnComponent, GridCellMergeMode, IgxGridToolbarComponent, IgxSelectComponent, IgxSelectItemComponent, IgxLabelDirective, SortingDirection, DefaultTreeGridMergeStrategy, ByLevelTreeGridMergeStrategy } from 'igniteui-angular';
+import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
+import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'app-tree-grid-cell-merge-sample',
+ styleUrls: ['./tree-grid-cell-merge-sample.component.scss'],
+ templateUrl: './tree-grid-cell-merge-sample.component.html',
+ imports: [
+ IgxTreeGridComponent,
+ IgxPreventDocumentScrollDirective,
+ IgxColumnComponent,
+ IgxSelectComponent,
+ IgxSelectItemComponent,
+ IgxLabelDirective,
+ IgxGridToolbarComponent,
+ FormsModule
+ ]
+})
+
+export class TreeGridCellMergeComponent {
+ @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent;
+ public childDataKey = 'Categories';
+ public data = generateEmployeeDetailedFlatData();
+ public cellMergeMode: GridCellMergeMode = 'always';
+ public sortExpr = [
+ {
+ dir: SortingDirection.Asc, fieldName: 'Country'
+ }
+ ];
+ public mergeTypes = [{ name: 'Always', value: GridCellMergeMode.always }, { name: 'On sort', value: GridCellMergeMode.onSort }];
+
+ public mergeStrategies = [{ name: 'Default Strategy', value: new DefaultTreeGridMergeStrategy() }, { name: 'By Level Strategy', value: new ByLevelTreeGridMergeStrategy() }];
+ public mergeStrategy = this.mergeStrategies[0].value;
+ public strategySelection(e) {
+ this.mergeStrategy = e.newSelection.value;
+ }
+}
diff --git a/src/app/tree-grid/tree-grid-routes-data.ts b/src/app/tree-grid/tree-grid-routes-data.ts
index f34bcd3023..1eee92b2a2 100644
--- a/src/app/tree-grid/tree-grid-routes-data.ts
+++ b/src/app/tree-grid/tree-grid-routes-data.ts
@@ -1,6 +1,7 @@
// tslint:disable:object-literal-sort-keys
export const treeGridRoutesData = {
+ 'treegrid-cell-merge': { displayName: 'TreeGrid Cell Merge', parentName: 'TreeGrid' },
'tree-grid-row-drag': { displayName: 'Tree Grid Row Drag', parentName: 'TreeGrid' },
'tree-grid-multi-row-drag': { displayName: 'Tree Grid Multi Row Drag', parentName: 'TreeGrid' },
'tree-grid-row-drag-base': { displayName: 'Tree Grid Row Drag - Base', parentName: 'TreeGrid' },
diff --git a/src/app/tree-grid/tree-grid.routes.ts b/src/app/tree-grid/tree-grid.routes.ts
index 0f4d58a17b..7e985194df 100644
--- a/src/app/tree-grid/tree-grid.routes.ts
+++ b/src/app/tree-grid/tree-grid.routes.ts
@@ -100,6 +100,7 @@ import { TreeGridSummaryTemplateComponent } from './treegrid-summary-template/tr
import { TreeGridValidatorServiceCrossFieldComponent } from './tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component';
import { TreeGridValidationStyleComponent } from './tree-grid-validation-style/tree-grid-validation-style.component';
import { TreeGridSummaryExportComponent } from './tree-grid-summary-export/tree-grid-summary-export.component';
+import { TreeGridCellMergeComponent } from './tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component';
export const TreeGridRoutes: Routes = [
{
@@ -596,5 +597,10 @@ export const TreeGridRoutes: Routes = [
component: TreeGridSummaryExportComponent,
data: treeGridRoutesData['treegrid-summary-export'],
path: 'treegrid-summary-export'
+ },
+ {
+ component: TreeGridCellMergeComponent,
+ data: treeGridRoutesData['treegrid-cell-merge'],
+ path: 'treegrid-cell-merge'
}
];