samples(grid): add sample for multi column header template IgniteUI/i…

…gniteui-angular#3344
IgniteUI · Jul 1, 2019 · 80062c8 · 80062c8
1 parent 98df0a8
commit 80062c8
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 1 deletion.
diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts
@@ -119,6 +119,9 @@ import { GridToolbarSample1Component } from "../../src/app/grid/grid-toolbar-sam
 import { GridToolbarSample2Component } from "../../src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component";
 import { GridToolbarSample3Component } from "../../src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component";
 import { GridToolbarSample4Component } from "../../src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component";
+import {
+    GridMultiColumnHeaderTemplateComponent
+} from "../../src/app/grid/multi-column-header-template/multi-column-header-template";
 import { GridMultiColumnHeadersComponent } from "../../src/app/grid/multi-column-headers/multi-column-headers";
 import { DataService } from "../../src/app/grid/services/data.service";
 import { RemoteFilteringService } from "../../src/app/grid/services/remoteFilteringService";
@@ -710,6 +713,16 @@ export class GridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            component: GridMultiColumnHeaderTemplateComponent,
+            additionalFiles: ["/src/app/grid/multi-column-header-template/data.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [GridMultiColumnHeaderTemplateComponent, IgxGridModule],
+                ngDeclarations: [GridMultiColumnHeaderTemplateComponent],
+                ngImports: [IgxGridModule]
+            })
+        }));
+
         return configs;
     }
 }
diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts
@@ -51,5 +51,6 @@ export const gridsRoutesData = {
     "custom-grid-paging-style": { displayName: "Custom Grid Paging Style", parentName: "Grid" },
     "grid-nested-data-binding": { displayName: "Grid Nested Data Binding", parentName: "Grid" },
     "grid-composite-data-binding": { displayName: "Grid Composite Data Binding", parentName: "Grid" },
-    "grid-contextmenu-sample": { displayName: "Grid Context Menu", parentName: "Grid" }
+    "grid-contextmenu-sample": { displayName: "Grid Context Menu", parentName: "Grid" },
+    "multi-column-header-template": { displayName: "Grid Multi Column Header Template", parentName: "Grid" }
 };
diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts
@@ -48,6 +48,7 @@ import { GridToolbarSample1Component } from "./grid-toolbar-sample/grid-toolbar-
 import { GridToolbarSample2Component } from "./grid-toolbar-sample/grid-toolbar-sample-2.component";
 import { GridToolbarSample3Component } from "./grid-toolbar-sample/grid-toolbar-sample-3.component";
 import { GridToolbarSample4Component } from "./grid-toolbar-sample/grid-toolbar-sample-4.component";
+import { GridMultiColumnHeaderTemplateComponent } from "./multi-column-header-template/multi-column-header-template";
 import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-column-headers";
 
 import { CustomGridPagingStyleSample } from "./custom-grid-paging-style/custom-grid-paging-style.component";
@@ -306,6 +307,11 @@ export const gridsRoutes: Routes = [
         component: CustomGridPagingStyleSample,
         data: gridsRoutesData["custom-grid-paging-style"],
         path: "custom-grid-paging-style"
+    },
+    {
+        component: GridMultiColumnHeaderTemplateComponent,
+        data: gridsRoutesData["multi-column-header-template"],
+        path: "multi-column-header-template"
     }
 ];
 

diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts
@@ -61,6 +61,7 @@ import { GridToolbarSample2Component } from "./grid-toolbar-sample/grid-toolbar-
 import { GridToolbarSample3Component } from "./grid-toolbar-sample/grid-toolbar-sample-3.component";
 import { GridToolbarSample4Component } from "./grid-toolbar-sample/grid-toolbar-sample-4.component";
 import { GridsRoutingModule } from "./grids-routing.module";
+import { GridMultiColumnHeaderTemplateComponent } from "./multi-column-header-template/multi-column-header-template";
 import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-column-headers";
 import { DataService } from "./services/data.service";
 
@@ -126,6 +127,7 @@ import { GridResizeLineStylingSampleComponent } from "./grid-resize-line-styling
         ContextmenuComponent,
         CustomGridPagingStyleSample,
         GridRowReorderComponent
