Merge branch 'vNext' of https://github.com/IgniteUI/igniteui-angular-…

…samples into simeonoff/live-editing-libsass
IgniteUI · Jul 22, 2021 · 269c0ff · 269c0ff
2 parents 6d67672 + a53f1e4
commit 269c0ff
Show file tree

Hide file tree

Showing 61 changed files with 269 additions and 254 deletions.
diff --git a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html
@@ -134,7 +134,7 @@
         <igx-grid #grid4 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
             [columnSelection]="'multiple'" [cellSelection]="'none'">
-<igx-paginator></igx-paginator>
+            <igx-paginator></igx-paginator>
             <igx-column [field]="'id'" [width]="'70px'" [hidden]='true' [sortable]='true'></igx-column>
             <igx-column [field]="'category'" [width]="'120px'" [sortable]='true' [groupable]='true'></igx-column>
             <igx-column [field]="'type'" [width]="'100px'" [sortable]='true' [filterable]='false' [groupable]='true'>

diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html
@@ -10,9 +10,8 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
         </igx-input-group>
     </div>
     <div class="grid__wrapper__inner">
-        <igx-grid #grid1 igxPreventDocumentScroll [data]="localData" [perPage]="10" height="600px" displayDensity="cosy" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true">
-<igx-paginator></igx-paginator>
-
+        <igx-grid #grid1 igxPreventDocumentScroll [data]="localData" height="600px" displayDensity="cosy" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true">
+            <igx-paginator [perPage]="10"></igx-paginator>
             <igx-column header="Rank" [width]="'12%'" field="Id" sortable="true" [filterable]="false">
                 <ng-template igxCell let-cell="cell">
                     <div class="cell__inner">

diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.ts b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.ts
@@ -110,7 +110,7 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
     }
 
     public isTop3(cell): boolean {
-        const top = this.grid1.page === 0 && cell.row.index < 4;
+        const top = this.grid1.paginator.page === 0 && cell.row.index < 4;
         return top;
     }
 
@@ -220,7 +220,7 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
         }
         if (this.isFinished) {
             this.live = false;
-            this.grid1.page = 0;
+            this.grid1.paginator.page = 0;
             return;
         }
         this.updateData();
@@ -242,7 +242,7 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
         // move grid to next page to monitor players who still run
         const firstOnPage = this.grid1.getCellByColumn(0, 'TrackProgress');
         if (firstOnPage && firstOnPage.value === 100) {
-            this.grid1.page = this.grid1.page + 1;
+            this.grid1.paginator.page = this.grid1.paginator.page + 1;
         }
 
         // show Top 3 players after race has finished

diff --git a/.../app/tree-grid/tree-grid-childdatakey-sample/tree-grid-childdatakey-sample.component.html b/.../app/tree-grid/tree-grid-childdatakey-sample/tree-grid-childdatakey-sample.component.html
@@ -1,7 +1,7 @@
 <div class="grid__wrapper">
     <igx-tree-grid igxPreventDocumentScroll #treeGrid [data]="localData" childDataKey="Employees" width="100%" height="800px"
                    [autoGenerate]="false" [rowSelection]="selectionMode" [allowFiltering]="true">
-<igx-paginator></igx-paginator>
+        <igx-paginator></igx-paginator>
         <igx-grid-toolbar>
             <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
             <igx-grid-toolbar-actions>

diff --git a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [perPage]="10" height="520px" width="100%" displayDensity="cosy">
-<igx-paginator></igx-paginator>
+        <igx-paginator></igx-paginator>
         <igx-column header="Rank" headerClasses="myClass" field="Id" sortable="true"></igx-column>
         <igx-column field="Name" header="Athlete"></igx-column>
         <igx-column field="BeatsPerMinute" header="Beats per minute" dataType="number">

diff --git a/src/app/grid/grid-allData-summary/grid-allData-summary.component.html b/src/app/grid/grid-allData-summary/grid-allData-summary.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" height="600px" width="100%">
-<igx-paginator *ngIf="false"></igx-paginator>
+        <igx-paginator *ngIf="false"></igx-paginator>
         <igx-column field="ProductID" header="Product ID" width="17%" [headerClasses]="'prodId'">
         </igx-column>
         <igx-column field="ProductName" header="Product Name" width="17%" [headerClasses]="'prodId'" >

