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

fix(grid height): add height to grid and light-dark mode

Author: zdrawku

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

@@ -1,4 +1,4 @@
-<div class="grid__wrapper" style='width: 100%;'>
+<div [ngClass]="{'grid__wrapper': true, 'dark-theme': dark === true }" 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

@@ -1,6 +1,7 @@
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import { IgxColumnComponent, IgxGridComponent } from 'igniteui-angular';
 import { DATA } from '../../data/customers';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
     encapsulation: ViewEncapsulation.None,
@@ -14,8 +15,12 @@ import { DATA } from '../../data/customers';
 export class PinningToolbarSampleComponent implements OnInit{
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
 
+    public dark = false;
     public data: any[];
     public columns: any[];
+
+    constructor(private activatedRoute: ActivatedRoute) {}
+
     public ngOnInit(): void {
         this.columns = [
             { field: 'CompanyName', header: 'Company Name', width: 300 },
@@ -29,6 +34,10 @@ export class PinningToolbarSampleComponent implements OnInit{
             { field: 'Fax', header: 'Fax', width: 150 }
         ];
         this.data = DATA;
+
+        this.activatedRoute.queryParams.subscribe(params => {
+            this.dark = !!params.dark;
+        });
     }
 
     public toggleColumn(col: IgxColumnComponent) {

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

@@ -1,4 +1,4 @@
-<div class="grid__wrapper">
+<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>

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

@@ -2,7 +2,12 @@
     width: 100%;
 }
 
+:host {
+    height: 110vh;
+}
+
 .grid__wrapper {
-    margin: 0 auto;
-    padding: 16px;
+    margin: 0 auto 4rem;
+    padding: 1rem;
+    height: 100%;
 }

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

@@ -1,15 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CUSTOMERS } from '../../data/hierarchical-data';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
     selector: 'app-hierarchical-grid-toolbar-pinning',
     styleUrls: ['./hierarchical-grid-toolbar-pinning.component.scss'],
     templateUrl: 'hierarchical-grid-toolbar-pinning.component.html'
 })
-export class HGridToolbarPinningComponent {
+export class HGridToolbarPinningComponent implements OnInit {
     public localdata;
+    public dark = false;
 
-    constructor() {
+    constructor(private activatedRoute: ActivatedRoute) {
         this.localdata = CUSTOMERS;
     }
+
+    public ngOnInit(): void {
+        this.activatedRoute.queryParams.subscribe(params => {
+            this.dark = !!params.dark;
+        });
+    }
+
 }
+

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

@@ -1,4 +1,4 @@
-<div class="grid__wrapper">
+<div [ngClass]="{'grid__wrapper': true, 'dark-theme': dark === true }">
     <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

@@ -1,6 +1,7 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, OnInit } from '@angular/core';
 import { IgxTreeGridComponent } from 'igniteui-angular';
 import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
     providers: [],
@@ -10,11 +11,18 @@ import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detaile
 
 })
 
-export class TreeGridPinningToolbarSampleComponent {
+export class TreeGridPinningToolbarSampleComponent implements OnInit {
     @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent;
     public data: any[];
+    public dark = false;
 
-    constructor() {
+    constructor(private activatedRoute: ActivatedRoute) {
         this.data = generateEmployeeDetailedFlatData();
     }
+
+    public ngOnInit(): void {
+        this.activatedRoute.queryParams.subscribe(params => {
+            this.dark = !!params.dark;
+        });
+    }
 }