chore(*): Add remote paging sample

Author: zdrawku

src/app/app.component.ts

@@ -247,6 +247,11 @@ export class AppComponent implements OnInit {
             icon: 'view_column',
             name: 'Grid Remote Virtualization'
         },
+        {
+            link: '/gridRemotePaging',
+            icon: 'view_column',
+            name: 'Grid Remote Paging'
+        },
         {
             link: '/gridRowEdit',
             icon: 'view_column',

src/app/app.module.ts

@@ -71,6 +71,7 @@ import { GridColumnPinningSampleComponent } from './grid-column-pinning/grid-col
 import { GridColumnResizingSampleComponent } from './grid-column-resizing/grid-column-resizing.sample';
 import { GridSummaryComponent } from './grid-summaries/grid-summaries.sample';
 import { GridPerformanceSampleComponent } from './grid-performance/grid-performance.sample';
+import { GridRemotePagingSampleComponent } from './grid-remote-paging/grid-remote-paging.sample';
 import { GridSelectionComponent } from './grid-selection/grid-selection.sample';
 import { GridRowDraggableComponent } from './grid-row-draggable/grid-row-draggable.sample';
 import { GridToolbarSampleComponent } from './grid-toolbar/grid-toolbar.sample';
@@ -238,7 +239,8 @@ const components = [
     GridSaveStateComponent,
     AboutComponent,
     ReactiveFormSampleComponent,
-    DateRangeSampleComponent
+    DateRangeSampleComponent,
+    GridRemotePagingSampleComponent
 ];
 
 @NgModule({

src/app/app.routing.ts

@@ -44,6 +44,7 @@ import { GridColumnPinningSampleComponent } from './grid-column-pinning/grid-col
 import { GridColumnResizingSampleComponent } from './grid-column-resizing/grid-column-resizing.sample';
 import { GridSummaryComponent } from './grid-summaries/grid-summaries.sample';
 import { GridPerformanceSampleComponent } from './grid-performance/grid-performance.sample';
+import { GridRemotePagingSampleComponent } from './grid-remote-paging/grid-remote-paging.sample';
 import { GridSelectionComponent } from './grid-selection/grid-selection.sample';
 import { GridRowDraggableComponent } from './grid-row-draggable/grid-row-draggable.sample';
 import { GridVirtualizationSampleComponent } from './grid-remote-virtualization/grid-remote-virtualization.sample';
@@ -276,6 +277,10 @@ const appRoutes = [
         path: 'gridPerformance',
         component: GridPerformanceSampleComponent
     },
+    {
+        path: 'gridRemotePaging',
+        component: GridRemotePagingSampleComponent
+    },
     {
         path: 'gridSelection',
         component: GridSelectionComponent

src/app/grid-remote-paging/grid-remote-paging.sample.html

@@ -0,0 +1,20 @@
+<div class="sample-wrapper dark-grid">
+    <igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" width="100%" height="540px" [paging]="true" [perPage]="perPage" [paginationTemplate]="customPager">
+        <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-grid>
+    <ng-template #customPager let-api>
+        <igx-paginator #paginator
+            [totalRecords]="totalCount"
+            [(perPage)]="perPage"
+            [selectLabel]="'Records per page:'"
+            [selectOptions]="selectOptions"
+            [displayDensity]="grid1.displayDensity"
+            (pageChange)="paginate($event)">
+        </igx-paginator>
+    </ng-template>
+</div>

src/app/grid-remote-paging/grid-remote-paging.sample.ts

@@ -0,0 +1,63 @@
+import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { IgxGridComponent } from 'igniteui-angular';
+import { RemoteService } from '../shared/remote.service';
+import { Observable } from 'rxjs';
+
+@Component({
+    selector: 'app-grid-remote-paging-sample',
+    templateUrl: 'grid-remote-paging.sample.html'
+})
+export class GridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy {
+
+    public page = 0;
+    public totalCount = 0;
+    public pages = [];
+    public data: Observable<any[]>;
+    public selectOptions = [5, 10, 15, 25, 50];
+
+    @ViewChild('customPager', { read: TemplateRef, static: true }) public remotePager: TemplateRef<any>;
+    @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
+
+    private _perPage = 10;
+    private _dataLengthSubscriber;
+
+    constructor(private remoteService: RemoteService) {
+    }
+
+    public get perPage(): number {
+        return this._perPage;
+    }
+
+    public set perPage(val: number) {
+        this._perPage = val;
+        this.paginate(0);
+    }
+
+    public ngOnInit() {
+        this.data = this.remoteService.remotePagingData.asObservable();
+
+        this._dataLengthSubscriber = this.remoteService.getPagingDataLength().subscribe((data) => {
+            this.totalCount = data;
+            this.grid1.isLoading = false;
+        });
+    }
+
+    public ngOnDestroy() {
+        if (this._dataLengthSubscriber) {
+            this._dataLengthSubscriber.unsubscribe();
+        }
+    }
+
+    public ngAfterViewInit() {
+        this.grid1.isLoading = true;
+        this.remoteService.getPagingData(0, this.perPage);
+    }
+
+    public paginate(page: number) {
+        this.page = page;
+        const skip = this.page * this.perPage;
+        const top = this.perPage;
+
+        this.remoteService.getPagingData(skip, top);
+    }
+}

src/app/routing.ts

@@ -54,6 +54,7 @@ import { GridColumnResizingSampleComponent } from './grid-column-resizing/grid-c
 import { GridGroupBySampleComponent } from './grid-groupby/grid-groupby.sample';
 import { GridSummaryComponent } from './grid-summaries/grid-summaries.sample';
 import { GridPerformanceSampleComponent } from './grid-performance/grid-performance.sample';
+import { GridRemotePagingSampleComponent } from './grid-remote-paging/grid-remote-paging.sample';
 import { GridSelectionComponent } from './grid-selection/grid-selection.sample';
 import { GridRowDraggableComponent } from './grid-row-draggable/grid-row-draggable.sample';
 import { GridToolbarSampleComponent } from './grid-toolbar/grid-toolbar.sample';
@@ -365,6 +366,10 @@ const appRoutes = [
         path: 'gridRowPinning',
         component: GridRowPinningSampleComponent
     },
+    {
+        path: 'gridRemotePaging',
+        component: GridRemotePagingSampleComponent
+    },
     {
         path: 'gridColumnResizing',
         component: GridColumnResizingSampleComponent

src/app/shared/remote.service.ts

@@ -6,6 +6,8 @@ import { HttpClient } from '@angular/common/http';
 @Injectable()
 export class RemoteService {
 
+    public remotePagingData: BehaviorSubject<any[]>;
+    public urlPaging = 'https://www.igniteui.com/api/products';
     totalCount: Observable<number>;
     _totalCount: BehaviorSubject<number>;
     remoteData: Observable<any[]>;
@@ -18,6 +20,7 @@ export class RemoteService {
         this.remoteData = this._remoteData.asObservable();
         this._totalCount = new BehaviorSubject(null);
         this.totalCount = this._totalCount.asObservable();
+        this.remotePagingData = new BehaviorSubject([]);
     }
 
     nullData() {
@@ -45,4 +48,28 @@ export class RemoteService {
     buildUrl(dataState: any) {
         return this.urlBuilder(dataState);
     }
+
+    // Remote paging
+    public getPagingData(index?: number, perPage?: number): any {
+        let qS = '';
+
+        if (perPage) {
+            qS = `?$skip=${index}&$top=${perPage}&$count=true`;
+        }
+
+        this.http
+            .get(`${this.urlPaging + qS}`).pipe(
+                map((data: any) => {
+                    return data;
+                })
+            ).subscribe((data) => this.remotePagingData.next(data));
+    }
+
+    public getPagingDataLength(): any {
+        return this.http.get(this.urlPaging).pipe(
+            map((data: any) => {
+                return data.length;
+            })
+        );
+    }
 }