diff --git a/src/app/grid/grid-batchEditing-remotePaging/batch-editing-remote-paging.component.html b/src/app/grid/grid-batchEditing-remotePaging/batch-editing-remote-paging.component.html
@@ -1,40 +1,35 @@
 <div class="grid__wrapper">
-
-      <igx-grid igxPreventDocumentScroll #grid1 [batchEditing]="true" [data]="data | async" width="100%" height="580px" [perPage]="perPage" [rowEditable]="true" [primaryKey]="'ID'">
-<igx-paginator>
-<!-- Auto migrated template content. Please, check your bindings! -->
-
-<igx-paginator-content>
-
-        <igx-paginator #paginator [totalRecords]="totalCount" [page]="page" [(perPage)]="perPage" [selectOptions]="selectOptions" [displayDensity]="grid1.displayDensity" (pageChange)="paginate($event)">
+    <igx-grid igxPreventDocumentScroll #grid1 [batchEditing]="true" [data]="data | async" width="100%" height="580px" [pagingMode]="mode"
+        [rowEditable]="true" [primaryKey]="'ID'">
+        <igx-paginator #paginator 
+            [totalRecords]="totalCount"
+            [page]="page"
+            [(perPage)]="perPage"
+            [selectOptions]="selectOptions"
+            [displayDensity]="grid1.displayDensity"
+            (pageChange)="paginate($event)">
         </igx-paginator>
-
-        </igx-paginator-content>
-</igx-paginator>
         <igx-grid-toolbar>
-
             <button igxButton (click)="addRow()">Add Row</button>
             <button igxButton [disabled]="!grid1.transactions.canUndo" (click)="undo()">Undo</button>
             <button igxButton [disabled]="!grid1.transactions.canRedo" (click)="redo()">Redo</button>
             <button igxButton [disabled]="!hasTransactions" (click)="openCommitDialog()">Commit</button>
-
         </igx-grid-toolbar>
         <igx-column [pinned]="true" [filterable]="false" [editable]="false">
             <ng-template igxCell let-cell="cell" let-val>
-                  <button igxButton (click)="deleteRow(cell.cellID.rowID)" [disabled]="cell.row.deleted">Delete</button>
-              </ng-template>
-          </igx-column>
-          <igx-column field="ID" editable="false"></igx-column>
-          <igx-column field="ProductName"></igx-column>
-          <igx-column field="QuantityPerUnit"></igx-column>
-          <igx-column field="SupplierName"></igx-column>
-          <igx-column field="UnitsInStock"></igx-column>
-          <igx-column field="Rating"></igx-column>
-      </igx-grid>
-
+                <button igxButton (click)="deleteRow(cell.cellID.rowID)" [disabled]="cell.row.deleted">Delete</button>
+            </ng-template>
+        </igx-column>
+        <igx-column field="ID" editable="false"></igx-column>
+        <igx-column field="ProductName"></igx-column>
+        <igx-column field="QuantityPerUnit"></igx-column>
+        <igx-column field="SupplierName"></igx-column>
+        <igx-column field="UnitsInStock"></igx-column>
+        <igx-column field="Rating"></igx-column>
+    </igx-grid>
     <igx-dialog title="Submit the following transactions?">
-        <igx-grid igxPreventDocumentScroll #dialogGrid [data]="transactionsData" [rowHeight]="64"
-            [primaryKey]="'id'" width="600px" height="300px" [emptyGridMessage]="'No available transactions'">
+        <igx-grid igxPreventDocumentScroll #dialogGrid [data]="transactionsData" [rowHeight]="64" [primaryKey]="'id'"
+            width="600px" height="300px" [emptyGridMessage]="'No available transactions'">
             <igx-column field="id" header="ID" [dataType]="'string'" width="100px"></igx-column>
             <igx-column field="type" header="Type" width="150px" [sortable]="true">
             </igx-column>
@@ -50,4 +45,4 @@
             <button igxButton (click)="cancel()">Cancel</button>
         </div>
     </igx-dialog>
-</div>
+</div>
diff --git a/src/app/grid/grid-batchEditing-remotePaging/batch-editing-remote-paging.component.ts b/src/app/grid/grid-batchEditing-remotePaging/batch-editing-remote-paging.component.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { IgxDialogComponent, IgxGridComponent, Transaction } from 'igniteui-angular';
+import { GridPagingMode, IgxDialogComponent, IgxGridComponent, Transaction } from 'igniteui-angular';
 import { Observable } from 'rxjs';
 import { RemotePagingService } from '../../services/remotePaging.service';
 
