Add cell merge samples

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

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

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

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",

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,49 @@
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { IgxGridComponent, IgxColumnComponent, GridCellMergeMode,DefaultMergeStrategy } from 'igniteui-angular';
+import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
+
+@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,51 @@
+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';
+
+
+@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);
+    }
+}