updated hgrid sample to v19

Author: tishko0

samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 
-import { GridPagingMode, IgrGridCreatedEventArgs, IgrHierarchicalGridModule, IgrPaginator } from "igniteui-react-grids";
+import { IgrGridCreatedEventArgs, IgrPaginator } from "igniteui-react-grids";
 import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "igniteui-react-grids";
 
 import "igniteui-react-grids/grids/combined";
@@ -11,8 +11,6 @@ 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);
@@ -48,15 +46,14 @@ export default function App() {
   }
 
   function gridCreated(
-    rowIsland: IgrRowIsland,
     event: IgrGridCreatedEventArgs,
     parentKey: string
   ) {
     const context = event.detail;
     context.grid.isLoading = true;
 
     const parentId: string = context.parentID;
-    const childDataKey: string = rowIsland.childDataKey;
+    const childDataKey: string = context.owner.childDataKey;
 
     RemoteService.getHierarchyDataById(parentKey, parentId, childDataKey)
       .then((data: any) => {
@@ -73,11 +70,11 @@ export default function App() {
 
   }
 
-  function onPageNumberChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
+  function onPageNumberChange(args: IgrNumberEventArgs) {
     setPage(args.detail);
   }
 
-  function onPageSizeChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
+  function onPageSizeChange(args: IgrNumberEventArgs) {
     setPerPage(args.detail);
   }
 
@@ -88,15 +85,15 @@ export default function App() {
         <IgrHierarchicalGrid
           ref={hierarchicalGrid}
           data={data}
-          pagingMode={GridPagingMode.Remote}
+          pagingMode={"remote"}
           primaryKey="customerId"
           height="600px"
         >
           <IgrPaginator 
             perPage={perPage}
             ref={paginator}
-            pageChange={onPageNumberChange}
-            perPageChange={onPageSizeChange}>
+            onPageChange={onPageNumberChange}
+            onPerPageChange={onPageSizeChange}>
           </IgrPaginator>
           <IgrColumn field="customerId" hidden={true}></IgrColumn>
           <IgrColumn field="companyName" header="Company Name"></IgrColumn>
@@ -108,10 +105,9 @@ export default function App() {
           <IgrRowIsland
             childDataKey="Orders"
             primaryKey="orderId"
-            gridCreated={(
-              rowIsland: IgrRowIsland,
+            onGridCreated={(
               e: IgrGridCreatedEventArgs
-            ) => gridCreated(rowIsland, e, "Customers")}
+            ) => gridCreated(e, "Customers")}
           >
             <IgrColumn field="orderId" hidden={true}></IgrColumn>
             <IgrColumn field="shipAddress.country" header="Ship Country"></IgrColumn>
@@ -122,10 +118,9 @@ export default function App() {
             <IgrRowIsland
               childDataKey="Details"
               primaryKey="productId"
-              gridCreated={(
-                rowIsland: IgrRowIsland,
+              onGridCreated={(
                 e: IgrGridCreatedEventArgs
-              ) => gridCreated(rowIsland, e, "Orders")}
+              ) => gridCreated(e, "Orders")}
             >
               <IgrColumn field="productId" hidden={true}></IgrColumn>
               <IgrColumn field="quantity" header="Quantity"></IgrColumn>