@@ -20,6 +20,7 @@ export class RemotePagingBatchEditingComponent implements OnInit, AfterViewInit,
     public data: Observable<any[]>;
     public selectOptions = [5, 10, 15, 25, 50];
     public transactionsData: Transaction[] = [];
+    public mode = GridPagingMode.Remote;
 
     private _perPage = 10;
     private _dataLengthSubscriber;
@@ -66,11 +67,11 @@ export class RemotePagingBatchEditingComponent implements OnInit, AfterViewInit,
                 const skipEl = this._totalPagesOnServer * this.perPage;
                 this.remoteService.getData(skipEl, this.perPage);
             }
-            this.grid1.page = page - this._totalPagesOnServer;
+            this.page = page - this._totalPagesOnServer;
             this.page = page;
             return;
         } else {
-            this.grid1.page = 0;
+            this.page = 0;
         }
         this.page = page;
         const skip = this.page * this.perPage;

diff --git a/.../grid/grid-conditional-row-selectors/grid-conditional-row-selectors-sample.component.html b/.../grid/grid-conditional-row-selectors/grid-conditional-row-selectors-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
     <igx-grid igxPreventDocumentScroll [data]="data" height="510px" width="100%" cellSelection="none" primaryKey="ID" rowSelection="multiple" (rowSelected)="onRowSelect($event)">
-<igx-paginator></igx-paginator>
+        <igx-paginator></igx-paginator>
         <igx-column field="ContactName" width="20%"></igx-column>
         <igx-column field="Country" width="20%"></igx-column>
         <igx-column field="City" width="20%"></igx-column>

diff --git a/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.html b/src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component.html
@@ -1,7 +1,7 @@
 <div class="grid__wrapper">
     <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [primaryKey]="'ProductID'" [autoGenerate]="false" [displayDensity]="'cosy'"
         width="100%" height="350px" [rowSelection]="selectionMode" (gridKeydown)="customKeydown($event)">
-<igx-paginator></igx-paginator>
+        <igx-paginator></igx-paginator>
         <igx-column field="ProductID" header="Product ID" width="16%" [headerClasses]="'prodId'"
             [editable]="true">
         </igx-column>

diff --git a/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.html b/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.html
@@ -1,38 +1,34 @@
 <div class="grid__wrapper">
-    <igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" width="100%" height="580px" [perPage]="perPage">
-<igx-paginator>
-<!-- Auto migrated template content. Please, check your bindings! -->
-
-<igx-paginator-content>
-
-        <div class="igx-grid__footer">
-            <div id="numberPager" class="igx-paginator" style="justify-content: center;">
-                <button [disabled]="firstPage" (click)="previousPage()" igxButton="flat">
-                    PREV
-                </button>
-                <span *ngIf="shouldShowFirstPage" (click)="paginate(0)">
-                    <a class="pageNavLinks" [routerLink]>{{1}}</a> <span class="pageNavLinks">...</span>
-                </span>
-                <span *ngFor="let item of pages" (click)="paginate(item)">
-                    <a class="pageNavLinks {{activePage(item)}}" [routerLink]>{{item + 1}}</a>
-                </span>
-                <span *ngIf="shouldShowLastPage" (click)="paginate(totalPages - 1)">
-                    <span class="pageNavLinks">...</span> <a class="pageNavLinks" [routerLink]>{{ totalPages }}</a>
-                </span>
-                <button [disabled]="lastPage" (click)="nextPage()" igxButton="flat">
-                    NEXT
-                </button>
-            </div>
-        </div>
-
-        </igx-paginator-content>
-</igx-paginator>
+    <igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" width="100%" height="580px">
         <igx-column field="ID"></igx-column>
         <igx-column field="ProductName"></igx-column>
         <igx-column field="QuantityPerUnit"></igx-column>
         <igx-column field="SupplierName"></igx-column>
         <igx-column field="UnitsInStock"></igx-column>
         <igx-column field="Rating"></igx-column>
