chore(*): fixing demos used for test

Author: Konstantin Dinev

src/app/grid-filtering/grid-filtering.sample.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild, OnInit, HostBinding } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { FilterMode, FilteringExpressionsTree, FilteringLogic, FormattedValuesFilteringStrategy, GridSelectionMode, IChangeCheckboxEventArgs, IGX_GRID_DIRECTIVES, IgxButtonGroupComponent, IgxCheckboxComponent, IgxGridComponent, IgxIconComponent, IgxStringFilteringOperand } from 'igniteui-angular';
+import { FilterMode, FilteringExpressionsTree, FilteringLogic, FormattedValuesFilteringStrategy, GridSelectionMode, IChangeCheckboxEventArgs, IGX_GRID_DIRECTIVES, IgxButtonDirective, IgxButtonGroupComponent, IgxCheckboxComponent, IgxGridComponent, IgxIconComponent, IgxStringFilteringOperand } from 'igniteui-angular';
 import { SAMPLE_DATA } from '../shared/sample-data';
 
 
@@ -9,7 +9,14 @@ import { SAMPLE_DATA } from '../shared/sample-data';
     selector: 'app-grid-filtering-sample',
     styleUrls: ['grid-filtering.sample.scss'],
     templateUrl: 'grid-filtering.sample.html',
-    imports: [FormsModule, IGX_GRID_DIRECTIVES, IgxCheckboxComponent, IgxButtonGroupComponent, IgxIconComponent]
+    imports: [
+        FormsModule,
+        IGX_GRID_DIRECTIVES,
+        IgxCheckboxComponent,
+        IgxButtonGroupComponent,
+        IgxIconComponent,
+        IgxButtonDirective
+    ]
 })
 export class GridFilteringComponent implements OnInit {
 

src/app/grid-percentage-columns/grid-percantge-widths.sample.html

@@ -1,7 +1,7 @@
 <div class="wrapper">
     <div class="sample-content">
         <div class="sample-column">
-            <igx-grid [data]="data" [locale]="locale" [allowFiltering]="true" [moving]="true" [filterMode]="'excelStyleFilter'" width="420px" height="600px">
+            <igx-grid [data]="data" [locale]="locale" [allowFiltering]="true" [moving]="true" [filterMode]="'excelStyleFilter'" width="100%" height="600px">
                 <igx-column field="ProductName" [pinned]="false" header="Product Name" width="20%" [dataType]="'string'" [sortable]="true" [hasSummary]="false" [editable]="true" [filterable]="true" >
                 </igx-column>
                 <igx-column field="UnitsInStock" [pinned]="false"  header="Units In Stock" width="20%" dataType="currency" [pipeArgs]="pipeArgs" [sortable]="true" [hasSummary]="true" [editable]="true" [filterable]="true" >
@@ -11,10 +11,10 @@
                         {{val | date:'dd/MM/yyyy'}}
                     </ng-template>
                 </igx-column>
-                <igx-column field="Discontinued"   header="Discontinued" width="10%" [dataType]="'boolean'" minWidth="20px"
+                <igx-column field="Discontinued" header="Discontinued" width="10%" [dataType]="'boolean'" minWidth="20px"
                     [sortable]="false" [hasSummary]="false" [editable]="true" [filterable]="false">
                 </igx-column>
-                <igx-column field="ReorderLevel" header="Reorder Level"  dataType="percent" [pipeArgs]="pipeArgs" [hasSummary]="true" width="10%" [sortable]="false"  [editable]="true" >
+                <igx-column field="ReorderLevel" header="Reorder Level" dataType="percent" [pipeArgs]="pipeArgs" [hasSummary]="true" width="10%" [sortable]="false"  [editable]="true" >
                 </igx-column>
                 <igx-column field="SupplierID" header="SupplierID"  width="10%" [sortable]="false"  [editable]="true">
                 </igx-column>