From e31c001dc1f13c65902e5f66fb2516577e72eb09 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 24 Jul 2025 17:31:59 +0300 Subject: [PATCH 1/8] chore(*): Initial sample draft. --- .../grid-cell-merge-sample.component.html | 34 +++++++++++++++++++ .../grid-cell-merge-sample.component.scss | 33 ++++++++++++++++++ .../grid-cell-merge-sample.component.spec.ts | 25 ++++++++++++++ .../grid-cell-merge-sample.component.ts | 29 ++++++++++++++++ src/app/grid/grid-routes-data.ts | 1 + src/app/grid/grids.routes.ts | 6 ++++ 6 files changed, 128 insertions(+) create mode 100644 src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html create mode 100644 src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.scss create mode 100644 src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.spec.ts create mode 100644 src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts diff --git a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html new file mode 100644 index 0000000000..875d4844d0 --- /dev/null +++ b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html @@ -0,0 +1,34 @@ +
+ + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + + + + + + + + + + + + +
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; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [GridCellMergeSampleComponent] +}) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GridCellMergeSampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts new file mode 100644 index 0000000000..8874648185 --- /dev/null +++ b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, GridSelectionMode, IgxGridComponent, ISortingExpression, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent } from 'igniteui-angular'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-groupby-sample', + styleUrls: ['./grid-cell-merge-sample.component.scss'], + templateUrl: './grid-cell-merge-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent] +}) +export class GridCellMergeSampleComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public selectionMode: GridSelectionMode = 'multiple'; + + constructor() { + this.data = INVOICE_DATA; + } + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } +} diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts index 2c8f0d1d90..d19a9189b6 100644 --- a/src/app/grid/grid-routes-data.ts +++ b/src/app/grid/grid-routes-data.ts @@ -2,6 +2,7 @@ export const gridsRoutesData = { 'grid-groupby': { displayName: 'Grid GroupBy', parentName: 'Grid' }, + 'grid-cellMerge': { displayName: 'Grid Cell Merge', parentName: 'Grid' }, 'grid-groupby-custom': {displayName: 'Grid GroupBy Custom', parentName: 'Grid'}, 'grid-groupby-paging': { displayName: 'Grid GroupBy Paging', parentName: 'Grid' }, 'grid-groupby-styling': { displayName: 'Grid GroupBy Styling', parentName: 'Grid' }, diff --git a/src/app/grid/grids.routes.ts b/src/app/grid/grids.routes.ts index 150e2c0407..838f93dc2c 100644 --- a/src/app/grid/grids.routes.ts +++ b/src/app/grid/grids.routes.ts @@ -131,6 +131,7 @@ import { GridValidatorServiceExtendedComponent } from './grid-validator-service- import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-export.component'; import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sample/grid-state-persistance-sample.component'; import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-cascading-combos.component'; +import { GridCellMergeSampleComponent } from './grid-cell-merge-sample/grid-cell-merge-sample.component'; // tslint:enable:max-line-length @@ -155,6 +156,11 @@ export const GridsRoutes: Routes = [ data: gridsRoutesData['grid-groupby'], path: 'grid-groupby' }, + { + component: GridCellMergeSampleComponent, + data: gridsRoutesData['grid-cellMerge'], + path: 'grid-cellMerge' + }, { component: GridGroupByStylingComponent, data: gridsRoutesData['grid-groupby-styling'], From 5bf6f89c8dd592cb1c4ae7e9e50c8739b47375c3 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 31 Jul 2025 14:25:32 +0300 Subject: [PATCH 2/8] chore(*): Adjust sample columns and allow changing merge type. --- .../grid-cell-merge-sample.component.html | 34 ++++++++++++------- .../grid-cell-merge-sample.component.ts | 20 ++++++++--- 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html index 875d4844d0..62833d01c7 100644 --- a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html +++ b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html @@ -1,14 +1,12 @@
- + - + - - - + - + @if (val) { Continued @@ -18,17 +16,29 @@ } - + + + - + - + - + - + - + + + + + @for (type of mergeTypes; track type) { + + {{type.name}} + + } + +
diff --git a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts index 8874648185..e08a5f7da9 100644 --- a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts +++ b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { DefaultSortingStrategy, GridSelectionMode, IgxGridComponent, ISortingExpression, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent } from 'igniteui-angular'; +import { DefaultSortingStrategy, GridSelectionMode, IgxGridComponent, ISortingExpression, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent, GridCellMergeMode, IgxSelectComponent, IgxSelectItemComponent, IgxGridToolbarComponent, IgxLabelDirective } from 'igniteui-angular'; import { INVOICE_DATA } from '../../data/invoiceData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; @Component({ @@ -9,14 +10,25 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-groupby-sample', styleUrls: ['./grid-cell-merge-sample.component.scss'], templateUrl: './grid-cell-merge-sample.component.html', - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent] + imports: [ + IgxGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxCellTemplateDirective, + IgxSelectComponent, + IgxSelectItemComponent, + IgxLabelDirective, + IgxGridToolbarComponent, + FormsModule + ] }) export class GridCellMergeSampleComponent { @ViewChild('grid1', { read: IgxGridComponent, static: true }) public grid1: IgxGridComponent; public data; - public selectionMode: GridSelectionMode = 'multiple'; - + public selectionMode: GridSelectionMode = 'single'; + public cellMergeMode: GridCellMergeMode = 'always'; + public mergeTypes = [{ name: 'Merge always', value: GridCellMergeMode.always }, { name: 'Merge on sort', value: GridCellMergeMode.onSort }]; constructor() { this.data = INVOICE_DATA; } From 4fd5d3af535f27615bae1110222c290a4bb9ea91 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 31 Jul 2025 15:06:14 +0300 Subject: [PATCH 3/8] chore(*): Add sample with custom strategy. --- ...id-cell-merge-custom-sample.component.html | 18 +++++++ ...id-cell-merge-custom-sample.component.scss | 33 ++++++++++++ ...cell-merge-custom-sample.component.spec.ts | 25 +++++++++ ...grid-cell-merge-custom-sample.component.ts | 52 +++++++++++++++++++ src/app/grid/grid-routes-data.ts | 1 + src/app/grid/grids.routes.ts | 6 +++ 6 files changed, 135 insertions(+) create mode 100644 src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.html create mode 100644 src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.scss create mode 100644 src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.spec.ts create mode 100644 src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts diff --git a/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.html b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.html new file mode 100644 index 0000000000..2826f258db --- /dev/null +++ b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.html @@ -0,0 +1,18 @@ +
+ + + + + + + + + + + + + + + + +
diff --git a/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.scss b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.scss new file mode 100644 index 0000000000..7bb594da30 --- /dev/null +++ b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-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-custom-sample/grid-cell-merge-custom-sample.component.spec.ts b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.spec.ts new file mode 100644 index 0000000000..fe6102fcdb --- /dev/null +++ b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; + +import { GridCellMergeCustomSampleComponent } from './grid-cell-merge-custom-sample.component'; + +describe('GridGroupBySample', () => { + let component: GridCellMergeCustomSampleComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [GridCellMergeCustomSampleComponent] +}) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GridCellMergeCustomSampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts new file mode 100644 index 0000000000..59688f8c1b --- /dev/null +++ b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts @@ -0,0 +1,52 @@ +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, GridSelectionMode, IgxGridComponent, ISortingExpression, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent, GridCellMergeMode, IgxSelectComponent, IgxSelectItemComponent, IgxGridToolbarComponent, IgxLabelDirective, DefaultMergeStrategy } from 'igniteui-angular'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-cell-merge-custom-sample', + styleUrls: ['./grid-cell-merge-custom-sample.component.scss'], + templateUrl: './grid-cell-merge-custom-sample.component.html', + imports: [ + IgxGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent + ] +}) +export class GridCellMergeCustomSampleComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public cellMergeMode: GridCellMergeMode = 'always'; + public perProjectMergeStrategy = new PerProjectMergeStrategy(); + constructor() { + this.data = [ + { ActionID: "1", ProjectName: "IOT Switch Project", ActionName: "Data Import", Type: "Request", Priority: "Low", Status: "New", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, + { ActionID: "2", ProjectName: "IOT Switch Project", ActionName: "Reports", Type: "Request", Priority: "Low", Status: "New", Created: new Date("2017-03-14"), LastEdit: new Date("2017-03-15") }, + { ActionID: "4", ProjectName: "IOT Switch Project", ActionName: "Multiple Settings", Type: "Request", Priority: "Low", Status: "Rejected", Created: new Date("2017-04-05"), LastEdit: new Date("2017-04-30") }, + { ActionID: "3", ProjectName: "IOT Switch Project", ActionName: "Data Archiving", Type: "Request", Priority: "Medium", Status: "New", Created: new Date("2017-08-21"), LastEdit: new Date("2017-09-08") }, + { ActionID: "5", ProjectName: "IOT Switch Project", ActionName: "Main Menu: Return Button", Type: "Bug", Priority: "Medium", Status: "Fixed", Created: new Date("2017-06-17"), LastEdit: new Date("2017-07-03") }, + { ActionID: "6", ProjectName: "IOT Switch Project", ActionName: "Auto Turn Off", Type: "Bug", Priority: "Medium", Status: "New", Created: new Date("2017-04-12"), LastEdit: new Date("2017-05-27") }, + { ActionID: "7", ProjectName: "VR Device", ActionName: "Higher DRI", Type: "Request", Priority: "Medium", Status: "New", Created: new Date("2016-08-11"), LastEdit: new Date("2016-08-11") }, + { ActionID: "8", ProjectName: "VR Device", ActionName: "Accessible Power Button", Type: "Request", Priority: "Medium", Status: "New", Created: new Date("2016-07-13"), LastEdit: new Date("2016-07-14") }, + { ActionID: "9", ProjectName: "VR Device", ActionName: "Additional options", Type: "Request", Priority: "High", Status: "Rejected", Created: new Date("2016-09-02"), LastEdit: new Date("2016-09-08") }, + { ActionID: "10", ProjectName: "VR Device", ActionName: "Data Log", Type: "Request", Priority: "High", Status: "New", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, + { ActionID: "12", ProjectName: "VR Device", ActionName: "Motion Blur", Type: "Bug", Priority: "High", Status: "New", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, + { ActionID: "11", ProjectName: "VR Device", ActionName: "Left Sensors Delay", Type: "Bug", Priority: "High", Status: "Fixed", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, + ]; + } +} + +export class PerProjectMergeStrategy extends DefaultMergeStrategy { + /* Merge only cells within their respective projects */ + public override comparer(prevRecord: any, record: any, field: string): boolean { + const a = prevRecord[field]; + const b = record[field]; + const projA = prevRecord['ProjectName']; + const projB = record['ProjectName']; + return a === b && projA === projB; + } +} diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts index d19a9189b6..51a0dd2e96 100644 --- a/src/app/grid/grid-routes-data.ts +++ b/src/app/grid/grid-routes-data.ts @@ -3,6 +3,7 @@ export const gridsRoutesData = { 'grid-groupby': { displayName: 'Grid GroupBy', parentName: 'Grid' }, 'grid-cellMerge': { displayName: 'Grid Cell Merge', parentName: 'Grid' }, + 'grid-cellMerge-custom': { displayName: 'Grid Cell Merge Custom', parentName: 'Grid' }, 'grid-groupby-custom': {displayName: 'Grid GroupBy Custom', parentName: 'Grid'}, 'grid-groupby-paging': { displayName: 'Grid GroupBy Paging', parentName: 'Grid' }, 'grid-groupby-styling': { displayName: 'Grid GroupBy Styling', parentName: 'Grid' }, diff --git a/src/app/grid/grids.routes.ts b/src/app/grid/grids.routes.ts index 838f93dc2c..bc636cf6c0 100644 --- a/src/app/grid/grids.routes.ts +++ b/src/app/grid/grids.routes.ts @@ -132,6 +132,7 @@ import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-e import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sample/grid-state-persistance-sample.component'; import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-cascading-combos.component'; import { GridCellMergeSampleComponent } from './grid-cell-merge-sample/grid-cell-merge-sample.component'; +import { GridCellMergeCustomSampleComponent } from './grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component'; // tslint:enable:max-line-length @@ -161,6 +162,11 @@ export const GridsRoutes: Routes = [ data: gridsRoutesData['grid-cellMerge'], path: 'grid-cellMerge' }, + { + component: GridCellMergeCustomSampleComponent, + data: gridsRoutesData['grid-cellMerge-custom'], + path: 'grid-cellMerge-custom' + }, { component: GridGroupByStylingComponent, data: gridsRoutesData['grid-groupby-styling'], From 1975882f912ac5df44ca6db69275929679ef9b85 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 1 Aug 2025 11:06:30 +0300 Subject: [PATCH 4/8] chore(*): Add treegrid cell merge sample. --- ...tree-grid-cell-merge-sample.component.html | 36 +++++++++++++++++ ...tree-grid-cell-merge-sample.component.scss | 11 +++++ .../tree-grid-cell-merge-sample.component.ts | 40 +++++++++++++++++++ src/app/tree-grid/tree-grid-routes-data.ts | 1 + src/app/tree-grid/tree-grid.routes.ts | 6 +++ 5 files changed, 94 insertions(+) create mode 100644 src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.html create mode 100644 src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.scss create mode 100644 src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.ts 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..51cca29a28 --- /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..4e04a40ef5 --- /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: 'Merge always', value: GridCellMergeMode.always }, { name: 'Merge on sort', value: GridCellMergeMode.onSort }]; + + public mergeStrategies = [{ name: 'Default Merge Strategy', value: new DefaultTreeGridMergeStrategy() }, { name: 'By Level Merge 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' } ]; From 95c138249e475997e7fbfcdf294951d7bb4f0564 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 1 Aug 2025 11:11:46 +0300 Subject: [PATCH 5/8] chore(*): Adjust text in sample drop-down. --- .../tree-grid-cell-merge-sample.component.html | 2 +- .../tree-grid-cell-merge-sample.component.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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 index 51cca29a28..8acfe7060e 100644 --- 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 @@ -4,7 +4,7 @@ [cellMergeMode]="cellMergeMode" [mergeStrategy]="mergeStrategy"> - + @for (type of mergeTypes; track type) { {{type.name}} 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 index 4e04a40ef5..9840e32ad4 100644 --- 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 @@ -30,9 +30,9 @@ export class TreeGridCellMergeComponent { dir: SortingDirection.Asc, fieldName: 'Country' } ]; - public mergeTypes = [{ name: 'Merge always', value: GridCellMergeMode.always }, { name: 'Merge on sort', value: GridCellMergeMode.onSort }]; + public mergeTypes = [{ name: 'Always', value: GridCellMergeMode.always }, { name: 'On sort', value: GridCellMergeMode.onSort }]; - public mergeStrategies = [{ name: 'Default Merge Strategy', value: new DefaultTreeGridMergeStrategy() }, { name: 'By Level Merge Strategy', value: new ByLevelTreeGridMergeStrategy() }]; + 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; From d2c26bb21d066a1393410282a4c315a7a0e523a2 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 1 Aug 2025 16:57:18 +0300 Subject: [PATCH 6/8] chore(*): Add hierarchical grid sample with cell merge. --- src/app/data/hierarchical-data.ts | 12 +++++ ...ierarchical-grid-cell-merge.component.html | 44 +++++++++++++++++++ ...ierarchical-grid-cell-merge.component.scss | 3 ++ .../hierarchical-grid-cell-merge.component.ts | 40 +++++++++++++++++ .../hierarchical-grid-routes-data.ts | 1 + .../hierarchical-grid.routes.ts | 6 +++ 6 files changed, 106 insertions(+) create mode 100644 src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.html create mode 100644 src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.scss create mode 100644 src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.ts diff --git a/src/app/data/hierarchical-data.ts b/src/app/data/hierarchical-data.ts index 44eafa8165..1de06f7f4e 100644 --- a/src/app/data/hierarchical-data.ts +++ b/src/app/data/hierarchical-data.ts @@ -364,6 +364,18 @@ export const HIERARCHICAL_DATA = [ Country: 'Italy', Phone: '011-4988260', Fax: '011-4988261' + }, + { + ID: "EASTC", + CompanyName: "Eastern Connection", + ContactName: "Ann Devon", + ContactTitle: 'Sales Representative', + Address: 'Via Monte Bianco 34', + City: 'Torino', Region: null, + PostalCode: '10100', + Country: 'Italy', + Phone: '011-4988260', + Fax: '011-4988261' } ]; diff --git a/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.html b/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.html new file mode 100644 index 0000000000..bdbc7acb34 --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-cell-merge/hierarchical-grid-cell-merge.component.html @@ -0,0 +1,44 @@ +
+ + + + + @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' } ]; From 901529ddd69e21f5948c2a2eecdc6e33a2e9d8a5 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Fri, 29 Aug 2025 19:00:54 +0300 Subject: [PATCH 7/8] fix(*): fixing lint error --- .../grid-cell-merge-custom-sample.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts index 59688f8c1b..8230efcd82 100644 --- a/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts +++ b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts @@ -35,7 +35,7 @@ export class GridCellMergeCustomSampleComponent { { ActionID: "9", ProjectName: "VR Device", ActionName: "Additional options", Type: "Request", Priority: "High", Status: "Rejected", Created: new Date("2016-09-02"), LastEdit: new Date("2016-09-08") }, { ActionID: "10", ProjectName: "VR Device", ActionName: "Data Log", Type: "Request", Priority: "High", Status: "New", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, { ActionID: "12", ProjectName: "VR Device", ActionName: "Motion Blur", Type: "Bug", Priority: "High", Status: "New", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, - { ActionID: "11", ProjectName: "VR Device", ActionName: "Left Sensors Delay", Type: "Bug", Priority: "High", Status: "Fixed", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, + { ActionID: "11", ProjectName: "VR Device", ActionName: "Left Sensors Delay", Type: "Bug", Priority: "High", Status: "Fixed", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") } ]; } } From 26a5785c109f19b2dbd248cfc62fa0f6aa3d30c6 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Mon, 1 Sep 2025 16:11:35 +0300 Subject: [PATCH 8/8] feat(cell-merging): adding live-editing configs for the remaining samples --- live-editing/configs/GridConfigGenerator.ts | 14 +++++++++++++- .../configs/HierarchicalGridConfigGenerator.ts | 9 +++++++++ live-editing/configs/TreeGridConfigGenerator.ts | 9 +++++++++ package-lock.json | 8 ++++---- package.json | 2 +- .../grid-cell-merge-custom-sample.component.ts | 11 ++++------- .../grid-cell-merge-sample.component.ts | 14 ++++++++++++-- 7 files changed, 52 insertions(+), 15 deletions(-) diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts index b0722ac9c5..be4e7ad12b 100644 --- a/live-editing/configs/GridConfigGenerator.ts +++ b/live-editing/configs/GridConfigGenerator.ts @@ -44,7 +44,7 @@ import { IgcFormsModule } from 'igniteui-angular'; import { Config, IConfigGenerator } from 'igniteui-live-editing' -import { BaseAppConfig } from './BaseConfig';; +import { BaseAppConfig } from './BaseConfig'; export class GridConfigGenerator implements IConfigGenerator { public additionalImports = { IgxPreventDocumentScrollDirective: '../../src/app/directives/prevent-scroll.directive', @@ -868,6 +868,18 @@ export class GridConfigGenerator implements IConfigGenerator { appConfig: BaseAppConfig })); + configs.push(new Config({ + component: 'GridCellMergeCustomSampleComponent', + additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/customers.ts'], + appConfig: BaseAppConfig + })); + + configs.push(new Config({ + component: 'GridCellMergeSampleComponent', + additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/invoiceData.ts'], + appConfig: BaseAppConfig + })); + return configs; } } diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts index 1fee598c61..5139e20e8e 100644 --- a/live-editing/configs/HierarchicalGridConfigGenerator.ts +++ b/live-editing/configs/HierarchicalGridConfigGenerator.ts @@ -645,6 +645,15 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator { component: 'HGridSummaryExportComponent' })); + configs.push(new Config({ + component: 'HGridCellMergeComponent', + appConfig: BaseAppConfig, + additionalFiles: [ + '/src/app/directives/prevent-scroll.directive.ts', + '/src/app/data/hierarchical-data.ts' + ] + })); + return configs; } } diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts index 98db1eaaab..335491d454 100644 --- a/live-editing/configs/TreeGridConfigGenerator.ts +++ b/live-editing/configs/TreeGridConfigGenerator.ts @@ -791,6 +791,15 @@ export class TreeGridConfigGenerator implements IConfigGenerator { shortenComponentPathBy: '/tree-grid/' })); + configs.push(new Config({ + component: 'TreeGridCellMergeComponent', + appConfig: BaseAppConfig, + additionalFiles: [ + '/src/app/directives/prevent-scroll.directive.ts', + '/src/app/tree-grid/data/employees-flat-detailed.ts' + ] + })); + return configs; } } diff --git a/package-lock.json b/package-lock.json index 658f0af792..e74b656f65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "igniteui-angular-extras": "^20.0.0", "igniteui-angular-i18n": "^20.1.0-rc.0", "igniteui-dockmanager": "^1.17.0", - "igniteui-live-editing": "^3.1.0-rc.0", + "igniteui-live-editing": "^3.1.0-rc.1", "igniteui-webcomponents": "^6.2.0", "minireset.css": "0.0.6", "rxjs": "^7.8.2", @@ -10633,9 +10633,9 @@ "license": "Apache-2.0" }, "node_modules/igniteui-live-editing": { - "version": "3.1.0-rc.0", - "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.1.0-rc.0.tgz", - "integrity": "sha512-UbM9mZOReyOKx2lEjuAU1lLlfLSV8akJIJWgZrTX72E/bFrvMMf16SPbmPFMM1q41nkghoLsMklfaf9bBsUXkA==", + "version": "3.1.0-rc.1", + "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.1.0-rc.1.tgz", + "integrity": "sha512-mqkTCn2kfEDLCeQLQ58/bOLVY2npmLufMsOvtOikTM3ivxH7DZxSd5hfLiC7/EDFYAOTC/TGOH/cTkHk+145DQ==", "license": "MIT" }, "node_modules/igniteui-theming": { diff --git a/package.json b/package.json index d99154d39d..a3c3601034 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "igniteui-angular-extras": "^20.0.0", "igniteui-angular-i18n": "^20.1.0-rc.0", "igniteui-dockmanager": "^1.17.0", - "igniteui-live-editing": "^3.1.0-rc.0", + "igniteui-live-editing": "^3.1.0-rc.1", "igniteui-webcomponents": "^6.2.0", "minireset.css": "0.0.6", "rxjs": "^7.8.2", diff --git a/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts index 8230efcd82..ac5bb9557d 100644 --- a/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts +++ b/src/app/grid/grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component.ts @@ -1,9 +1,6 @@ -import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { DefaultSortingStrategy, GridSelectionMode, IgxGridComponent, ISortingExpression, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent, GridCellMergeMode, IgxSelectComponent, IgxSelectItemComponent, IgxGridToolbarComponent, IgxLabelDirective, DefaultMergeStrategy } from 'igniteui-angular'; -import { INVOICE_DATA } from '../../data/invoiceData'; +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { IgxGridComponent, IgxColumnComponent, GridCellMergeMode,DefaultMergeStrategy } from 'igniteui-angular'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; -import { FormsModule } from '@angular/forms'; - @Component({ encapsulation: ViewEncapsulation.None, @@ -14,14 +11,14 @@ import { FormsModule } from '@angular/forms'; IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent - ] + ] }) export class GridCellMergeCustomSampleComponent { @ViewChild('grid1', { read: IgxGridComponent, static: true }) public grid1: IgxGridComponent; public data; public cellMergeMode: GridCellMergeMode = 'always'; - public perProjectMergeStrategy = new PerProjectMergeStrategy(); + public perProjectMergeStrategy = new PerProjectMergeStrategy(); constructor() { this.data = [ { ActionID: "1", ProjectName: "IOT Switch Project", ActionName: "Data Import", Type: "Request", Priority: "Low", Status: "New", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, diff --git a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts index e08a5f7da9..65d04deece 100644 --- a/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts +++ b/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts @@ -1,5 +1,15 @@ -import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { DefaultSortingStrategy, GridSelectionMode, IgxGridComponent, ISortingExpression, SortingDirection, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent, GridCellMergeMode, IgxSelectComponent, IgxSelectItemComponent, IgxGridToolbarComponent, IgxLabelDirective } from 'igniteui-angular'; +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + GridSelectionMode, + IgxGridComponent, + IgxColumnComponent, + IgxCellTemplateDirective, + GridCellMergeMode, + IgxSelectComponent, + IgxSelectItemComponent, + IgxGridToolbarComponent, + IgxLabelDirective +} from 'igniteui-angular'; import { INVOICE_DATA } from '../../data/invoiceData'; import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; import { FormsModule } from '@angular/forms';