Skip to content

Commit 20ac142

Browse files
MayaKirovaMayaKirova
authored
Add cell merge samples (#3709)
1 parent e367c8d commit 20ac142

26 files changed

+528
-6
lines changed

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import {
4444
IgcFormsModule
4545
} from 'igniteui-angular';
4646
import { Config, IConfigGenerator } from 'igniteui-live-editing'
47-
import { BaseAppConfig } from './BaseConfig';;
47+
import { BaseAppConfig } from './BaseConfig';
4848
export class GridConfigGenerator implements IConfigGenerator {
4949
public additionalImports = {
5050
IgxPreventDocumentScrollDirective: '../../src/app/directives/prevent-scroll.directive',
@@ -868,6 +868,18 @@ export class GridConfigGenerator implements IConfigGenerator {
868868
appConfig: BaseAppConfig
869869
}));
870870

871+
configs.push(new Config({
872+
component: 'GridCellMergeCustomSampleComponent',
873+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/customers.ts'],
874+
appConfig: BaseAppConfig
875+
}));
876+
877+
configs.push(new Config({
878+
component: 'GridCellMergeSampleComponent',
879+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/invoiceData.ts'],
880+
appConfig: BaseAppConfig
881+
}));
882+
871883
return configs;
872884
}
873885
}

‎live-editing/configs/HierarchicalGridConfigGenerator.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -645,6 +645,15 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
645645
component: 'HGridSummaryExportComponent'
646646
}));
647647

648+
configs.push(new Config({
649+
component: 'HGridCellMergeComponent',
650+
appConfig: BaseAppConfig,
651+
additionalFiles: [
652+
'/src/app/directives/prevent-scroll.directive.ts',
653+
'/src/app/data/hierarchical-data.ts'
654+
]
655+
}));
656+
648657
return configs;
649658
}
650659
}

‎live-editing/configs/TreeGridConfigGenerator.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -791,6 +791,15 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
791791
shortenComponentPathBy: '/tree-grid/'
792792
}));
793793

794+
configs.push(new Config({
795+
component: 'TreeGridCellMergeComponent',
796+
appConfig: BaseAppConfig,
797+
additionalFiles: [
798+
'/src/app/directives/prevent-scroll.directive.ts',
799+
'/src/app/tree-grid/data/employees-flat-detailed.ts'
800+
]
801+
}));
802+
794803
return configs;
795804
}
796805
}

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"igniteui-angular-extras": "^20.0.0",
7878
"igniteui-angular-i18n": "^20.1.0-rc.0",
7979
"igniteui-dockmanager": "^1.17.0",
80-
"igniteui-live-editing": "^3.1.0-rc.0",
80+
"igniteui-live-editing": "^3.1.0-rc.1",
8181
"igniteui-webcomponents": "^6.2.0",
8282
"minireset.css": "0.0.6",
8383
"rxjs": "^7.8.2",

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,18 @@ export const HIERARCHICAL_DATA = [
364364
Country: 'Italy',
365365
Phone: '011-4988260',
366366
Fax: '011-4988261'
367+
},
368+
{
369+
ID: "EASTC",
370+
CompanyName: "Eastern Connection",
371+
ContactName: "Ann Devon",
372+
ContactTitle: 'Sales Representative',
373+
Address: 'Via Monte Bianco 34',
374+
City: 'Torino', Region: null,
375+
PostalCode: '10100',
376+
Country: 'Italy',
377+
Phone: '011-4988260',
378+
Fax: '011-4988261'
367379
}
368380
];
369381

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="grid__wrapper">
2+
<igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'570px'" [mergeStrategy]="perProjectMergeStrategy" [cellMergeMode]="cellMergeMode" >
3+
<igx-column field="ActionID" header="Order ID" [hidden]="true">
4+
</igx-column>
5+
<igx-column field="ProjectName" header="Project Name" [merge]="true">
6+
</igx-column>
7+
<igx-column field="Type" header="Type" [merge]="true">
8+
</igx-column>
9+
<igx-column field="Priority" header="Priority" [merge]="true">
10+
</igx-column>
11+
<igx-column field="Status" header="Status" [merge]="true">
12+
</igx-column>
13+
<igx-column field="ActionName" header="Action">
14+
</igx-column>
15+
<igx-column field="Created" header="Created" [dataType]="'date'">
16+
</igx-column>
17+
</igx-grid>
18+
</div>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.grid-controls {
2+
display: flex;
3+
flex-flow: column nowrap;
4+
justify-content: space-between;
5+
margin: 0 16px 24px;
6+
7+
igx-switch {
8+
margin-top: 24px;
9+
}
10+
11+
}
12+
13+
.grid__wrapper {
14+
padding-top: 16px;
15+
margin: 0 16px;
16+
}
17+
18+
.header-icon {
19+
font-size: 1.4em;
20+
width: 1.1em;
21+
height: 1.1em;
22+
float: right;
23+
cursor: pointer;
24+
}
25+
26+
.header {
27+
height: 100%;
28+
}
29+
30+
.igx-grid__th .title {
31+
width: 100%;
32+
cursor: auto;
33+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2+
3+
import { GridCellMergeCustomSampleComponent } from './grid-cell-merge-custom-sample.component';
4+
5+
describe('GridGroupBySample', () => {
6+
let component: GridCellMergeCustomSampleComponent;
7+
let fixture: ComponentFixture<GridCellMergeCustomSampleComponent>;
8+
9+
beforeEach(waitForAsync(() => {
10+
TestBed.configureTestingModule({
11+
imports: [GridCellMergeCustomSampleComponent]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(GridCellMergeCustomSampleComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
2+
import { IgxGridComponent, IgxColumnComponent, GridCellMergeMode,DefaultMergeStrategy } from 'igniteui-angular';
3+
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
4+
5+
@Component({
6+
encapsulation: ViewEncapsulation.None,
7+
selector: 'app-grid-cell-merge-custom-sample',
8+
styleUrls: ['./grid-cell-merge-custom-sample.component.scss'],
9+
templateUrl: './grid-cell-merge-custom-sample.component.html',
10+
imports: [
11+
IgxGridComponent,
12+
IgxPreventDocumentScrollDirective,
13+
IgxColumnComponent
14+
]
15+
})
16+
export class GridCellMergeCustomSampleComponent {
17+
@ViewChild('grid1', { read: IgxGridComponent, static: true })
18+
public grid1: IgxGridComponent;
19+
public data;
20+
public cellMergeMode: GridCellMergeMode = 'always';
21+
public perProjectMergeStrategy = new PerProjectMergeStrategy();
22+
constructor() {
23+
this.data = [
24+
{ 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") },
25+
{ 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") },
26+
{ 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") },
27+
{ 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") },
28+
{ 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") },
29+
{ 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") },
30+
{ 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") },
31+
{ 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") },
32+
{ 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") },
33+
{ 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") },
34+
{ 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") },
35+
{ 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") }
36+
];
37+
}
38+
}
39+
40+
export class PerProjectMergeStrategy extends DefaultMergeStrategy {
41+
/* Merge only cells within their respective projects */
42+
public override comparer(prevRecord: any, record: any, field: string): boolean {
43+
const a = prevRecord[field];
44+
const b = record[field];
45+
const projA = prevRecord['ProjectName'];
46+
const projB = record['ProjectName'];
47+
return a === b && projA === projB;
48+
}
49+
}

0 commit comments

Comments
 (0)