diff --git a/samples/grids/grid/remote-paging-grid/src/CustomersWithPageResponseModel.ts b/samples/grids/grid/remote-paging-grid/src/CustomersWithPageResponseModel.ts
new file mode 100644
index 000000000..6976b77c4
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts b/samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts
index cce2a2f29..8a8059122 100644
--- a/samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts
+++ b/samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts
@@ -1,34 +1,28 @@
-const URL = `https://data-northwind.indigo.design/`;
+const CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
 
 export class RemoteService {
 
-public getData(dataState: any, index?: number, perPage?: number): any {
-    return fetch(this.buildUrl(dataState, index, perPage))
+    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
+        return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
         .then((result) => result.json());
-}
-
-private buildUrl(dataState: any, index?: number, perPage?: number) {
-    let qS = "";
-    if (dataState) {
-            qS += `${dataState.key}`;
     }
 
-    // Add index and perPage to the query string if they are defined
-    if (index !== undefined) {
-        qS += `?index=${index}`;
-        if (perPage !== undefined) {
-            qS += `&perPage=${perPage}`;
+    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
+        let qS = "";
+        if (baseUrl) {
+                qS += `${baseUrl}`;
         }
-    } else if (perPage !== undefined) {
-        qS += `?perPage=${perPage}`;
-    }
 
-    return `${URL}${qS}`;
-}
+        // 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}`;
+        }
 
-public getDataLength(dataState: any): Promise<number> {
-    return fetch(this.buildUrl(dataState))
-        .then((result) => result.json())
-        .then((data) => data.length);
-}
+        return `${qS}`;
+    }
 }
\ No newline at end of file
diff --git a/samples/grids/grid/remote-paging-grid/src/index.tsx b/samples/grids/grid/remote-paging-grid/src/index.tsx
index e2e6bd74c..2d1dbfae0 100644
--- a/samples/grids/grid/remote-paging-grid/src/index.tsx
+++ b/samples/grids/grid/remote-paging-grid/src/index.tsx
@@ -3,77 +3,73 @@ import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 
-import { IgrGrid, IgrPaginator, IgrGridModule } from "igniteui-react-grids";
+import { IgrGrid, IgrPaginator, IgrGridModule, GridPagingMode } from "igniteui-react-grids";
 import { IgrColumn } from "igniteui-react-grids";
 
 import "igniteui-react-grids/grids/combined";
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
 import { RemoteService } from "./RemotePagingService";
