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

Author: multignite

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/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': dark === 'true' }">
 <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,16 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class HGridToolbarPinningComponent implements OnInit {
     public localdata;
-    public dark = false;
+    public dark = "";
 
     constructor(private activatedRoute: ActivatedRoute) {
         this.localdata = CUSTOMERS;
     }
 
     public ngOnInit(): void {
         this.activatedRoute.queryParams.subscribe(params => {
-            this.dark = !!params.dark;
+            console.log(this.activatedRoute.queryParams);
+            this.dark = params.dark;
         });
     }