Remote Paging Grid & Hgrid: Refactoring with the new customers endpoint (#874)

MarielaTihova · web-flow · commit 3e288f776b06 · 2025-02-06T16:30:31.000+02:00
diff --git a/samples/grids/grid/remote-paging-grid/index.html b/samples/grids/grid/remote-paging-grid/index.html
@@ -26,56 +26,43 @@
         moving="true"
         paging-mode="Remote">
             <igc-paginator
-            id="paginator">
+              id="paginator">
             </igc-paginator>
             <igc-column
-            name="CategoryName"
-            id="CategoryName"
-            field="CategoryName"
-            header="Category Name">
+              name="customerId"
+              id="customerId"
+              field="customerId"
+              hidden="true">
             </igc-column>
             <igc-column
-            name="ImageID"
-            id="ImageID"
-            field="CategoryImageUrl"
-            data-type="image"
-            header="Category Image">
+              name="companyName"
+              id="companyName"
+              field="companyName"
+              header="Company Name">
             </igc-column>
             <igc-column
-            name="ProductName"
-            id="ProductName"
-            field="ProductName"
-            header="Product Name">
+              name="contactName"
+              id="contactName"
+              field="contactName"
+              header="Contact Name">
             </igc-column>
             <igc-column
-            name="QuantityPerUnit"
-            id="QuantityPerUnit"
-            field="QuantityPerUnit"
-            header="Quantity Per Unit">
+              name="contactTitle"
+              id="contactTitle"
+              field="contactTitle"
+              header="Contact Title">
             </igc-column>
             <igc-column
-            name="UnitPrice"
-            id="UnitPrice"
-            field="UnitPrice"
-            header="Unit Price">
+              name="address?.country"
+              id="address.country"
+              field="address.country"
+              header="Country">
             </igc-column>
             <igc-column
-            name="SupplierName"
-            id="SupplierName"
-            field="SupplierName"
-            header="Supplier Name">
-            </igc-column>
-            <igc-column
-            name="UnitsInStock"
-            id="UnitsInStock"
-            field="UnitsInStock"
-            header="Units In Stock">
-            </igc-column>
-            <igc-column
-            name="UnitsOnOrder"
-            id="UnitsOnOrder"
-            field="UnitsOnOrder"
-            header="Units On Order">
+              name="address.phone"
+              id="address.phone"
+              field="address.phone"
+              header="Phone">
             </igc-column>
         </igc-grid>
     </div>
diff --git a/samples/grids/grid/remote-paging-grid/src/CustomersWithPageResponseModel.ts b/samples/grids/grid/remote-paging-grid/src/CustomersWithPageResponseModel.ts
@@ -0,0 +1,7 @@
+export interface CustomersWithPageResponseModel {
+    items: any[];
+    totalRecordsCount: number;
+    pageSize: number;
+    pageNumber: number;
+    totalPages: number;
+}
diff --git a/samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts b/samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts
@@ -1,49 +1,31 @@
-import { BehaviorSubject, Observable, from } from 'rxjs';
-import { map, catchError } from 'rxjs/operators';
-
-
 export class RemotePagingService {
-  public remoteData: BehaviorSubject<any[]> = new BehaviorSubject([]);
-  public dataLength: BehaviorSubject<number> = new BehaviorSubject(0);
-  public url = 'https://www.igniteui.com/api/products';
-
-  constructor() {}
+    public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
+    constructor() {}
 
-  public async getData(index?: number, perPage?: number): Promise<any> {
-    let qS = '';
-
-    if (index !== undefined && perPage !== undefined) {
-        qS = `?$skip=${index}&$top=${perPage}&$count=true`;
+    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
+        return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
+        .then((result) => result.json())
+        .catch((error) => console.error(error.message));
     }
-
-    try {
-        const response = await fetch(`${this.url + qS}`);
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
+    
+    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
+        let qS = "";
+        if (baseUrl) {
+                qS += `${baseUrl}`;
         }
-        const data = await response.json();
-        return data;
-    } catch (error) {
-        console.error('Error fetching data:', error);
-        throw error; // Propagate the error further
-    }
-}
 
-public async getDataLength(): Promise<number> {
-    try {
-        const response = await fetch(this.url);
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
+        // Add pageIndex and size to the query string if they are defined
+        if (pageIndex !== undefined) {
+            qS += `?pageIndex=${pageIndex}`;
+            if (pageSize !== undefined) {
+                qS += `&size=${pageSize}`;
+            }
+        } else if (pageSize !== undefined) {
+            qS += `?perPage=${pageSize}`;
         }
-        const data = await response.json();
-        return data.length; // Assuming the length is directly accessible in the JSON response
-    } catch (error) {
-        console.error('Error fetching data length:', error);
-        throw error; // Propagate the error further
-    }
-}
-
 
+        return `${qS}`;
+    }
 }
 
 
diff --git a/samples/grids/grid/remote-paging-grid/src/index.ts b/samples/grids/grid/remote-paging-grid/src/index.ts
@@ -3,76 +3,80 @@ import { IgcGridComponent, IgcPaginatorComponent } from 'igniteui-webcomponents-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import "./index.css";
 import { RemotePagingService } from './RemotePagingService';