+        <igx-paginator [perPage]="perPage">
+            <igx-paginator-content>
+                <div class="fullWidth">
+                    <div id="numberPager" class="fullWidth">
+                        <button [disabled]="firstPage" (click)="previousPage()" igxButton="flat">
+                            PREV
+                        </button>
+                        <span *ngIf="shouldShowFirstPage" (click)="paginate(0)">
+                            <a class="pageNavLinks" [routerLink]>{{1}}</a> <span class="pageNavLinks">...</span>
+                        </span>
+                        <span *ngFor="let item of pages" (click)="paginate(item)">
+                            <a class="pageNavLinks {{activePage(item)}}" [routerLink]>{{item + 1}}</a>
+                        </span>
+                        <span *ngIf="shouldShowLastPage" (click)="paginate(totalPages - 1)">
+                            <span class="pageNavLinks">...</span> <a class="pageNavLinks" [routerLink]>{{ totalPages
+                                }}</a>
+                        </span>
+                        <button [disabled]="lastPage" (click)="nextPage()" igxButton="flat">
+                            NEXT
+                        </button>
+                    </div>
+                </div>
+            </igx-paginator-content>
+        </igx-paginator>
     </igx-grid>
-
 </div>
diff --git a/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.scss b/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.scss
@@ -18,6 +18,16 @@
     display: inline;
 }
 
-#numberPager > * {
+#numberPager {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#numberPager span {
     margin-left: .5rem;
+}
+
+.fullWidth {
+    width: 100%;
 }
diff --git a/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.ts b/src/app/grid/grid-custom-remote-paging-sample/custom-remote-paging-sample.component.ts
@@ -10,7 +10,6 @@ import { RemotePagingService } from '../../services/remotePaging.service';
     templateUrl: './custom-remote-paging-sample.component.html'
 })
 export class CustomRemotePagingGridSampleComponent implements OnInit, AfterViewInit, OnDestroy {
-    @ViewChild('customPager', { read: TemplateRef, static: true }) public remotePager: TemplateRef<any>;
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
 
     public page = 0;
@@ -19,7 +18,6 @@ export class CustomRemotePagingGridSampleComponent implements OnInit, AfterViewI
     public totalPages = 1;
     public totalCount = 0;
     public pages = [];
-    public title = 'gridPaging';
     public data: Observable<any[]>;
 
     private visibleElements = 5;
@@ -95,11 +93,11 @@ export class CustomRemotePagingGridSampleComponent implements OnInit, AfterViewI
         this.setNumberOfPagingItems(this.page, this.totalPages);
     }
 
