1011961: Updated the preview samples code for how to session

Author: Nithishk1

Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx

@@ -1,29 +1,26 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
 
 function App() {
-  const spreadsheetRef = useRef(null);
+  const spreadsheetRef = React.useRef(null);
 
   // To create plus icon wrapper.
   const createPlusIconWrapper = () => {
-    const wrapperDiv = document.createElement('div');
+    const wrapperDiv = document.createElement("div");
     wrapperDiv.className = 'e-custom-wrapper';
-    const iconSpan = document.createElement('span');
+    const iconSpan = document.createElement("span");
     iconSpan.className = 'e-icons e-plus e-custom-icon';
     wrapperDiv.appendChild(iconSpan);
     return wrapperDiv;
   };
 
-  // Triggers after the component is created
   const handleCreated = () => {
     if (!spreadsheetRef.current) return;
-    // Initialize icons in the cells when the spreadsheet loads.
     spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'A1');
     spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'B1');
     spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'C1');
     spreadsheetRef.current.resize();
-    // This is to Add a header Ribbon tab with a button to initialize everything on click.
     spreadsheetRef.current.addRibbonTabs([
       {
         header: { text: 'Template' },
@@ -33,7 +30,6 @@ function App() {
             tooltipText: 'Initialize',
             click: () => {
               if (!spreadsheetRef.current) return;
-              // Add the plus icon template to the selected cell
               const sheet = spreadsheetRef.current.getActiveSheet();
               spreadsheetRef.current.updateCell({ template: 'plus-icon' }, sheet.activeCell);
               spreadsheetRef.current.resize();
@@ -44,10 +40,8 @@ function App() {
     ]);
   };
 
-  // Triggers before the cell is appended to DOM
   const handleBeforeCellRender = (args) => {
     if (args.cell && args.cell.template === 'plus-icon') {
-      // Pass the rowIndex to the wrapper to make the click handler reliable.
       const wrapperDiv = createPlusIconWrapper();
       args.element.insertBefore(wrapperDiv, args.element.firstChild);
     }

Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx

@@ -1,29 +1,26 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
 
 function App(): React.ReactElement {
-  const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
+  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
 
   // To create plus icon wrapper.
   const createPlusIconWrapper = (): HTMLElement => {
-    const wrapperDiv: HTMLDivElement = document.createElement('div');
+    const wrapperDiv: HTMLDivElement = document.createElement("div");
     wrapperDiv.className = 'e-custom-wrapper';
-    const iconSpan: HTMLSpanElement = document.createElement('span');
+    const iconSpan: HTMLSpanElement = document.createElement("span");
     iconSpan.className = 'e-icons e-plus e-custom-icon';
     wrapperDiv.appendChild(iconSpan);
     return wrapperDiv;
   };
 
-  // Triggers after the component is created
   const handleCreated = (): void => {
     if (!spreadsheetRef.current) return;
-    // Initialize icons in the cells when the spreadsheet loads.
     spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'A1');
     spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'B1');
     spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'C1');
     spreadsheetRef.current.resize();
-    // This is to Add a header Ribbon tab with a button to initialize everything on click.
     spreadsheetRef.current.addRibbonTabs([
       {
         header: { text: 'Template' },
@@ -33,9 +30,11 @@ function App(): React.ReactElement {
             tooltipText: 'Initialize',
             click: () => {
               if (!spreadsheetRef.current) return;
-              // Add the plus icon template to the selected cell
               const sheet: any = spreadsheetRef.current.getActiveSheet();
-              spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, (sheet as any).activeCell);
+              spreadsheetRef.current.updateCell(
+                { template: 'plus-icon' } as any,
+                sheet.activeCell
+              );
               spreadsheetRef.current.resize();
             },
           },
@@ -44,10 +43,8 @@ function App(): React.ReactElement {
     ]);
   };
 
-  // Triggers before the cell is appended to DOM
   const handleBeforeCellRender = (args: any) => {
     if (args.cell && args.cell.template === 'plus-icon') {
-      // Pass the rowIndex to the wrapper to make the click handler reliable.
       const wrapperDiv: HTMLElement = createPlusIconWrapper();
       args.element.insertBefore(wrapperDiv, args.element.firstChild);
     }

Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx

@@ -1,11 +1,11 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-react-spreadsheet';
 import { DropDownList } from '@syncfusion/ej2-dropdowns';
 
 function App() {
   let spreadsheet = null;
-  const spreadsheetRef = useRef(null);
+  const spreadsheetRef = React.useRef(null);
 
   const dropDownOptions = [10, 20, 30, 40, 50, 60];
 
@@ -48,14 +48,14 @@ function App() {
   // To render the dropdown list.
   const addDropDownlist = (element, legendOptions) => {
     element.innerHTML = '';
-    const inputEle = document.createElement('input');
+    const inputEle = document.createElement("input");
     element.appendChild(inputEle);
     new DropDownList({
       placeholder: 'Select a value',
       dataSource: legendOptions,
       cssClass: 'e-dropdown-list',
       change: (event)=>{
-        spreadsheetRef.current?.updateCell({value: event.value.toString()}, ( spreadsheet?.getActiveSheet()).activeCell);
+        spreadsheetRef.current.updateCell({value: event.value.toString()}, ( spreadsheet.getActiveSheet()).activeCell);
       }
     }, inputEle);
   };

Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx

@@ -1,11 +1,11 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-react-spreadsheet';
 import { DropDownList } from '@syncfusion/ej2-dropdowns';
 
 function App(): React.ReactElement {
-  let spreadsheet: SpreadsheetComponent | null = null;
-  const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
+  let spreadsheet: SpreadsheetComponent = null;
+  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
 
   const dropDownOptions: number[] = [10, 20, 30, 40, 50, 60];
 
@@ -48,14 +48,14 @@ function App(): React.ReactElement {
   // To render the dropdown list.
   const addDropDownlist = (element: HTMLElement, legendOptions: number[]): void => {
     element.innerHTML = '';
-    const inputEle: HTMLInputElement = document.createElement('input');
+    const inputEle: HTMLInputElement = document.createElement("input");
     element.appendChild(inputEle);
     new DropDownList({
       placeholder: 'Select a value',
       dataSource: legendOptions,
       cssClass: 'e-dropdown-list',
       change: (event: any)=>{
-        spreadsheetRef.current?.updateCell({value: event.value.toString()}, ( spreadsheet?.getActiveSheet() as any).activeCell);
+        spreadsheetRef.current.updateCell({value: event.value.toString()}, ( spreadsheet.getActiveSheet() as any).activeCell);
       }
     }, inputEle);
   };

Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { getDefaultData } from './data';
+import { getDefaultData } from './datasource';
 
 function App() {
   const spreadsheetRef = React.useRef(null);
@@ -16,7 +16,7 @@ function App() {
       if (!spreadsheet) return;
 
       // Get the active sheet's selected range.
-      const selectedRange = spreadsheet.getActiveSheet()?.selectedRange;
+      const selectedRange = spreadsheet.getActiveSheet().selectedRange;
       if (!selectedRange) return;
 
       // Convert the selected range into cell collection.
@@ -54,7 +54,7 @@ function App() {
     endCell = endCell || startCell;
 
     // Get the name of the active sheet.
-    const activeSheetName = spreadsheet.getActiveSheet()?.name || 'Sheet1';
+    const activeSheetName = spreadsheet.getActiveSheet().name;
 
     // Extract column and row numbers from start and end cell references.
     const [startCol, startRow] = startCell.match(/[A-Z]+|\d+/g) || [];

Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { getDefaultData } from './data';
+import { getDefaultData } from './datasource';
 
 function App(): React.ReactElement {
   const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);
@@ -16,7 +16,7 @@ function App(): React.ReactElement {
       if (!spreadsheet) return;
 
       // Get the active sheet's selected range.
-      const selectedRange: string | undefined = spreadsheet.getActiveSheet()?.selectedRange;
+      const selectedRange: string | undefined = spreadsheet.getActiveSheet().selectedRange;
       if (!selectedRange) return;
 
       // Convert the selected range into cell collection.