1012637: updated How to session for react spreadsheet in ug documentation

Author: Nithishk1

Document-Processing-toc.html

@@ -5314,9 +5314,9 @@
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/find-replace-in-range">Find and replace the text within the selected range of cells</a></li>
-									<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-dynamic-cell-template">Add dynamic cell templates in the spreadsheet</a></li>
-									<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-cell-icon">Add an icon to the cell in the spreadsheet</a></li>
-									<li><a href="/document-processing/excel/spreadsheet/react/how-to/get-filtered-data">Get the filtered row data in a spreadsheet</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-dynamic-cell-template">Add dynamic cell templates</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-cell-icon">Add an icon to the cell</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/get-filtered-data">Get the filtered row data</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>

Document-Processing/Excel/Spreadsheet/React/how-to/add-dynamic-cell-template.md

@@ -9,11 +9,9 @@ documentation: ug
 
 # Create Dynamic Cell Templates with Dropdowns in React Spreadsheet
 
-In the Syncfusion Spreadsheet, you can add custom templates in cells. Before, cell templates were added by using the `template` property inside ranges, and templates were rendered through the `beforeCellRender` event.
+You can add templates to cells in the Syncfusion Spreadsheet component by dynamically assigning a custom template property directly to individual cells. When a cell has this custom template property, you can use the [beforeCellRender](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellrender) event to append the desired template element to the cell. You can initialize programmatically in the [created](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#created) event to apply templates to cells.
 
-But you can apply custom templates by assigning a template name directly to a cell. During `beforeCellRender`, the Spreadsheet checks for this template and renders the template. Templates can be added when the sheet loads or applied to any selected cell.
-
-The following sample shows how to add custom dropdown template in cells. It includes a custom Ribbon tab named template with a dropdown button. You can also initialize the templates to the cells. When the dropdown list button is clicked, the Spreadsheet dynamically applies the dropdown template to the currently active cell.
+The following sample demonstrates how to insert a [Syncfusion Dropdown component](https://www.npmjs.com/package/@syncfusion/ej2-dropdowns) into Spreadsheet cells using this custom template property. Additionally, a custom ribbon item named "DropDown List" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts a dropdown into the currently active cell.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

Document-Processing/Excel/Spreadsheet/React/how-to/find-replace-in-range.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Find and replace the text within the selected range of cells
 
-In the Syncfusion Spreadsheet, you can limit the Replace All action so that it updates only the cells inside the user’s selected range. When the replace operation begins, the selection is read and converted into individual cell addresses. During the beforeReplaceAll action, the list of cells targeted by Replace All is filtered so only the addresses inside the selected ranges are collected by generateCellCollection method.
+In Syncfusion Spreadsheet, the "Replace all" action normally searches the entire sheet and does not consider the user's selected range. The sample below shows how you can prevent the Replace all operation to entire sheet, so it updates only the cells inside the selected range.
 
-The following sample shows how the selected range is expanded, compared with address collection, and updated so that Replace All applies only the chosen cells in the active sheet.
+The selected range is captured during the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event. This range is then expanded into individual cell addresses. The cell value is replaced only if it falls within this selected range.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

Document-Processing/Excel/Spreadsheet/React/how-to/get-filtered-data.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Get filtered row data in React Spreadsheet
 
-Filtering allows you to view specific rows that match your criteria while hiding the rest. You can enable filtering using the [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowfiltering) property and apply filters through the UI or with the [applyFilter](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#applyfilter) method in code. The filtered rows can be identified by iterating through the row collection on the sheet and using the isFiltered property available in each row object. The filtered row includes an `isFiltered` flag that tells whether the row is hidden or visible.
+Filtering in the Syncfusion Spreadsheet allows you to display only the rows that match your criteria, hiding all others. You can enable filtering by setting the [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowfiltering) property, and apply filters either through the UI or programmatically using the [applyFilter](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#applyfilter) method. To identify which rows are filtered, iterate through the sheet's row collection and check the `isFiltered` property of each row object. This flag indicates whether a row is currently hidden due to filtering.
 
 The following example shows how to get the filtered rows from the Spreadsheet:
 

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

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
 
 function App() {

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

@@ -1,14 +1,15 @@
 import React, { useRef } 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);
 
   // To create plus icon wrapper.
   const createPlusIconWrapper = (): HTMLElement => {
-    const wrapperDiv = document.createElement('div');
+    const wrapperDiv: HTMLDivElement = document.createElement('div');
     wrapperDiv.className = 'e-custom-wrapper';
-    const iconSpan = document.createElement('span');
+    const iconSpan: HTMLSpanElement = document.createElement('span');
     iconSpan.className = 'e-icons e-plus e-custom-icon';
     wrapperDiv.appendChild(iconSpan);
     return wrapperDiv;
@@ -33,7 +34,7 @@ function App(): React.ReactElement {
             click: () => {
               if (!spreadsheetRef.current) return;
               // Add the plus icon template to the selected cell
-              const sheet = spreadsheetRef.current.getActiveSheet();
+              const sheet: any = spreadsheetRef.current.getActiveSheet();
               spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, (sheet as any).activeCell);
               spreadsheetRef.current.resize();
             },
@@ -47,7 +48,7 @@ function App(): React.ReactElement {
   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 = createPlusIconWrapper();
+      const wrapperDiv: HTMLElement = createPlusIconWrapper();
       args.element.insertBefore(wrapperDiv, args.element.firstChild);
     }
   };

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

@@ -54,6 +54,9 @@ function App() {
       placeholder: 'Select a value',
       dataSource: legendOptions,
       cssClass: 'e-dropdown-list',
+      change: (event)=>{
+        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,8 +1,9 @@
-import { useRef } from 'react';
+import React, { useRef } 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() {
+function App(): React.ReactElement {
   let spreadsheet: SpreadsheetComponent | null = null;
   const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
 
@@ -16,18 +17,18 @@ function App() {
     spreadsheet.addRibbonTabs([{ header: { text: 'Template' }, content: [{
       text: 'DropDown List', click: () => {
         if (!spreadsheet) return;
-        const sheet = spreadsheet.getActiveSheet();
-        const [rowIdx, colIdx] = getCellIndexes((sheet as any).activeCell);
-        const cellModel = getCell(rowIdx, colIdx, sheet as any);
-        const cellEle = spreadsheet.getCell(rowIdx, colIdx);
+        const sheet: any = spreadsheet.getActiveSheet();
+        const [rowIdx, colIdx]: number[] = getCellIndexes((sheet as any).activeCell);
+        const cellModel: any = getCell(rowIdx, colIdx, sheet as any);
+        const cellEle: HTMLElement = spreadsheet.getCell(rowIdx, colIdx) as HTMLElement;
         if (cellModel && (cellModel as any).template === 'dropdown-list') return;
         addDropDownlist(cellEle as any, dropDownOptions);
       }
     }] }]);
 
     spreadsheet.setRowsHeight(35, ['1:100']);
     // Rendering dropdown list for a specific range initially.
-    const activeSheet = spreadsheet.getActiveSheet();
+    const activeSheet: any = spreadsheet.getActiveSheet();
     for (let colIdx = 0; colIdx <= 3; colIdx++) {
         setCell(0, colIdx, activeSheet as any, { template: 'dropdown-list' } as any, true);
     }
@@ -47,12 +48,15 @@ function App() {
   // To render the dropdown list.
   const addDropDownlist = (element: HTMLElement, legendOptions: number[]): void => {
     element.innerHTML = '';
-    const inputEle = 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);
+      }
     }, inputEle);
   };
 

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

@@ -1,49 +1,46 @@
 import * as React from 'react';
-import './App.css';
+import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
 import { getDefaultData } from './data';
 
 function App() {
   const spreadsheetRef = React.useRef(null);
 
   const actionBegin = (args) => {
-    const action = args?.action;
-    const eventArgs = args?.eventArgs;
+    const action = args.action;
+    const eventArgs = args.args.eventArgs;
 
     // Check the action is beforeReplaceAll.
     if (action === 'beforeReplaceAll') {
-      // Check the mode is Sheet.
-      if (eventArgs?.mode === 'Sheet') {
-        const spreadsheet = spreadsheetRef.current;
-        if (!spreadsheet) return;
-
-        // Get the active sheet's selected range.
-        const selectedRange = spreadsheet.getActiveSheet()?.selectedRange;
-        if (!selectedRange) return;
-
-        // Convert the selected range into cell collection.
-        const selectedRangeCollection = generateCellCollection(selectedRange, spreadsheet);
-        const replaceAllCollection = eventArgs.addressCollection;
-        if (!Array.isArray(replaceAllCollection)) return;
-
-        // Create a Set from selectedRangeCollection for efficient lookup.
-        const selectedSet = new Set(selectedRangeCollection);
-        const updatedCollection = [];
-
-        // Iterate through replaceAllCollection and keep only cells within selection.
-        for (const cell of replaceAllCollection) {
-          if (cell && selectedSet.has(cell)) {
-            updatedCollection.push(cell);
-          } else {
-            // If the cell is not in selectedRangeCollection, add null to the updated collection
-            updatedCollection.push(null);
-          }
+      const spreadsheet = spreadsheetRef.current;
+      if (!spreadsheet) return;
+
+      // Get the active sheet's selected range.
+      const selectedRange = spreadsheet.getActiveSheet()?.selectedRange;
+      if (!selectedRange) return;
+
+      // Convert the selected range into cell collection.
+      const selectedRangeCollection = generateCellCollection(selectedRange, spreadsheet);
+      const replaceAllCollection = eventArgs.addressCollection;
+      if (!Array.isArray(replaceAllCollection)) return;
+
+      // Create a Set from selectedRangeCollection for efficient lookup.
+      const selectedSet = new Set(selectedRangeCollection);
+      const updatedCollection = [];
+
+      // Iterate through replaceAllCollection and keep only cells within selection.
+      for (const cell of replaceAllCollection) {
+        if (cell && selectedSet.has(cell)) {
+          updatedCollection.push(cell);
+        } else {
+          // If the cell is not in selectedRangeCollection, add null to the updated collection
+          updatedCollection.push(null);
         }
+      }
 
-        if (updatedCollection.length > 0) {
-          // Assign the newly created cell collection to the addressCollection of replaceAll action.
-          eventArgs.addressCollection = updatedCollection;
-        }
+      if (updatedCollection.length > 0) {
+        // Assign the newly created cell collection to the addressCollection of replaceAll action.
+        eventArgs.addressCollection = updatedCollection;
       }
     }
   };

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

@@ -1,49 +1,46 @@
 import * as React from 'react';
-import './App.css';
+import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
 import { getDefaultData } from './data';
 
-function App() {
-  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
+function App(): React.ReactElement {
+  const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);
 
   const actionBegin = (args: any): void => {
-    const action = args?.action;
-    const eventArgs = args?.eventArgs;
+    const action: string = args.action;
+    const eventArgs: any= args.args.eventArgs;
 
     // Check the action is beforeReplaceAll.
     if (action === 'beforeReplaceAll') {
-      // Check the mode is Sheet.
-      if (eventArgs?.mode === 'Sheet') {
-        const spreadsheet = spreadsheetRef.current;
-        if (!spreadsheet) return;
-
-        // Get the active sheet's selected range.
-        const selectedRange: string | undefined = spreadsheet.getActiveSheet()?.selectedRange;
-        if (!selectedRange) return;
-
-        // Convert the selected range into cell collection.
-        const selectedRangeCollection: string[] = generateCellCollection(selectedRange, spreadsheet);
-        const replaceAllCollection: Array<string | null> = eventArgs.addressCollection as Array<string | null>;
-        if (!Array.isArray(replaceAllCollection)) return;
-
-        // Create a Set from selectedRangeCollection for efficient lookup.
-        const selectedSet = new Set(selectedRangeCollection);
-        const updatedCollection: Array<string | null> = [];
-
-        // Iterate through replaceAllCollection and keep only cells within selection.
-        for (const cell of replaceAllCollection) {
-          if (cell && selectedSet.has(cell)) {
-            updatedCollection.push(cell);
-          } else {
-            // If the cell is not in selectedRangeCollection, add null to the updated collection
-            updatedCollection.push(null);
-          }
+      const spreadsheet = spreadsheetRef.current;
+      if (!spreadsheet) return;
+
+      // Get the active sheet's selected range.
+      const selectedRange: string | undefined = spreadsheet.getActiveSheet()?.selectedRange;
+      if (!selectedRange) return;
+
+      // Convert the selected range into cell collection.
+      const selectedRangeCollection: string[] = generateCellCollection(selectedRange, spreadsheet);
+      const replaceAllCollection: Array<string | null> = eventArgs.addressCollection as Array<string | null>;
+      if (!Array.isArray(replaceAllCollection)) return;
+
+      // Create a Set from selectedRangeCollection for efficient lookup.
+      const selectedSet: Set<string> = new Set<string>(selectedRangeCollection);
+      const updatedCollection: Array<string | null> = [];
+
+      // Iterate through replaceAllCollection and keep only cells within selection.
+      for (const cell of replaceAllCollection) {
+        if (cell && selectedSet.has(cell)) {
+          updatedCollection.push(cell);
+        } else {
+          // If the cell is not in selectedRangeCollection, add null to the updated collection
+          updatedCollection.push(null);
         }
+      }
 
-        if (updatedCollection.length > 0) {
-          // Assign the newly created cell collection to the addressCollection of replaceAll action.
-          eventArgs.addressCollection = updatedCollection;
-        }
+      if (updatedCollection.length > 0) {
+        // Assign the newly created cell collection to the addressCollection of replaceAll action.
+        eventArgs.addressCollection = updatedCollection;
       }
     }
   };