+import { CustomersWithPageResponseModel } from "./CustomersWithPageResponseModel";
+import { IgrNumberEventArgs } from "igniteui-react";
 
 IgrGridModule.register();
 
 export default function App() {
-  let data = [];
-const grid = useRef<IgrGrid>(null);
-const paginator = useRef<IgrPaginator>(null);
-const remoteServiceInstance = new RemoteService();
-let [page] = useState(0);
-let [perPage, setPerPage] = useState(15);
+  const grid = useRef<IgrGrid>(null);
+  const paginator = useRef<IgrPaginator>(null);
+  const [data, setData] = useState([]);
+  const [page, setPage] = useState(0);
+  const [perPage, setPerPage] = useState(15);
 
-useEffect(() => {
-  if (paginator.current) {
-    setPerPage(15);
-    grid.current.isLoading = true;
-  }
-
-  grid.current.isLoading = true;
-  loadData('Customers');
-}, [page, 15]);
-
-function loadData(dataKey: string) {
-    const dataState = { key: dataKey };
+  useEffect(() => {
+    loadGridData(page, perPage);
+  }, [page, perPage]);
 
-    // Set loading state
+  function loadGridData(pageIndex?: number, pageSize?: number) {
+    // Set loading
     grid.current.isLoading = true;
 
-    // Fetch data length
-    remoteServiceInstance.getDataLength(dataState).then((length: number) => {
-        paginator.current.totalRecords = length;
-    });
-  
     // Fetch data
-    remoteServiceInstance.getData(dataState).then((data: any[]) => {
-      grid.current.isLoading = false;
-      grid.current.data = data;
-      grid.current.markForCheck();
-    });
+    RemoteService.getDataWithPaging(pageIndex, pageSize)
+      .then((response: CustomersWithPageResponseModel) => {
+        setData(response.items);
+        // Stop loading when data is retrieved
+        grid.current.isLoading = false;
+        paginator.current.totalRecords = response.totalRecordsCount;
+      })
+      .catch((error) => {
+        console.error(error.message);
+        setData([]);
+        // Stop loading even if error occurs. Prevents endless loading
+        grid.current.isLoading = false;
+
+      })
   }
 
-  function paginate(pageArgs: number) {
-    page = pageArgs;
-    const skip = page * perPage;
-    const top = perPage;
+  function onPageNumberChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
+    setPage(args.detail);
+  }
 
-    remoteServiceInstance.getData({ key: 'Customers' }, skip, top).then((incData:any)=> {
-      data = incData; 
-      grid.current.isLoading = false;
-      grid.current.markForCheck();// Update the UI after receiving data
-    });
-}
+  function onPageSizeChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
+    setPerPage(args.detail);
+  }
 
   return (
     <div className="container sample ig-typography">
       <div className="container fill">
         <IgrGrid
           ref={grid}
+          data={data}
+          pagingMode={GridPagingMode.Remote}
           primaryKey="customerId"
           height="600px"
         >
         <IgrPaginator 
-          perPage="15"
+          perPage={perPage}
           ref={paginator}
-          pageChange={(evt: { page: number }) => paginate(evt.page)}
-          perPageChange={() => paginate(0)}></IgrPaginator>
+          pageChange={onPageNumberChange}
+          perPageChange={onPageSizeChange}>
+        </IgrPaginator>
           <IgrColumn field="customerId" hidden={true}></IgrColumn>
           <IgrColumn field="companyName" header="Company Name"></IgrColumn>
           <IgrColumn field="contactName" header="Contact Name"></IgrColumn>
diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/CustomersWithPageResponseModel.ts b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/CustomersWithPageResponseModel.ts
new file mode 100644
index 000000000..6976b77c4
--- /dev/null
+++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/CustomersWithPageResponseModel.ts
@@ -0,0 +1,7 @@
+export interface CustomersWithPageResponseModel {
+    items: any[];
+    totalRecordsCount: number;
+    pageSize: number;
+    pageNumber: number;
+    totalPages: number;
+}
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/RemoteService.ts b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/RemoteService.ts
index d84e2be89..4a0deeaca 100644
--- a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/RemoteService.ts
+++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/RemoteService.ts
@@ -1,38 +1,34 @@
-const URL = `https://data-northwind.indigo.design/`;
+const BASE_URL = `https://data-northwind.indigo.design/`;
+const CUSTOMERS_URL = `${BASE_URL}Customers/GetCustomersWithPage`;
 
 export class RemoteService {
 
-public getData(dataState: any, index?: number, perPage?: number): any {
-    return fetch(this.buildUrl(dataState, index, perPage))
+    public static getCustomersDataWithPaging(pageIndex?: number, pageSize?: number) {
+        return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
         .then((result) => result.json());
-}
+    }
 
-private buildUrl(dataState: any, index?: number, perPage?: number) {
-    let qS = "";
-    if (dataState) {
-        if (dataState.rootLevel) {
-            qS += `${dataState.key}`;
-        } else {
-            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
-        }
+    public static getHierarchyDataById(parentEntityName: string, parentId: string, childEntityName: string) {
+        return fetch(`${BASE_URL}${parentEntityName}/${parentId}/${childEntityName}`)
+        .then((result) => result.json());
     }
 
-    // Add index and perPage to the query string if they are defined
-    if (index !== undefined) {
-        qS += `?index=${index}`;
-        if (perPage !== undefined) {
-            qS += `&perPage=${perPage}`;
+    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
+        let qS = "";
+        if (baseUrl) {
+                qS += `${baseUrl}`;
         }
-    } else if (perPage !== undefined) {
-        qS += `?perPage=${perPage}`;
-    }
 
-    return `${URL}${qS}`;
-}
+        // 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}`;
+        }
 
-public getDataLength(dataState: any): Promise<number> {
-    return fetch(this.buildUrl(dataState))
-        .then((result) => result.json())
-        .then((data) => data.length);
-}
+        return `${qS}`;
+    }
 }
\ No newline at end of file
diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx
index fd01eb75d..a7e764bcd 100644
--- a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx
+++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx
@@ -2,76 +2,84 @@ import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 
-import { IgrGridCreatedEventArgs, IgrHierarchicalGridModule, IgrPaginator } from "igniteui-react-grids";
+import { GridPagingMode, IgrGridCreatedEventArgs, IgrHierarchicalGridModule, IgrPaginator } from "igniteui-react-grids";
 import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "igniteui-react-grids";
 
 import "igniteui-react-grids/grids/combined";
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
 import { RemoteService } from "./RemoteService";
+import { IgrNumberEventArgs } from "igniteui-react";
+import { CustomersWithPageResponseModel } from "./CustomersWithPageResponseModel";
 
 IgrHierarchicalGridModule.register();
 
 export default function App() {
-const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);
-const paginator = useRef<IgrPaginator>(null);
-const remoteServiceInstance = new RemoteService();
-let [page, setPage] = useState(0);
-let [perPage, setPerPage] = useState(15);
-const [data, setData] = useState([]);
-
-useEffect(() => {
-  if (paginator.current) {
-    setPerPage(15);
+  const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);
+  const paginator = useRef<IgrPaginator>(null);
+
+  const [data, setData] = useState([]);
+  const [page, setPage] = useState(0);
+  const [perPage, setPerPage] = useState(15);
+
+  useEffect(() => {
+    loadGridData(page, perPage);
+  }, [page, perPage]);
+
+  function loadGridData(pageIndex?: number, pageSize?: number) {
+    // Set loading state
     hierarchicalGrid.current.isLoading = true;
-  }
 
-  hierarchicalGrid.current.isLoading = true;
+    // Fetch data
+    RemoteService.getCustomersDataWithPaging(pageIndex, pageSize)
+      .then((response: CustomersWithPageResponseModel) => {
+        setData(response.items);
+        // Stop loading when data is retrieved
+        hierarchicalGrid.current.isLoading = false;
 
-  remoteServiceInstance.getData({ parentID: null, rootLevel: true, key: "Customers", page, perPage }).then(
-    (data: any) => {
+        paginator.current.totalRecords = response.totalRecordsCount;
+      })
+      .catch((error) => {
+        console.error(error.message);
+        setData([]);
+        // Stop loading even if error occurs. Prevents endless loading
         hierarchicalGrid.current.isLoading = false;
-        hierarchicalGrid.current.data = data;
-        hierarchicalGrid.current.markForCheck();
-    }
-  );
-}, [page, 15]);
+
+      })
+  }
 
   function gridCreated(
     rowIsland: IgrRowIsland,
     event: IgrGridCreatedEventArgs,
-    _parentKey: string
+    parentKey: string
   ) {
     const context = event.detail;
-    const dataState = {
-      key: rowIsland.childDataKey,
-      parentID: context.parentID,
-      parentKey: _parentKey,
-      rootLevel: false,
-    };
-
     context.grid.isLoading = true;
+    
+    const parentId: string = context.parentID;
+    const childDataKey: string = rowIsland.childDataKey;
 
-    remoteServiceInstance.getDataLength(dataState).then((length: number) => {
-        paginator.current.totalRecords = length;
-    });
-    remoteServiceInstance.getData(dataState).then((data: any[]) => {
-        context.grid.isLoading = false;
+    RemoteService.getHierarchyDataById(parentKey, parentId, childDataKey)
+      .then((data: any) => {
         context.grid.data = data;
+        context.grid.isLoading = false;
         context.grid.markForCheck();
-    });
+      })
+      .catch((error) => {
+        console.error(error.message);
+        context.grid.data = [];
+        context.grid.isLoading = false;
+        context.grid.markForCheck();
+      })
+    
   }
 
