feat(cell-merging): add custom strategy cell merging samples for TGrid and HGrid

live-editing/configs/HierarchicalGridConfigGenerator.ts

@@ -654,6 +654,15 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
             ]
         }));
 
+        configs.push(new Config({
+            component: 'HGridCellMergeCustomComponent',
+            appConfig: BaseAppConfig,
+            additionalFiles: [
+                '/src/app/directives/prevent-scroll.directive.ts',
+                '/src/app/data/hierarchical-data.ts'
+            ]
+        }));
+
         configs.push(new Config({
             component: 'HierarchicalGridBothSidePinningSampleComponent',
             appConfig: BaseAppConfig,

live-editing/configs/TreeGridConfigGenerator.ts

@@ -800,6 +800,15 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             ]
         }));
 
+        configs.push(new Config({
+            component: 'TreeGridCellMergeCustomComponent',
+            appConfig: BaseAppConfig,
+            additionalFiles: [
+                '/src/app/directives/prevent-scroll.directive.ts',
+                '/src/app/tree-grid/data/employees-flat-detailed.ts'
+            ]
+        }));
+
         configs.push(new Config({
             component: 'TreeGridBothSidesPinningSampleComponent',
             additionalFiles: [

src/app/hierarchical-grid/hierarchical-grid-cell-merge-custom/hierarchical-grid-cell-merge-custom.component.html

@@ -0,0 +1,26 @@
+<div class="grid__wrapper">
+    <igx-hierarchical-grid [igxPreventDocumentScroll]="true" #hGrid [data]="localData" [moving]="true" [sortingExpressions]="sortExpr"
+        [cellMergeMode]="cellMergeMode" [mergeStrategy]="perCountryMergeStrategy" [height]="'740px'" [width]="'100%'" [allowFiltering]="true" >
+        <igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
+        <igx-column field="ContactName" [sortable]="true" [resizable]="true"></igx-column>
+        <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+        <igx-column field="Address" [sortable]="true" [resizable]="true"></igx-column>
+        <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+        <igx-column field="PostalCode" [sortable]="true" [resizable]="true"></igx-column>
+        <igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+        <igx-column field="Phone" [sortable]="true" [resizable]="true"></igx-column>
+        <igx-column field="Fax" [sortable]="true" [resizable]="true"></igx-column>
+        <igx-row-island [height]="null" [key]="'ChildCompanies'" [moving]="true" [autoGenerate]="false"
+            [sortingExpressions]="sortExpr" [cellMergeMode]="cellMergeMode" [mergeStrategy]="perCountryMergeStrategy">
+            <igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
+            <igx-column field="ContactName" [sortable]="true" [resizable]="true"></igx-column>
+            <igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+            <igx-column field="Address" [sortable]="true" [resizable]="true"></igx-column>
+            <igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+            <igx-column field="PostalCode" [sortable]="true" [resizable]="true"></igx-column>
+            <igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
+            <igx-column field="Phone" [sortable]="true" [resizable]="true"></igx-column>
+            <igx-column field="Fax" [sortable]="true" [resizable]="true"></igx-column>
+        </igx-row-island>
+    </igx-hierarchical-grid>
+</div>

src/app/hierarchical-grid/hierarchical-grid-cell-merge-custom/hierarchical-grid-cell-merge-custom.component.scss

@@ -0,0 +1,3 @@
+.grid__wrapper {
+    margin: 16px;
+}

src/app/hierarchical-grid/hierarchical-grid-cell-merge-custom/hierarchical-grid-cell-merge-custom.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, SortingDirection, GridCellMergeMode, IgxGridToolbarComponent, IgxSelectComponent, IgxSelectItemComponent, IgxLabelDirective, DefaultMergeStrategy } 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-custom',
+    styleUrls: ['./hierarchical-grid-cell-merge-custom.component.scss'],
+    templateUrl: 'hierarchical-grid-cell-merge-custom.component.html',
+    imports: [
+        IgxHierarchicalGridComponent,
+        IgxPreventDocumentScrollDirective,
+        IgxColumnComponent,
+        IgxRowIslandComponent,
+        IgxGridToolbarComponent,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxLabelDirective,
+        FormsModule
+    ]
+})
+
+export class HGridCellMergeCustomComponent {
+
+    public localData = HIERARCHICAL_DATA;
+    public cellMergeMode: GridCellMergeMode = 'always';
+    public perCountryMergeStrategy = new PerCountryMergeStrategy();
+    public sortExpr = [
+        {
+            dir: SortingDirection.Asc, fieldName: 'ContactTitle'
+        }
+    ];
+}
+
+export class PerCountryMergeStrategy extends DefaultMergeStrategy {
+    /* Merge only cells within their respective countries */
+    public override comparer(prevRecord: any, record: any, field: string): boolean {
+        const a = prevRecord[field];
+        const b = record[field];
+        const projA = prevRecord['Country'];
+        const projB = record['Country'];
+        return a === b && projA === projB;
+    }
+}

src/app/hierarchical-grid/hierarchical-grid-routes-data.ts

@@ -2,6 +2,7 @@
 
 export const hierarchicalGridRoutesData = {
     'hierarchical-grid-cell-merge': { displayName: 'Hierarchical Grid Cell Merging', parentName: 'Hierarchical Grid' },
+    'hierarchical-grid-cell-merge-custom': { displayName: 'Hierarchical Grid Cell Merging Custom', 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'},

src/app/hierarchical-grid/hierarchical-grid.routes.ts

@@ -103,6 +103,7 @@ import { HierarchicalGridValidatorServiceExtendedComponent } from './hierarchica
 import { HGridSummaryExportComponent } from './hgrid-summary-export/hgrid-summary-export.component';
 import { HierarchicalGridBothSidePinningSampleComponent } from './hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component';
 import { HGridCellMergeComponent } from './hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component';
+import { HGridCellMergeCustomComponent } from './hierarchical-grid-cell-merge-custom/hierarchical-grid-cell-merge-custom.component';
 
 export const HierarchicalGridRoutes: Routes = [
     {
@@ -593,5 +594,10 @@ export const HierarchicalGridRoutes: Routes = [
         component: HGridCellMergeComponent,
         data: hierarchicalGridRoutesData['hierarchical-grid-cell-merge'],
         path: 'hierarchical-grid-cell-merge'
+    },
+    {
+        component: HGridCellMergeCustomComponent,
+        data: hierarchicalGridRoutesData['hierarchical-grid-cell-merge-custom'],
+        path: 'hierarchical-grid-cell-merge-custom'
     }
 ];