+import { CustomersWithPageResponseModel } from './CustomersWithPageResponseModel';
 
 export class Sample {
 
-    public data: any[] = [];
-    public dataLength: number = 0;
-    private grid: IgcGridComponent;
-    private _bind: () => void;
-    private remotePagingService: RemotePagingService = new RemotePagingService();
-    public page = 0;
-    private _perPage = 10;
-    private pager: IgcPaginatorComponent;
+  public data: any[] = [];
+  public page: number = 0;
+  private grid: IgcGridComponent;
+  private _bind: () => void;
+  private _perPage: number = 15;
+  private pager: IgcPaginatorComponent;
+  private _totalRecordsCount: number;
 
-    public get perPage(): number {
-        return this.pager.perPage || 10;
-    }
-
-    private _totalRecordsCount: number;
-
-    public get totalRecordsCount(): number {
+  public get perPage(): number {
+      return this.pager.perPage || this._perPage;
+  }
+  public set perPage(val: number) {
+    this._perPage = val;
+  }
+  public get totalRecordsCount(): number {
     return this._totalRecordsCount;
-    }
-
-    public set totalRecordsCount(value: number) {
+  }
+  public set totalRecordsCount(value: number) {
     this._totalRecordsCount = value;
     this.grid.totalRecords = value;
-    }
+  }
 
-    constructor() {
-      this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
+  constructor() {
       this.grid = document.getElementById('grid') as IgcGridComponent;
-
+      this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
+      
       this._bind = () => {
-        this.remotePagingService.getDataLength().then((length) => {
-            this.totalRecordsCount = length;
-            this.pager.totalRecords = this.totalRecordsCount;
-        });
         window.addEventListener("load", () => {
-          this.pager.totalRecords = this.totalRecordsCount;
-          this.paginate(0);
-       });
-       this.pager.addEventListener("perPageChange", ()=> {
-        this.paginate(0);
-       })
-       this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
-        this.paginate(args.detail);}) as EventListener);
-    }
-    this._bind();
-    }
+          this.loadData(this.page,this.perPage);
+        });
 
-      public paginate(page: number) {
-        this.page = page;
-        const skip = this.page * this.perPage;
-        const top = this.perPage;
+        this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
+          this.perPage = args.detail;
+          this.loadData(this.page, this.perPage);
+        }) as EventListener);
 
-        this.remotePagingService.getData(skip, top).then((data)=> {
-          this.data = data; // Assign received data to this.data
-          this.grid.isLoading = false;
-          this.updateUI(); // Update the UI after receiving data
-        });
-    }
+        this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
+          this.page = args.detail;
+          this.loadData(this.page, this.perPage);
+        }) as EventListener);
+      }
+
+      this._bind();
+  }
 
-    public set perPage(val: number) {
-        this._perPage = val;
-        this.paginate(val);
+  private updateUI(): void {
+    if (this.grid && this.data) { // Check if grid and data are available
+        this.grid.data = this.data;
     }
+  }
 
-    private updateUI() {
-      if (this.grid && this.data) { // Check if grid and data are available
-          this.grid.data = this.data;
-      }
+  private loadData(pageIndex?: number, pageSize?: number): void {
+    this.grid.isLoading = true;
+    
+    RemotePagingService.getDataWithPaging(pageIndex,pageSize)
+    .then((response: CustomersWithPageResponseModel) => {
+      this.totalRecordsCount = response.totalRecordsCount;
+      this.pager.perPage = pageSize;
+      this.pager.totalRecords = this.totalRecordsCount;
+      this.page = response.pageNumber;
+      this.data = response.items;
+      this.grid.isLoading = false;
+      this.updateUI(); // Update the UI after receiving data
+    })
+    .catch((error) => {
+      console.error(error.message);
+      // Stop loading even if error occurs. Prevents endless loading
+      this.grid.isLoading = false;
+      this.updateUI();
+    })
   }
 
 }
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/index.html b/samples/grids/hierarchical-grid/remote-paging-sample/index.html
@@ -19,7 +19,12 @@
     <div class="container sample">
       <div class="container fill">
 
-        <igc-hierarchical-grid id="hGrid" primary-key="customerId" height="600px">
+        <igc-hierarchical-grid 
+          id="hGrid" 
+          primary-key="customerId" 
+          height="600px" 
+          paging-mode="Remote"
+        >
           <igc-paginator id="paginator">
           </igc-paginator>
           <igc-column field="customerId" hidden="true"></igc-column>
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/src/CustomersWithPageResponseModel.ts b/samples/grids/hierarchical-grid/remote-paging-sample/src/CustomersWithPageResponseModel.ts
@@ -0,0 +1,7 @@
+export interface CustomersWithPageResponseModel {
+    items: any[];
+    totalRecordsCount: number;
+    pageSize: number;
+    pageNumber: number;
+    totalPages: number;
+}
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/src/RemoteService.ts b/samples/grids/hierarchical-grid/remote-paging-sample/src/RemoteService.ts
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/src/index.ts b/samples/grids/hierarchical-grid/remote-paging-sample/src/index.ts