-  function paginate(pageArgs: number) {
-    setPage(pageArgs);
-    const skip = pageArgs * perPage;
-    const top = perPage;
+  function onPageNumberChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
+    setPage(args.detail);
+  }
 
-    remoteServiceInstance.getData({ parentID: null, rootLevel: true, key: 'Customers' }, skip, top).then((incData:any)=> {
-      setData(incData);
-      hierarchicalGrid.current.isLoading = false;
-      hierarchicalGrid.current.markForCheck();// Update the UI after receiving data
-    });
-}
+  function onPageSizeChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
+    setPerPage(args.detail);
+  }
 
   return (
     <div className="container sample ig-typography">
@@ -79,15 +87,16 @@ useEffect(() => {
 
         <IgrHierarchicalGrid
           ref={hierarchicalGrid}
+          data={data}
+          pagingMode={GridPagingMode.Remote}
           primaryKey="customerId"
           height="600px"
-          data={data}
         >
           <IgrPaginator 
             perPage={perPage}
             ref={paginator}
-            pageChange={(evt: { page: number }) => paginate(evt.page)}
-            perPageChange={() => paginate(page)}>
+            pageChange={onPageNumberChange}
+            perPageChange={onPageSizeChange}>
           </IgrPaginator>
           <IgrColumn field="customerId" hidden={true}></IgrColumn>
           <IgrColumn field="companyName" header="Company Name"></IgrColumn>