Merge pull request #3258 from IgniteUI/EWhite/3250-grid-samples-height

fix(hierarchical grid): add richer data and a few new columns

Author: hanastasov

src/app/data/hierarchical-data.ts

@@ -395,19 +395,28 @@ export const CUSTOMERS = [{
             ProductID: 11,
             UnitPrice: 14.0000,
             Quantity: 12,
-            Discount: 0.0000000e+000
+            Discount: 0.0000000e+000,
+            Weight: 2.5,
+            Length: 25.6,
+            TotalPrice: 225.75
         },
         {
             ProductID: 42,
             UnitPrice: 9.8000,
             Quantity: 10,
-            Discount: 0.0000000e+000
+            Discount: 0.0000000e+000,
+            Weight: 2.1,
+            Length: 29.3,
+            TotalPrice: 250.50
         },
         {
             ProductID: 72,
             UnitPrice: 34.8000,
             Quantity: 5,
-            Discount: 0.0000000e+000
+            Discount: 0.0000000e+000,
+            Weight: 2.7,
+            Length: 24.8,
+            TotalPrice: 220.25
         }
         ]
     }]
@@ -440,12 +449,18 @@ export const CUSTOMERS = [{
             ProductID: 14,
             UnitPrice: 18.6000,
             Quantity: 9,
-            Discount: 0.0000000e+000
+            Discount: 0.0000000e+000,
+            Weight: 3.2,
+            Length: 28.6,
+            TotalPrice: 253.75
         }, {
             ProductID: 51,
             UnitPrice: 42.4000,
             Quantity: 40,
-            Discount: 0.0000000e+000
+            Discount: 0.0000000e+000,
+            Weight: 2.5,
+            Length: 25.6,
+            TotalPrice: 225.75
         }]
     }]
 }, {
@@ -478,17 +493,26 @@ export const CUSTOMERS = [{
             ProductID: 41,
             UnitPrice: 7.7000,
             Quantity: 10,
-            Discount: 0.0000000e+000
+            Discount: 0.0000000e+000,
+            Weight: 2.9,
+            Length: 26.9,
+            TotalPrice: 233.50
         }, {
             ProductID: 51,
             UnitPrice: 42.4000,
             Quantity: 35,
-            Discount: 1.5000001e-001
+            Discount: 1.5000001e-001,
+            Weight: 3.5,
+            Length: 27.4,
+            TotalPrice: 261.25
         }, {
             ProductID: 65,
             UnitPrice: 16.8000,
             Quantity: 15,
-            Discount: 1.5000001e-001
+            Discount: 1.5000001e-001,
+            Weight: 2.2,
+            Length: 30.2,
+            TotalPrice: 249.75
         }]
     }]
 }, {
@@ -519,17 +543,26 @@ export const CUSTOMERS = [{
             ProductID: 22,
             UnitPrice: 16.8000,
             Quantity: 6,
-            Discount: 5.0000001e-002
+            Discount: 5.0000001e-002,
+            Weight: 2.6,
+            Length: 26.8,
+            TotalPrice: 226.50
         }, {
             ProductID: 57,
             UnitPrice: 15.6000,
             Quantity: 15,
-            Discount: 5.0000001e-002
+            Discount: 5.0000001e-002,
+            Weight: 3.1,
+            Length: 24.3,
+            TotalPrice: 219.25
         }, {
             ProductID: 65,
             UnitPrice: 16.8000,
             Quantity: 20,
-            Discount: 0.0000000e+000
+            Discount: 0.0000000e+000,
+            Weight: 2.4,
+            Length: 23.7,
+            TotalPrice: 207.00
         }]
     }]
 }, {

src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{'grid__wrapper': true, 'dark-theme': dark === true }" style='width: 100%;'>
+<div [ngClass]="{'grid__wrapper': true, 'dark-theme': useDarkTheme }" style='width: 100%;'>
     <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'480px'">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>

src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.ts

@@ -15,7 +15,7 @@ import { ActivatedRoute } from '@angular/router';
 export class PinningToolbarSampleComponent implements OnInit{
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
 
-    public dark = false;
+    public useDarkTheme: boolean = false;
     public data: any[];
     public columns: any[];
 
@@ -36,7 +36,7 @@ export class PinningToolbarSampleComponent implements OnInit{
         this.data = DATA;
 
         this.activatedRoute.queryParams.subscribe(params => {
-            this.dark = !!params.dark;
+            this.useDarkTheme = params.dark === 'true';
         });
     }
 

src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-toolbar-pinning.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{'grid__wrapper': true, 'dark-theme': dark === true }">
+<div [ngClass]="{'grid__wrapper': true, 'dark-theme': useDarkTheme }">
 <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  class="hierarchicalGrid" [data]="localdata" [autoGenerate]="false"
     [height]="'100%'" [width]="'100%'" #hierarchicalGrid>
         <igx-grid-toolbar>
@@ -31,6 +31,9 @@
                 <igx-column field="UnitPrice" header="Unit Price" width="150px"></igx-column>
                 <igx-column field="Quantity" width="150px"></igx-column>
                 <igx-column field="Discount" width="150px"></igx-column>
+                <igx-column field="Weight" width="150px"></igx-column>
+                <igx-column field="Length" width="150px"></igx-column>
+                <igx-column field="TotalPrice" width="150px"></igx-column>
         </igx-row-island>
     </igx-row-island>
 </igx-hierarchical-grid>

src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-toolbar-pinning.component.ts

@@ -9,15 +9,15 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class HGridToolbarPinningComponent implements OnInit {
     public localdata;
-    public dark = false;
+    public useDarkTheme: boolean = false;
 
     constructor(private activatedRoute: ActivatedRoute) {
         this.localdata = CUSTOMERS;
     }
 
     public ngOnInit(): void {
         this.activatedRoute.queryParams.subscribe(params => {
-            this.dark = !!params.dark;
+            this.useDarkTheme = params.dark === 'true';
         });
     }
 

src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-toolbar-pinning.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{'grid__wrapper': true, 'dark-theme': dark === true }">
+<div [ngClass]="{'grid__wrapper': true, 'dark-theme': useDarkTheme }">
     <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" height="600px"
         width="100%">
         <igx-grid-toolbar>

src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-toolbar-pinning.component.ts

@@ -14,15 +14,15 @@ import { ActivatedRoute } from '@angular/router';
 export class TreeGridPinningToolbarSampleComponent implements OnInit {
     @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent;
     public data: any[];
-    public dark = false;
+    public useDarkTheme: boolean = false;
 
     constructor(private activatedRoute: ActivatedRoute) {
         this.data = generateEmployeeDetailedFlatData();
     }
 
     public ngOnInit(): void {
         this.activatedRoute.queryParams.subscribe(params => {
-            this.dark = !!params.dark;
+            this.useDarkTheme = params.dark === 'true';
         });
     }
 }