Skip to content

Commit 9155ef4

Browse files
Merge pull request #1246 from IgniteUI/ddimitrov/columnGroupHeaderTemplateSample
Add column group header template samples
2 parents 3f882d4 + 577520d commit 9155ef4

22 files changed

+400
-2
lines changed

live-editing/configs/GridConfigGenerator.ts

+14-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,10 @@ import { GridToolbarSample1Component } from "../../src/app/grid/grid-toolbar-sam
116116
import { GridToolbarSample2Component } from "../../src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component";
117117
import { GridToolbarSample3Component } from "../../src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component";
118118
import { GridToolbarSample4Component } from "../../src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component";
119-
import { GridToolbarStyleComponent } from "../../src/app/grid/grid-toolbar-style/grid-toolbar-style.component"
119+
import { GridToolbarStyleComponent } from "../../src/app/grid/grid-toolbar-style/grid-toolbar-style.component";
120+
import {
121+
GridMultiColumnHeaderTemplateComponent
122+
} from "../../src/app/grid/multi-column-header-template/multi-column-header-template";
120123
import { GridMultiColumnHeadersComponent } from "../../src/app/grid/multi-column-headers/multi-column-headers";
121124
import { DataService } from "../../src/app/grid/services/data.service";
122125
import { RemoteFilteringService } from "../../src/app/grid/services/remoteFilteringService";
@@ -734,6 +737,16 @@ export class GridConfigGenerator implements IConfigGenerator {
734737
})
735738
}));
736739

