Add cell merge samples

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'
     }
 ];
 

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

@@ -0,0 +1,18 @@
+<div class="grid__wrapper">
+  <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'570px'" [mergeStrategy]="perProjectMergeStrategy" [cellMergeMode]="cellMergeMode" >
+    <igx-column field="ActionID" header="Order ID" [hidden]="true">
+    </igx-column>
+    <igx-column field="ProjectName" header="Project Name" [merge]="true">
+    </igx-column>
+    <igx-column field="Type" header="Type" [merge]="true">
+    </igx-column>
+    <igx-column field="Priority" header="Priority" [merge]="true">
+    </igx-column>
+    <igx-column field="Status" header="Status" [merge]="true">
+    </igx-column>
+    <igx-column field="ActionName" header="Action">
+    </igx-column>
+    <igx-column field="Created" header="Created" [dataType]="'date'">
+    </igx-column>
+  </igx-grid>
+</div>

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;
+}

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<GridCellMergeCustomSampleComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+    imports: [GridCellMergeCustomSampleComponent]
+})
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GridCellMergeCustomSampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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;
+    }
+}

src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html

@@ -0,0 +1,44 @@
+<div class="grid__wrapper">
+  <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'570px'" [rowSelection]="selectionMode"  [cellMergeMode]="cellMergeMode">
+    <igx-column field="OrderID" header="Order ID" [hidden]="true" >
+    </igx-column>
+    <igx-column field="ShipperName" header="Shipper Name" width="250px" [merge]="true" sortable="true">
+    </igx-column>
+    <igx-column field="Salesperson" header="Salesperson" width="250px" [merge]="true" sortable="true">
+    </igx-column>
+    <igx-column field="Discontinued" header="Discontinued" width="200px" [merge]="true" sortable="true">
+      <ng-template igxCell let-cell="cell" let-val>
+        @if (val) {
+          <img src="assets/images/grid/active.png" title="Continued" alt="Continued" />
+        }
+        @if (!val) {
+          <img src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
+        }
+      </ng-template>
+    </igx-column>
+    <igx-column field="UnitPrice" header="Unit Price" width="150px" [formatter]="formatCurrency" dataType="number">
+    </igx-column>
+    <igx-column field="Quantity" header="Quantity" width="150px" dataType="number">
+    </igx-column>
+    <igx-column field="ShipCountry" header="Ship Country" width="200px" [merge]="true">
+    </igx-column>
+    <igx-column field="ShipCity" header="Ship City" width="250px" [merge]="true">
+    </igx-column>
+    <igx-column field="ShipName" header="Ship Name" width="250px">
+    </igx-column>
+    <igx-column field="PostalCode" header="Postal Code" width="200px">
+    </igx-column>
+    <igx-column field="OrderDate" header="Order Date" width="200px" [formatter]="formatDate">
+    </igx-column>
+    <igx-grid-toolbar>
+        <igx-select [(ngModel)]="cellMergeMode">
+          <label igxLabel>Select Merge Type</label>
+          @for (type of mergeTypes; track type) {
+            <igx-select-item [value]="type.value">
+              {{type.name}}
+            </igx-select-item>
+          }
+        </igx-select>
+      </igx-grid-toolbar>
+  </igx-grid>
+</div>

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;
+}

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<GridCellMergeSampleComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+    imports: [GridCellMergeSampleComponent]
+})
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GridCellMergeSampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.ts

@@ -0,0 +1,41 @@
+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 { INVOICE_DATA } from '../../data/invoiceData';
+import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
+import { FormsModule } from '@angular/forms';
+
+
+@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,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxLabelDirective,
+        IgxGridToolbarComponent,
+        FormsModule
+        ]
+})
+export class GridCellMergeSampleComponent {
+    @ViewChild('grid1', { read: IgxGridComponent, static: true })
+    public grid1: IgxGridComponent;
+    public data;
+    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;
+    }
+    public formatDate(val: Date) {
+        return new Intl.DateTimeFormat('en-US').format(val);
+    }
+    public formatCurrency(value: number) {
+        return '$' + value.toFixed(2);
+    }
+}

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

@@ -2,6 +2,8 @@
 
 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' },

src/app/grid/grids.routes.ts

@@ -131,6 +131,8 @@ 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';
+import { GridCellMergeCustomSampleComponent } from './grid-cell-merge-custom-sample/grid-cell-merge-custom-sample.component';
 
 // tslint:enable:max-line-length
 
@@ -155,6 +157,16 @@ export const GridsRoutes: Routes = [
         data: gridsRoutesData['grid-groupby'],
         path: 'grid-groupby'
     },
+    {
+        component: GridCellMergeSampleComponent,
+        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'],

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

@@ -0,0 +1,44 @@
+<div class="grid__wrapper">
+    <igx-hierarchical-grid [igxPreventDocumentScroll]="true" #hGrid [data]="localData" [moving]="true" [sortingExpressions]="sortExpr"
+        [cellMergeMode]="cellMergeMode" [height]="'740px'" [width]="'100%'" [allowFiltering]="true" >
+        <igx-grid-toolbar>
+            <igx-select [(ngModel)]="cellMergeMode">
+                <label igxLabel>Select Merge Type Root</label>
+                @for (type of mergeTypes; track type) {
+                <igx-select-item [value]="type.value">
+                    {{type.name}}
+                </igx-select-item>
+                }
+            </igx-select>
+            <igx-select (selectionChanging)="strategySelection($event, hGrid)">
+                <label igxLabel>Select Merge Type Child</label>
+                @for (type of mergeTypes; track type) {
+                <igx-select-item [value]="type.value" [selected]="type.value === cellMergeModeRowIsland">
+                    {{type.name}}
+                </igx-select-item>
+                }
+            </igx-select>
+        </igx-grid-toolbar>
+        <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]="cellMergeModeRowIsland">
+            <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/hierarchical-grid-cell-merge.component.scss

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