Skip to content

Commit f8fb3b8

Browse files
ChronosSFChronosSF
authored
Merge pull request #3729 from IgniteUI/iminchev/cell-merging-custom-strat
feat(cell-merging): add custom strategy cell merging samples for TGrid and HGrid
2 parents 668cb23 + b72f4dc commit f8fb3b8

13 files changed

Lines changed: 469 additions & 0 deletions

‎live-editing/configs/HierarchicalGridConfigGenerator.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -654,6 +654,15 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
654654
]
655655
}));
656656

657+
configs.push(new Config({
658+
component: 'HGridCellMergeCustomComponent',
659+
appConfig: BaseAppConfig,
660+
additionalFiles: [
661+
'/src/app/directives/prevent-scroll.directive.ts',
662+
'/src/app/data/hierarchical-data.ts'
663+
]
664+
}));
665+
657666
configs.push(new Config({
658667
component: 'HierarchicalGridBothSidePinningSampleComponent',
659668
appConfig: BaseAppConfig,

‎live-editing/configs/TreeGridConfigGenerator.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -800,6 +800,15 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
800800
]
801801
}));
802802

803+
configs.push(new Config({
804+
component: 'TreeGridCellMergeCustomComponent',
805+
appConfig: BaseAppConfig,
806+
additionalFiles: [
807+
'/src/app/directives/prevent-scroll.directive.ts',
808+
'/src/app/tree-grid/data/employees-flat-detailed.ts'
809+
]
810+
}));
811+
803812
configs.push(new Config({
804813
component: 'TreeGridBothSidesPinningSampleComponent',
805814
additionalFiles: [

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="grid__wrapper">
2+
<igx-hierarchical-grid [igxPreventDocumentScroll]="true" #hGrid [data]="localData" [moving]="true" [sortingExpressions]="sortExpr"
3+
[cellMergeMode]="cellMergeMode" [mergeStrategy]="perCountryMergeStrategy" [height]="'740px'" [width]="'100%'" [allowFiltering]="true" >
4+
<igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
5+
<igx-column field="ContactName" [sortable]="true" [resizable]="true"></igx-column>
6+
<igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
7+
<igx-column field="Address" [sortable]="true" [resizable]="true"></igx-column>
8+
<igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
9+
<igx-column field="PostalCode" [sortable]="true" [resizable]="true"></igx-column>
10+
<igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
11+
<igx-column field="Phone" [sortable]="true" [resizable]="true"></igx-column>
12+
<igx-column field="Fax" [sortable]="true" [resizable]="true"></igx-column>
13+
<igx-row-island [height]="null" [key]="'ChildCompanies'" [moving]="true" [autoGenerate]="false"
14+
[sortingExpressions]="sortExpr" [cellMergeMode]="cellMergeMode" [mergeStrategy]="perCountryMergeStrategy">
15+
<igx-column field="CompanyName" [sortable]="true" [resizable]="true"></igx-column>
16+
<igx-column field="ContactName" [sortable]="true" [resizable]="true"></igx-column>
17+
<igx-column field="ContactTitle" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
18+
<igx-column field="Address" [sortable]="true" [resizable]="true"></igx-column>
19+
<igx-column field="City" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
20+
<igx-column field="PostalCode" [sortable]="true" [resizable]="true"></igx-column>
21+
<igx-column field="Country" [sortable]="true" [resizable]="true" [merge]="true"></igx-column>
22+
<igx-column field="Phone" [sortable]="true" [resizable]="true"></igx-column>
23+
<igx-column field="Fax" [sortable]="true" [resizable]="true"></igx-column>
24+
</igx-row-island>
25+
</igx-hierarchical-grid>
26+
</div>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.grid__wrapper {
2+
margin: 16px;
3+
}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Component } from '@angular/core';
2+
import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, SortingDirection, GridCellMergeMode, IgxGridToolbarComponent, IgxSelectComponent, IgxSelectItemComponent, IgxLabelDirective, DefaultMergeStrategy } from 'igniteui-angular';
3+
import { HIERARCHICAL_DATA } from '../../data/hierarchical-data';
4+
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
5+
import { FormsModule } from '@angular/forms';
6+
7+
@Component({
8+
selector: 'app-hierarchical-grid-cell-merge-custom',
9+
styleUrls: ['./hierarchical-grid-cell-merge-custom.component.scss'],
10+
templateUrl: 'hierarchical-grid-cell-merge-custom.component.html',
11+
imports: [
12+
IgxHierarchicalGridComponent,
13+
IgxPreventDocumentScrollDirective,
14+
IgxColumnComponent,
15+
IgxRowIslandComponent,
16+
IgxGridToolbarComponent,
17+
IgxSelectComponent,
18+
IgxSelectItemComponent,
19+
IgxLabelDirective,
20+
FormsModule
21+
]
22+
})
23+
24+
export class HGridCellMergeCustomComponent {
25+
26+
public localData = HIERARCHICAL_DATA;
27+
public cellMergeMode: GridCellMergeMode = 'always';
28+
public perCountryMergeStrategy = new PerCountryMergeStrategy();
29+
public sortExpr = [
30+
{
31+
dir: SortingDirection.Asc, fieldName: 'ContactTitle'
32+
}
33+
];
34+
}
35+
36+
export class PerCountryMergeStrategy extends DefaultMergeStrategy {
37+
/* Merge only cells within their respective countries */
38+
public override comparer(prevRecord: any, record: any, field: string): boolean {
39+
const a = prevRecord[field];
40+
const b = record[field];
41+
const projA = prevRecord['Country'];
42+
const projB = record['Country'];
43+
return a === b && projA === projB;
44+
}
45+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
export const hierarchicalGridRoutesData = {
44
'hierarchical-grid-cell-merge': { displayName: 'Hierarchical Grid Cell Merging', parentName: 'Hierarchical Grid' },
5+
'hierarchical-grid-cell-merge-custom': { displayName: 'Hierarchical Grid Cell Merging Custom', parentName: 'Hierarchical Grid' },
56
'hierarchical-grid-editing': { displayName: 'Hierarchical Grid Editing', parentName: 'Hierarchical Grid' },
67
'hierarchical-grid-editing-events': { displayName: 'Hierarchical Grid Editing Events', parentName: 'Hierarchical Grid'},
78
'hierarchical-grid-editing-style': { displayName: 'Hierarchical Grid Editing Style', parentName: 'Hierarchical Grid'},

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ import { HierarchicalGridValidatorServiceExtendedComponent } from './hierarchica
103103
import { HGridSummaryExportComponent } from './hgrid-summary-export/hgrid-summary-export.component';
104104
import { HierarchicalGridBothSidePinningSampleComponent } from './hierarchical-grid-sample-both-sides-pinning/hierarchical-grid-both-sides-pinning.component';
105105
import { HGridCellMergeComponent } from './hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component';
106+
import { HGridCellMergeCustomComponent } from './hierarchical-grid-cell-merge-custom/hierarchical-grid-cell-merge-custom.component';
106107

107108
export const HierarchicalGridRoutes: Routes = [
108109
{
@@ -593,5 +594,10 @@ export const HierarchicalGridRoutes: Routes = [
593594
component: HGridCellMergeComponent,
594595
data: hierarchicalGridRoutesData['hierarchical-grid-cell-merge'],
595596
path: 'hierarchical-grid-cell-merge'
597+
},
598+
{
599+
component: HGridCellMergeCustomComponent,
600+
data: hierarchicalGridRoutesData['hierarchical-grid-cell-merge-custom'],
601+
path: 'hierarchical-grid-cell-merge-custom'
596602
}
597603
];

0 commit comments

Comments
 (0)