740+
configs.push(new Config({
741+
component: GridMultiColumnHeaderTemplateComponent,
742+
additionalFiles: ["/src/app/grid/multi-column-header-template/data.ts"],
743+
appModuleConfig: new AppModuleConfig({
744+
imports: [GridMultiColumnHeaderTemplateComponent, IgxGridModule],
745+
ngDeclarations: [GridMultiColumnHeaderTemplateComponent],
746+
ngImports: [IgxGridModule]
747+
})
748+
}));
749+
737750
configs.push(new Config({
738751
component: GridClipboardSampleComponent,
739752
additionalFiles: ["/src/app/data/nwindData.ts"],

live-editing/configs/HierarchicalGridConfigGenerator.ts

+11
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { HGridCustomFilteringSampleComponent } from "../../src/app/hierarchical-
4040
import { HGridFilteringSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-filtering.component";
4141
import { HierarchicalGridLoDSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-lod/hierarchical-grid-lod.component";
4242
import { HGridMultiCellStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-multi-cell-style/hierarchical-grid-multi-cell-style.component";
43+
import { HGridMultiHeaderTemplateSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component";
4344
import { HGridMultiHeadersSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component";
4445
import { HGridPagingStyleSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component";
4546
import { HGridPagingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-paging/hierarchical-grid-paging.component";
@@ -423,6 +424,16 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
423424
shortenComponentPathBy: "/hierarchical-grid/"
424425
}));
425426

427+
configs.push(new Config({
428+
additionalFiles: ["/src/app/hierarchical-grid/data.ts"],
429+
appModuleConfig: new AppModuleConfig({
430+
imports: [IgxHierarchicalGridModule, HGridMultiHeaderTemplateSampleComponent],
431+
ngDeclarations: [HGridMultiHeaderTemplateSampleComponent],
432+
ngImports: [IgxHierarchicalGridModule]
433+
}),
434+
component: HGridMultiHeaderTemplateSampleComponent
435+
}));
436+
426437
return configs;
427438
}
428439
}

live-editing/configs/TreeGridConfigGenerator.ts

+13
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ import { TreeGridKBNavigationComponent } from "../../src/app/tree-grid/tree-grid
4949
import { TreeGridLoadOnDemandSampleComponent } from "../../src/app/tree-grid/tree-grid-load-on-demand-sample/tree-grid-load-on-demand-sample.component";
5050
import { TreeGridMultiCellSelectionStyleComponent } from "../../src/app/tree-grid/tree-grid-multi-cell-selection-style/tree-grid-multi-cell-selection-style.component";
5151
import { TreeGridMultiCellSelectionComponent } from "../../src/app/tree-grid/tree-grid-multi-cell-selection/tree-grid-multi-cell-selection.component";
52+
import { TreeGridMultiColumnHeaderTemplateSampleComponent } from "../../src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component";
5253
import { TreeGridMultiColumnHeadersSampleComponent } from "../../src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component";
5354
import { TreeGridPagingSampleComponent } from "../../src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component";
5455
import { TreeGridPagingStyleSampleComponent } from "../../src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component";
@@ -607,6 +608,18 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
607608
shortenComponentPathBy: "/tree-grid/"
608609
}));
609610

611+
// TreeGrid Multi Column Header Template sample
612+
configs.push(new Config({
613+
additionalFiles: ["/src/app/tree-grid/data/employees-flat-detailed.ts"],
614+
appModuleConfig: new AppModuleConfig({
615+
imports: [IgxTreeGridModule, TreeGridMultiColumnHeaderTemplateSampleComponent],
616+
ngDeclarations: [TreeGridMultiColumnHeaderTemplateSampleComponent],
617+
ngImports: [IgxTreeGridModule]
618+
}),
619+
component: TreeGridMultiColumnHeaderTemplateSampleComponent,
620+
shortenComponentPathBy: "/tree-grid/"
621+
}));
622+
610623
// TreeGrid Clipboard actions sample
611624
configs.push(new Config({
612625
additionalFiles: ["/src/app/tree-grid/tree-grid-childdatakey-sample/data.ts"],

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

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const gridsRoutesData = {
5454
"grid-nested-data-binding": { displayName: "Grid Nested Data Binding", parentName: "Grid" },
5555
"grid-composite-data-binding": { displayName: "Grid Composite Data Binding", parentName: "Grid" },
5656
"grid-contextmenu-sample": { displayName: "Grid Context Menu", parentName: "Grid" },
57+
"multi-column-header-template": { displayName: "Grid Multi Column Header Template", parentName: "Grid" },
5758
"grid-clipboard-operations-sample": { displayName: "Grid Clipboard Operations", parentName: "Grid" },
5859
"grid-toolbar-style": { displayName: "Grid Toolbar Style", parentName: "Grid" }
5960
};

src/app/grid/grids-routing.module.ts

+6
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import { GridToolbarSample2Component } from "./grid-toolbar-sample/grid-toolbar-
5252
import { GridToolbarSample3Component } from "./grid-toolbar-sample/grid-toolbar-sample-3.component";
5353
import { GridToolbarSample4Component } from "./grid-toolbar-sample/grid-toolbar-sample-4.component";
5454
import { GridToolbarStyleComponent } from "./grid-toolbar-style/grid-toolbar-style.component";
55+
import { GridMultiColumnHeaderTemplateComponent } from "./multi-column-header-template/multi-column-header-template";
5556
import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-column-headers";
5657

5758
import { CustomGridPagingStyleSample } from "./custom-grid-paging-style/custom-grid-paging-style.component";
@@ -321,6 +322,11 @@ export const gridsRoutes: Routes = [
321322
data: gridsRoutesData["custom-grid-paging-style"],
322323
path: "custom-grid-paging-style"
323324
},
325+
{
326+
component: GridMultiColumnHeaderTemplateComponent,
327+
data: gridsRoutesData["multi-column-header-template"],
328+
path: "multi-column-header-template"
329+
},
324330
{
325331
component: GridClipboardSampleComponent,
326332
data: gridsRoutesData["grid-clipboard-operations-sample"],

src/app/grid/grids.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ import { GridToolbarSample3Component } from "./grid-toolbar-sample/grid-toolbar-
6565
import { GridToolbarSample4Component } from "./grid-toolbar-sample/grid-toolbar-sample-4.component";
6666
import { GridToolbarStyleComponent } from "./grid-toolbar-style/grid-toolbar-style.component";
6767
import { GridsRoutingModule } from "./grids-routing.module";
68+
import { GridMultiColumnHeaderTemplateComponent } from "./multi-column-header-template/multi-column-header-template";
6869
import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-column-headers";
6970
import { DataService } from "./services/data.service";
7071

@@ -132,6 +133,7 @@ import { GridResizeLineStylingSampleComponent } from "./grid-resize-line-styling
132133
ContextmenuComponent,
133134
CustomGridPagingStyleSample,
134135
GridRowReorderComponent,
136+
GridMultiColumnHeaderTemplateComponent,
135137
GridClipboardSampleComponent,
136138
GridToolbarStyleComponent
137139
],
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export const data = [
2+
// tslint:disable:max-line-length
3+
{ ID: "ALFKI", CompanyName: "Alfreds Futterkiste", ContactName: "Maria Anders", ContactTitle: "Sales Representative", Address: "Obere Str. 57", City: "Berlin", Region: null, PostalCode: "12209", Country: "Germany", Phone: "030-0074321", Fax: "030-0076545" },
4+
{ ID: "ANATR", CompanyName: "Ana Trujillo Emparedados y helados", ContactName: "Ana Trujillo", ContactTitle: "Owner", Address: "Avda. de la Constitución 2222", City: "México D.F.", Region: null, PostalCode: "05021", Country: "Mexico", Phone: "(5) 555-4729", Fax: "(5) 555-3745" },
5+
{ ID: "ANTON", CompanyName: "Antonio Moreno Taquería", ContactName: "Antonio Moreno", ContactTitle: "Owner", Address: "Mataderos 2312", City: "México D.F.", Region: null, PostalCode: "05023", Country: "Mexico", Phone: "(5) 555-3932", Fax: null },
6+
{ ID: "AROUT", CompanyName: "Around the Horn", ContactName: "Thomas Hardy", ContactTitle: "Sales Representative", Address: "120 Hanover Sq.", City: "London", Region: null, PostalCode: "WA1 1DP", Country: "UK", Phone: "(171) 555-7788", Fax: "(171) 555-6750" },
7+
{ ID: "BERGS", CompanyName: "Berglunds snabbköp", ContactName: "Christina Berglund", ContactTitle: "Order Administrator", Address: "Berguvsvägen 8", City: "Luleå", Region: null, PostalCode: "S-958 22", Country: "Sweden", Phone: "0921-12 34 65", Fax: "0921-12 34 67" },
8+
{ ID: "BLAUS", CompanyName: "Blauer See Delikatessen", ContactName: "Hanna Moos", ContactTitle: "Sales Representative", Address: "Forsterstr. 57", City: "Mannheim", Region: null, PostalCode: "68306", Country: "Germany", Phone: "0621-08460", Fax: "0621-08924" },
9+
{ ID: "BLONP", CompanyName: "Blondesddsl père et fils", ContactName: "Frédérique Citeaux", ContactTitle: "Marketing Manager", Address: "24, place Kléber", City: "Strasbourg", Region: null, PostalCode: "67000", Country: "France", Phone: "88.60.15.31", Fax: "88.60.15.32" },
10+
{ ID: "BOLID", CompanyName: "Bólido Comidas preparadas", ContactName: "Martín Sommer", ContactTitle: "Owner", Address: "C/ Araquil, 67", City: "Madrid", Region: null, PostalCode: "28023", Country: "Spain", Phone: "(91) 555 22 82", Fax: "(91) 555 91 99" },
11+
{ ID: "BONAP", CompanyName: "Bon app'", ContactName: "Laurence Lebihan", ContactTitle: "Owner", Address: "12, rue des Bouchers", City: "Marseille", Region: null, PostalCode: "13008", Country: "France", Phone: "91.24.45.40", Fax: "91.24.45.41" },
12+
{ ID: "BOTTM", CompanyName: "Bottom-Dollar Markets", ContactName: "Elizabeth Lincoln", ContactTitle: "Accounting Manager", Address: "23 Tsawassen Blvd.", City: "Tsawassen", Region: "BC", PostalCode: "T2F 8M4", Country: "Canada", Phone: "(604) 555-4729", Fax: "(604) 555-3745" },
13+
{ ID: "BSBEV", CompanyName: "B's Beverages", ContactName: "Victoria Ashworth", ContactTitle: "Sales Representative", Address: "Fauntleroy Circus", City: "London", Region: null, PostalCode: "EC2 5NT", Country: "UK", Phone: "(171) 555-1212", Fax: null },
14+
{ ID: "CACTU", CompanyName: "Cactus Comidas para llevar", ContactName: "Patricio Simpson", ContactTitle: "Sales Agent", Address: "Cerrito 333", City: "Buenos Aires", Region: null, PostalCode: "1010", Country: "Argentina", Phone: "(1) 135-5555", Fax: "(1) 135-4892" },
15+
{ ID: "CENTC", CompanyName: "Centro comercial Moctezuma", ContactName: "Francisco Chang", ContactTitle: "Marketing Manager", Address: "Sierras de Granada 9993", City: "México D.F.", Region: null, PostalCode: "05022", Country: "Mexico", Phone: "(5) 555-3392", Fax: "(5) 555-7293" },
16+
{ ID: "CHOPS", CompanyName: "Chop-suey Chinese", ContactName: "Yang Wang", ContactTitle: "Owner", Address: "Hauptstr. 29", City: "Bern", Region: null, PostalCode: "3012", Country: "Switzerland", Phone: "0452-076545", Fax: null },
17+
{ ID: "COMMI", CompanyName: "Comércio Mineiro", ContactName: "Pedro Afonso", ContactTitle: "Sales Associate", Address: "Av. dos Lusíadas, 23", City: "Sao Paulo", Region: "SP", PostalCode: "05432-043", Country: "Brazil", Phone: "(11) 555-7647", Fax: null },
18+
{ ID: "CONSH", CompanyName: "Consolidated Holdings", ContactName: "Elizabeth Brown", ContactTitle: "Sales Representative", Address: "Berkeley Gardens 12 Brewery", City: "London", Region: null, PostalCode: "WX1 6LT", Country: "UK", Phone: "(171) 555-2282", Fax: "(171) 555-9199" },
19+
{ ID: "DRACD", CompanyName: "Drachenblut Delikatessen", ContactName: "Sven Ottlieb", ContactTitle: "Order Administrator", Address: "Walserweg 21", City: "Aachen", Region: null, PostalCode: "52066", Country: "Germany", Phone: "0241-039123", Fax: "0241-059428" },
20+
{ ID: "DUMON", CompanyName: "Du monde entier", ContactName: "Janine Labrune", ContactTitle: "Owner", Address: "67, rue des Cinquante Otages", City: "Nantes", Region: null, PostalCode: "44000", Country: "France", Phone: "40.67.88.88", Fax: "40.67.89.89" },
21+
{ ID: "EASTC", CompanyName: "Eastern Connection", ContactName: "Ann Devon", ContactTitle: "Sales Agent", Address: "35 King George", City: "London", Region: null, PostalCode: "WX3 6FW", Country: "UK", Phone: "(171) 555-0297", Fax: "(171) 555-3373" },
22+
{ ID: "ERNSH", CompanyName: "Ernst Handel", ContactName: "Roland Mendel", ContactTitle: "Sales Manager", Address: "Kirchgasse 6", City: "Graz", Region: null, PostalCode: "8010", Country: "Austria", Phone: "7675-3425", Fax: "7675-3426" },
23+
{ ID: "FAMIA", CompanyName: "Familia Arquibaldo", ContactName: "Aria Cruz", ContactTitle: "Marketing Assistant", Address: "Rua Orós, 92", City: "Sao Paulo", Region: "SP", PostalCode: "05442-030", Country: "Brazil", Phone: "(11) 555-9857", Fax: null },
24+
{ ID: "FISSA", CompanyName: "FISSA Fabrica Inter. Salchichas S.A.", ContactName: "Diego Roel", ContactTitle: "Accounting Manager", Address: "C/ Moralzarzal, 86", City: "Madrid", Region: null, PostalCode: "28034", Country: "Spain", Phone: "(91) 555 94 44", Fax: "(91) 555 55 93" },
25+
{ ID: "FOLIG", CompanyName: "Folies gourmandes", ContactName: "Martine Rancé", ContactTitle: "Assistant Sales Agent", Address: "184, chaussée de Tournai", City: "Lille", Region: null, PostalCode: "59000", Country: "France", Phone: "20.16.10.16", Fax: "20.16.10.17" },
26+
{ ID: "FOLKO", CompanyName: "Folk och fä HB", ContactName: "Maria Larsson", ContactTitle: "Owner", Address: "Åkergatan 24", City: "Bräcke", Region: null, PostalCode: "S-844 67", Country: "Sweden", Phone: "0695-34 67 21", Fax: null },
27+
{ ID: "FRANK", CompanyName: "Frankenversand", ContactName: "Peter Franken", ContactTitle: "Marketing Manager", Address: "Berliner Platz 43", City: "München", Region: null, PostalCode: "80805", Country: "Germany", Phone: "089-0877310", Fax: "089-0877451" },
28+
{ ID: "FRANR", CompanyName: "France restauration", ContactName: "Carine Schmitt", ContactTitle: "Marketing Manager", Address: "54, rue Royale", City: "Nantes", Region: null, PostalCode: "44000", Country: "France", Phone: "40.32.21.21", Fax: "40.32.21.20" },
29+
{ ID: "FRANS", CompanyName: "Franchi S.p.A.", ContactName: "Paolo Accorti", ContactTitle: "Sales Representative", Address: "Via Monte Bianco 34", City: "Torino", Region: null, PostalCode: "10100", Country: "Italy", Phone: "011-4988260", Fax: "011-4988261" }
30+
];
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<div class="grid__wrapper">
2+
<ng-template #columnGroupTemplate let-col>
3+
<div class="column-group-template__container">
4+
<igx-icon [attr.draggable]="false"
5+
(click)="toggleColumnGroup(col)"
6+
class="column-group-template__icon">
7+
{{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}}</igx-icon>
8+
{{col.header}}
9+
</div>
10+
</ng-template>
11+
12+
<igx-grid [rowSelectable]="false" #grid height="480px" [data]="data" displayDensity="compact" [allowFiltering]="true">
13+
<igx-column [movable]="true" [resizable]="true" field="ID" [filterable]="false"></igx-column>
14+
<igx-column-group [movable]="true" [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
15+
<igx-column [movable]="true" sortable="true" resizable="true" field="CompanyName"></igx-column>
16+
<igx-column-group [movable]="true" header="Person Details">
17+
<igx-column [movable]="true" [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
18+
<igx-column [movable]="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
19+
</igx-column-group>
20+
</igx-column-group>
21+
<igx-column-group header="Address Information" [headerTemplate]="columnGroupTemplate">
22+
<igx-column sortable="true" resizable="true" field="Location" hidden="true"></igx-column>
23+
<igx-column sortable="true" resizable="true" field="Phone" hidden="true"></igx-column>
24+
<igx-column-group header="Location">
25+
<igx-column sortable="true" resizable="true" field="Country"></igx-column>
26+
<igx-column sortable="true" resizable="true" field="Region"></igx-column>
27+
<igx-column sortable="true" resizable="true" field="City"></igx-column>
28+
<igx-column sortable="true" resizable="true" field="Address"></igx-column>
29+
</igx-column-group>
30+
<igx-column-group header="Contact Information">
31+
<igx-column sortable="true" resizable="true" field="Phone"></igx-column>
32+
<igx-column sortable="true" resizable="true" field="Fax"></igx-column>
33+
<igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
34+
</igx-column-group>
35+
</igx-column-group>
36+
</igx-grid>
37+
</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.grid__wrapper {
2+
margin: 10px;
3+
}
4+
5+
.column-group-template__container {
6+
display: flex;
7+
align-items: center;
8+
}
9+
10+
.column-group-template__icon {
11+
cursor: pointer;
12+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Component, ViewChild } from "@angular/core";
2+
import { IgxColumnGroupComponent, IgxGridComponent } from "igniteui-angular";
3+
import { data } from "./data";
4+
5+
@Component({
6+
selector: "multi-column-header-template",
7+
styleUrls: [ "multi-column-header-template.scss" ],
8+
templateUrl: "multi-column-header-template.html"
9+
})
10+
export class GridMultiColumnHeaderTemplateComponent {
11+
12+
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
13+
public grid: IgxGridComponent;
14+
public data: any[] = data;
15+
public columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
16+
17+
constructor() {
18+
for (const item of this.data) {
19+
item.Location = `${item.Address}, ${item.City}, ${item.Country}`;
20+
}
21+
}
22+
23+
public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) {
24+
const columns = columnGroup.children.toArray();
25+
26+
if (columnGroup.header === "General Information") {
27+
const col = columns[1];
28+
col.hidden = !col.hidden;
29+
} else if (columnGroup.header === "Address Information") {
30+
for (const col of columns) {
31+
col.hidden = !col.hidden;
32+
}
33+
}
34+
35+
this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
36+
}
37+
}

0 commit comments

Comments
 (0)