Sample fixes for version 19 update of react

samples/grids/grid/cell-editing-sample/src/index.tsx

@@ -38,6 +38,7 @@ export default class Sample extends React.Component<any, any> {
 
             <div className="container fill">
                 <IgrGrid
+                    ref={this.grid1Ref}
                     autoGenerate={false}
                     data={this.roleplayDataStats}
                     primaryKey="Name">

samples/grids/grid/editing-events/src/index.tsx

@@ -87,7 +87,7 @@ export default class Sample extends React.Component<any, any> {
         return this._componentRenderer;
     }
 
-    public webGridEditingEventsCellEdit(sender: IgrGrid, args: IgrGridEditEventArgs): void {
+    public webGridEditingEventsCellEdit(args: IgrGridEditEventArgs): void {
         var d = args.detail;
 
         if (d.column != null && d.column.field == "UnitsOnOrder") {

samples/grids/grid/editing-excel-style/src/index.tsx

@@ -39,7 +39,7 @@ export default class Sample extends React.Component<any, any> {
                     autoGenerate={false}
                     data={this.nwindData}
                     primaryKey="ProductID"
-                    gridKeydown={this.webGridEditingExcelStyle}
+                    onGridKeydown={this.webGridEditingExcelStyle}
                     ref={this.grid1Ref}>
                     <IgrColumn
                         field="ProductID"
@@ -95,7 +95,7 @@ export default class Sample extends React.Component<any, any> {
         return this._componentRenderer;
     }
 
-    public webGridEditingExcelStyle(sender: IgrGrid, args: IgrGridKeydownEventArgs): void {
+    public webGridEditingExcelStyle(args: IgrGridKeydownEventArgs): void {
         var key = (args.detail.event as any).keyCode;
         var grid = args.detail.target.grid;
         var activeElem = grid.navigation.activeNode;

samples/grids/grid/multi-cell-selection-mode/src/index.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 
-import { IgrGridBaseDirective, IgrGridCellEventArgs, IgrGridModule } from 'igniteui-react-grids';
+import { IgrGridModule, IgrGridSelectionRangeEventArgs } from 'igniteui-react-grids';
 import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
 import { InvoicesData } from './InvoicesData';
 
@@ -19,15 +19,15 @@ export default function App() {
     const data = new InvoicesData();
     const rightGridRef = useRef(null);
 
-    function onGridRangeSelected(grid: IgrGridBaseDirective): void {
-        rightGridRef.current.data = grid.getSelectedData(false, false);
+    function onGridRangeSelected(args: IgrGridSelectionRangeEventArgs): void {
+        rightGridRef.current.data = (args.target as any).getSelectedData(false, false);
     }
 
     return (
         <>
             <div className="container sample">      
                 <div className="container horizontal wrapper">
-                    <IgrGrid autoGenerate={false} cellSelection="multiple" data={data} rangeSelected={onGridRangeSelected} width="40%">
+                    <IgrGrid autoGenerate={false} cellSelection="multiple" data={data} onRangeSelected={onGridRangeSelected} width="40%">
                         <IgrColumn field="ProductID" header="Product ID">
                         </IgrColumn>
                         <IgrColumn field="ProductName" header="Product Name">

samples/grids/hierarchical-grid/cell-editing-sample/src/index.tsx

@@ -39,6 +39,7 @@ export default class Sample extends React.Component<any, any> {
             <div className="container fill">
                 <IgrHierarchicalGrid
                     autoGenerate={false}
+                    ref={this.hierarchicalGrid1Ref}
                     data={this.hGridDndData}
                     primaryKey="Name">
                     <IgrColumn

samples/grids/hierarchical-grid/editing-events/src/index.tsx

@@ -139,7 +139,7 @@ export default class Sample extends React.Component<any, any> {
         return this._componentRenderer;
     }
 
-    public webGridEditingEventsCellEdit(sender: IgrHierarchicalGrid, args: IgrGridEditEventArgs): void {
+    public webGridEditingEventsCellEdit(args: IgrGridEditEventArgs): void {
         var d = args.detail;
 
         if (d.column != null && d.column.field == "UnitsOnOrder") {

samples/grids/tree-grid/cell-editing-sample/src/index.tsx

@@ -42,6 +42,7 @@ export default class Sample extends React.Component<any, any> {
                     id="treeGrid1"
                     data={this.roleplayTreeGridData}
                     primaryKey="ID"
+                    ref={this.treeGrid1Ref}
                     foreignKey="ParentID">
                     <IgrColumn
                         field="Name"

samples/grids/tree-grid/editing-events/src/index.tsx

@@ -85,7 +85,7 @@ export default class Sample extends React.Component<any, any> {
         return this._componentRenderer;
     }
 
-    public webTreeGridCellEdit(sender: IgrTreeGrid, args: IgrGridEditEventArgs): void {
+    public webTreeGridCellEdit(args: IgrGridEditEventArgs): void {
         const column = args.detail.column;
 
         if (column.field === 'Age') {

samples/grids/tree-grid/multi-cell-selection-mode/src/index.tsx

@@ -7,7 +7,7 @@ import {
   IgrTreeGridModule,
   IgrGridBaseDirective,
 } from "igniteui-react-grids";
-import { IgrGrid, IgrTreeGrid, IgrColumn } from "igniteui-react-grids";
+import { IgrGrid, IgrTreeGrid, IgrColumn, IgrGridSelectionRangeEventArgs } from "igniteui-react-grids";
 import { EmployeesFlatData } from "./EmployeesFlatData";
 
 import "igniteui-react-grids/grids/combined";
@@ -24,8 +24,8 @@ export default function App() {
   const leftTreeGridRef = useRef<IgrTreeGrid>(null);
   const rightGridRef = useRef<IgrGrid>(null);
 
-  function handleTreeGridRangeSelectionChanged(grid: IgrGridBaseDirective) {
-    rightGridRef.current!.data = grid.getSelectedData(
+  function handleTreeGridRangeSelectionChanged(args: IgrGridSelectionRangeEventArgs) {
+    rightGridRef.current!.data = (args.target as any).getSelectedData(
       false,
       false
     ) as unknown as any[];
@@ -44,7 +44,7 @@ export default function App() {
           primaryKey="ID"
           foreignKey="ParentID"
           cellSelection="multiple"
-          rangeSelected={handleTreeGridRangeSelectionChanged}
+          onRangeSelected={handleTreeGridRangeSelectionChanged}
         >
           <IgrColumn field="ID" dataType="number" />
           <IgrColumn field="Name" dataType="string" />