chore(Samples): update samples with new def of pagination in th grid

Author: ddincheva

src/app/grid-cellEditing/grid-cellEditing.component.html

@@ -37,6 +37,7 @@ <h3>Grid with primary key ProductID</h3>
     </igx-column>
     <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" width="200px" [hasSummary]="true" [editable]="true" [resizable]="true" [movable]="true">
     </igx-column>
+    <igx-paginator></igx-paginator>
 </igx-grid>
 <input id="updBtn" type="button" (click)="updRecord()" value="Update cell/record">
 <button (click)="addRow()">Add Row</button>

src/app/grid-column-moving/grid-column-moving.sample.html

@@ -12,6 +12,7 @@
             <div class="density-chooser">
                 <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
             </div>
+            <button (click)="pagingEnabled = !pagingEnabled">Enable Paging</button>
             <igx-grid
                 #grid1
                 [columnSelection]="'single'"
@@ -23,7 +24,6 @@
                 (columnMovingEnd)="columnMovingEnd()"
                 [rowSelection] ="'multiple'"
                 [filterMode]="'excelStyleFilter'"
-                [paging]="true"
                 [rowEditable]="true"
                 [width]="'900px'"
                 [primaryKey]="'ID'"
@@ -50,6 +50,8 @@
                                                     [hasSummary]="c.summary"
                                                     [dataType]="c.type">
                 </igx-column>
+                <igx-paginator *ngIf="pagingEnabled" [totalRecords]="grid1.totalRecords">
+                </igx-paginator>
             </igx-grid>
             Drag mode: {{ grid1.selectionService.dragMode }}
             <div class="sample-buttons">
@@ -59,6 +61,8 @@
                 <button igxButton="raised" (click)="grid1.getSelectedData()">Get Selected Data</button>
                 <button igxButton="raised" (click)="grid1.getSelectedRanges()">Get Selected Ranges</button>
             </div>
+            <igx-paginator *ngIf="pagingEnabled" [totalRecords]="35" >
+            </igx-paginator>
 
             <span>Grid with MCH</span>
             <div  class="sample-wrapper">

src/app/grid-column-moving/grid-column-moving.sample.ts

@@ -19,6 +19,7 @@ export class GridColumnMovingSampleComponent implements OnInit {
     public gridMCHNewIndex = 0;
     public density: DisplayDensity = 'comfortable';
     public displayDensities;
+    public pagingEnabled = false;
 
     public mchData = [
         /* eslint-disable max-len */

src/app/grid/grid.sample.ts

@@ -99,7 +99,6 @@ export class GridSampleComponent implements OnInit, AfterViewInit {
         this.grid2.sortingExpressions = [];
         this.grid3.sortingExpressions = [{ fieldName: 'ProductID', dir: SortingDirection.Desc, ignoreCase: true,
             strategy: DefaultSortingStrategy.instance() }];
-        this.grid3.paging = true;
 
         this.selectionMode = GridSelectionMode.multiple;
     }
@@ -137,21 +136,15 @@ export class GridSampleComponent implements OnInit, AfterViewInit {
     }
 
     public onPagination(event) {
-        if (!this.grid2.paging) {
-            return;
-        }
         const total = this.grid2.data.length;
         const state = this.grid2.pagingState;
         if ((state.recordsPerPage * event) >= total) {
             return;
         }
-        this.grid2.paginate(event);
+        this.grid2.paginator.paginate(event);
     }
 
     public onPerPage(event) {
-        if (!this.grid2.paging) {
-            return;
-        }
         const total = this.grid2.data.length;
         const state = this.grid2.pagingState;
         if ((state.index * event) >= total) {