-    public paginate(page: number, recalc = false) {
+    public paginate(page: number, recalculate = false) {
         this.page = page;
         const skip = this.page * this.perPage;
         const top = this.perPage;
-        if (recalc) {
+        if (recalculate) {
             this.totalPages = Math.ceil(this.totalCount / this.perPage);
         }
         this.setNumberOfPagingItems(this.page, this.totalPages);

diff --git a/src/app/grid/grid-editing-sample/grid-editing-sample.component.html b/src/app/grid/grid-editing-sample/grid-editing-sample.component.html
@@ -1,7 +1,7 @@
 <div class="grid__wrapper">
     <div class="sample__header">
-        <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" displayDensity="cosy" width="100%" height="600px" [primaryKey]="'ProductID'" [perPage]="10" [allowFiltering]="true" (rowDeleted)="show($event)">
-<igx-paginator></igx-paginator>
+        <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" displayDensity="cosy" width="100%" height="600px" [primaryKey]="'ProductID'" [allowFiltering]="true" (rowDeleted)="show($event)">
+            <igx-paginator [perPage]="10"></igx-paginator>
             <igx-grid-toolbar>
 
                 <button igxButton="flat" (click)="dialogAdd.open()" class="addProdBtn"><igx-icon>add</igx-icon> Add Product</button>

diff --git a/src/app/grid/grid-editing-sample/grid-editing-sample.component.ts b/src/app/grid/grid-editing-sample/grid-editing-sample.component.ts
@@ -73,7 +73,7 @@ export class GridEditingSampleComponent implements OnInit, AfterViewInit {
         this.grid1.addRow(this.product);
         this.grid1.cdr.detectChanges();
         this.cancel();
-        this.grid1.page = this.grid1.totalPages - 1;
+        this.grid1.paginator.page = this.grid1.paginator.totalPages - 1;
         this.grid1.cdr.detectChanges();
         let row;
         requestAnimationFrame(() => {

diff --git a/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.html b/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
-    <igx-grid igxPreventDocumentScroll #grid [data]="data" [autoGenerate]="false" width="100%" height="600px" [perPage]="10" [allowFiltering]="true">
-<igx-paginator></igx-paginator>
+    <igx-grid igxPreventDocumentScroll #grid [data]="data" [autoGenerate]="false" width="100%" height="600px" [allowFiltering]="true">
+        <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column field="ProductName" header="Product Name" width="15%" [dataType]="'string'" [sortable]="true"
             [hasSummary]="true" [editable]="true" [resizable]="true">
         </igx-column>

diff --git a/src/app/grid/grid-group-by-paging-sample/grid-group-by-paging-sample.component.html b/src/app/grid/grid-group-by-paging-sample/grid-group-by-paging-sample.component.html
@@ -1,6 +1,6 @@
 <div class="grid__wrapper">
-    <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [perPage]="10" [width]="'100%'" [height]="'570px'" [rowSelection]='selectionMode' [groupingExpressions]='expr'>
-<igx-paginator></igx-paginator>
+    <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [width]="'100%'" [height]="'570px'" [rowSelection]='selectionMode' [groupingExpressions]='expr'>
+        <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column field="ShipCountry" header="Ship Country" width="200px" [groupable]="true">
         </igx-column>
         <igx-column field="ShipCity" header="Ship City" width="250px" [groupable]="true">

diff --git a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html
@@ -3,7 +3,7 @@
         <igx-grid height="450px" width="100%" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" displayDensity="compact"
             summaryCalculationMode="rootLevelOnly" columnSelection="single" [allowAdvancedFiltering]="true"
             (keydown)="gridKeydown($event)" (activeNodeChange)="onActiveNodeChange($event)">
-<igx-paginator></igx-paginator>
+            <igx-paginator></igx-paginator>
             <igx-grid-toolbar *ngIf="false"></igx-grid-toolbar>
 
             <ng-template igxGridDetail let-dataItem>

diff --git a/src/app/grid/grid-moving-sample/grid-moving-sample.component.html b/src/app/grid/grid-moving-sample/grid-moving-sample.component.html
@@ -5,8 +5,8 @@
     </div>
 </ng-template>
 <div class="grid__wrapper">
-    <igx-grid igxPreventDocumentScroll #dataGrid [data]="data" [autoGenerate]="false" height="620px" width="100%" [perPage]="10">
-<igx-paginator></igx-paginator>
+    <igx-grid igxPreventDocumentScroll #dataGrid [data]="data" [autoGenerate]="false" height="620px" width="100%">
+        <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column [field]="'Category'" [width]="'200px'" [movable]="true" [pinned]="true" [headerTemplate]="pinTemplate"></igx-column>
         <igx-column [field]="'Type'" [movable]="true" [pinned]="true" [headerTemplate]="pinTemplate"></igx-column>
         <igx-column [field]="'Price'" dataType="number" [movable]="true" [formatter]="formatCurrency" [headerTemplate]="pinTemplate"></igx-column>

diff --git a/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.html b/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.html
@@ -5,8 +5,8 @@
     </div>
 </ng-template>
 <div class="grid__wrapper">
-    <igx-grid igxPreventDocumentScroll #dataGrid [data]="data" [autoGenerate]="false" height="620px" width="100%" [perPage]="10">
-<igx-paginator></igx-paginator>
+    <igx-grid igxPreventDocumentScroll #dataGrid [data]="data" [autoGenerate]="false" height="620px" width="100%">
+        <igx-paginator [perPage]="10"></igx-paginator>
         <igx-column [field]="'Category'" [width]="'200px'" [movable]="true" [pinned]="true" [headerTemplate]="pinTemplate"></igx-column>
         <igx-column [field]="'Type'" [movable]="true" [pinned]="true" [headerTemplate]="pinTemplate"></igx-column>
         <igx-column [field]="'Price'" [dataType]="'number'" [movable]="true" [formatter]="formatCurrency" [headerTemplate]="pinTemplate"></igx-column>

diff --git a/src/app/grid/grid-pager-sample/grid-pager-sample.component.html b/src/app/grid/grid-pager-sample/grid-pager-sample.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid igxPreventDocumentScroll #grid [data]="data" [perPage]="10" height="500px"
+    <igx-grid igxPreventDocumentScroll #grid [data]="data" height="500px"
         width="100%" displayDensity="cosy">
         <igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="grid.perPage" 
             [selectOptions]="selectOptions" [displayDensity]="grid.displayDensity">