+        GridMultiColumnHeaderTemplateComponent
     ],
     imports: [
         CommonModule,

diff --git a/src/app/grid/multi-column-header-template/data.ts b/src/app/grid/multi-column-header-template/data.ts
@@ -0,0 +1,30 @@
+export const data = [
+    // tslint:disable:max-line-length
+    { 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" },
+    { 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" },
+    { 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 },
+    { 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" },
+    { 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" },
+    { 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" },
+    { 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" },
+    { 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" },
+    { 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" },
+    { 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" },
+    { 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 },
+    { 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" },
+    { 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" },
+    { 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 },
+    { 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 },
+    { 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" },
+    { 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" },
+    { 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" },
+    { 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" },
+    { 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" },
+    { 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 },
+    { 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" },
+    { 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" },
+    { 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 },
+    { 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" },
+    { 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" },
+    { 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" }
+];
diff --git a/src/app/grid/multi-column-header-template/multi-column-header-template.html b/src/app/grid/multi-column-header-template/multi-column-header-template.html
@@ -0,0 +1,35 @@
+<div class="grid__wrapper">
+    <ng-template #columnGroupTemplate let-col>
+        <div class="column-group-template__container">
+            <igx-icon [attr.draggable]="false"
+                      (click)="toggleColumnGroup(col)"
+                      class="column-group-template__icon">
+                      {{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}}</igx-icon>
+            {{col.header}}
+        </div>
+    </ng-template>
+
+    <igx-grid [rowSelectable]="false" #grid height="480px" [data]="data" displayDensity="compact" [allowFiltering]="true">
+        <igx-column [movable]="true" [resizable]="true" field="ID" [filterable]="false"></igx-column>
+        <igx-column-group [movable]="true" [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
+            <igx-column [movable]="true" sortable="true" resizable="true" field="CompanyName"></igx-column>
+            <igx-column-group [movable]="true" header="Person Details">
+                <igx-column [movable]="true" [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
+                <igx-column [movable]="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+        <igx-column-group header="Address Information" [headerTemplate]="columnGroupTemplate">
+            <igx-column-group header="Location">
+                <igx-column sortable="true" resizable="true" field="Country"></igx-column>
+                <igx-column sortable="true" resizable="true" field="Region"></igx-column>
+                <igx-column sortable="true" resizable="true" field="City"></igx-column>
+                <igx-column sortable="true" resizable="true" field="Address"></igx-column>
+            </igx-column-group>
+            <igx-column-group header="Contact Information">
+                <igx-column sortable="true" resizable="true" field="Phone"></igx-column>
+                <igx-column sortable="true" resizable="true" field="Fax"></igx-column>
+                <igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+    </igx-grid>
+</div>
diff --git a/src/app/grid/multi-column-header-template/multi-column-header-template.scss b/src/app/grid/multi-column-header-template/multi-column-header-template.scss
@@ -0,0 +1,3 @@
+.grid__wrapper {
+    margin: 0 10px;
+}
diff --git a/src/app/grid/multi-column-header-template/multi-column-header-template.ts b/src/app/grid/multi-column-header-template/multi-column-header-template.ts
@@ -0,0 +1,31 @@
+import { Component, ViewChild } from "@angular/core";
+import { IgxColumnGroupComponent, IgxGridComponent } from "igniteui-angular";
+import { data } from "./data";
+
+@Component({
+    selector: "multi-column-header-template",
+    styleUrls: [ "multi-column-header-template.scss" ],
+    templateUrl: "multi-column-header-template.html"
+})
+export class GridMultiColumnHeaderTemplateComponent {
+
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+    public grid: IgxGridComponent;
+    public data = data;
+    public columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
+
+    public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) {
+        const columns = columnGroup.children.toArray();
+
+        if (columnGroup.header === "General Information") {
+            const col = columns[1];
+            col.hidden = !col.hidden;
+        } else if (columnGroup.header === "Address Information") {
+            for (const col of columns) {
+                col.hidden = !col.hidden;
+            }
+        }
+
+        this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
+    }
+}