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

Author: Nithishk1

Document-Processing-toc.html

@@ -5314,7 +5314,7 @@
 									<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/dynamic-cell-dropdown">Add dynamic cell templates in the spreadsheet</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/dynamic-cell-template">Add dynamic cell templates in the spreadsheet</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/dynamic-cell-icon">Add an icon to the cell in the spreadsheet</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/filter-row">Get the filtered row data in a spreadsheet</a></li>
 								</ul>

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

@@ -7,27 +7,11 @@ platform: document-processing
 documentation: ug
 ---
 
-## Add Custom Icons to Cells in React Spreadsheet
+# Add Custom Icons to Cells in React Spreadsheet
 
-This guide demonstrates how to add a custom icons in cells in the Syncfusion React Spreadsheet component.
+Icons can be initialized directly in specific cells when the sheet loads. A custom Ribbon tab can also be added so you can insert the icon into the selected cell. You can attach your own event for actions to that icon such as showing child rows, inserting new rows, loading extra data, or anything else you need.
 
-A template name is assigned to the cell, and this tells the Spreadsheet to render a custom DOM element instead of normal text. The icon is created using a wrapper function, and during beforeCellRender the wrapper is inserted into the cell when the template name matches. 
-
-You can mark a cell with this template using updateCell, or you can apply templates automatically in the created event if you want certain cells to show icons when the sheet loads.
-
-You can also add a custom button in the Ribbon so users can insert the icon into the active cell at any time. When the user clicks the button, the template is applied to the selected cell immediately.
-
-The icon inside the cell acts like a normal clickable element. You can attach your own event for actions such as showing child rows, inserting new rows, loading extra data, or anything else you need. The logic stays simple because the cell only stores the template name, and the actual icon is inserted during rendering.
-
-### Icon insertion logic:
-
-Add icons into cells by marking a cell with a template (for example, `updateCell({ template: 'plus-icon' }, address)`) or by initializing templates programmatically in `created`.
-The sample creates a DOM wrapper via `createPlusIconWrapper()` and inserts it in `beforeCellRender` when `cell.template === 'plus-icon'`.
-
-You can add the template to the active cell via a custom ribbon button (the sample uses `addRibbonTabs` → "Add Icon"), or apply templates to ranges on initialization.
-When inserted, the icon is a clickable DOM element you control; handle clicks to perform actions like expanding rows, loading data, or inserting rows.
-
-This approach keeps logic simple: mark cells with a template, render a small DOM icon in `beforeCellRender`, and respond to click events to implement custom behavior.
+Add icons using [updateCell](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#updatecell) method. A wrapper element is generated and inserted in `beforeCellRender` when the cell contains the icon template.
 
 The following code example shows how to add custom icons to cells for grouping functionality:
 

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

@@ -7,17 +7,9 @@ platform: document-processing
 documentation: ug
 ---
 
-## Get filtered row data in React Spreadsheet
+# Get filtered row data in React Spreadsheet
 
-This guide explains how to get the filtered row data in the Syncfusion React Spreadsheet component.
-
-When filtering is used, some rows stay visible and the others are hidden. To get only the filtered rows, you can loop through the row collection in the active sheet. Each row has an `isFiltered` property that tells whether the row is hidden by the filter. Rows that are not filtered can then be processed or used for your own logic.
-
-You can apply filters through the UI or use the `applyFilter` method in code. After filtering, you can get the filtered results in a simple way by checking each row and picking the ones that are currently shown to the user.
-
-### Filtered row extraction logic:
-
-Filtering can be enabled with the `allowFiltering` property. After a filter is applied, the row objects in the active sheet include an `isFiltered` flag. By checking this flag, you can identify which rows are included in the filter results. This helps when you need to work only with the visible rows, such as exporting, validating, or processing filtered data.
+You can read only the visible rows after filtering by checking the `isFiltered` property on each row. Filters can be applied through the UI or by using `applyFilter` in code, and the same row collection can then be used to extract the filtered data. This helps when you need to work only with the displayed rows for tasks such as exporting, validating, or processing filtered content.
 
 The following example shows how to get the filtered rows from the Spreadsheet:
 

Document-Processing/Excel/Spreadsheet/React/how-to/filter-row.md

@@ -7,21 +7,13 @@ platform: document-processing
 documentation: ug
 ---
 
-## Find and replace the text within the selected range of cells
+# Find and replace the text within the selected range of cells
 
-It explains how you can limit the Find and Replace action so it works only inside the cells that the user has selected.
+You can limit Replace All so it only updates the cells inside the selected range. When the action runs, the selected range is expanded into individual cell addresses and compared with the cells returned by Replace All.
 
-When the user clicks Replace All, the Spreadsheet normally searches the whole sheet. To avoid that, the action is checked before it runs. During this check, the selected range in the active sheet is read and expanded into individual cell addresses.
+Intercepts the beforeReplaceAll action via [actionBegin](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin), reads selectedRange, expands it to cell addresses, and filters addressCollection to match only the selection.
 
-The list of cells that the Replace All action plans to update is then filtered, keeping only the addresses that fall inside the selected range. With this, Replace All updates only the cells the user has selected and nothing outside that area.
-
-Limit the Replace All operation to the user’s current selection by intercepting the Replace action (`actionBegin`) and filtering `eventArgs.addressCollection` using `getActiveSheet().selectedRange`. This ensures only addresses inside the selected range are updated.
-
-This guide explains how to limit the “Replace All” operation so that replacements occur only within the currently selected range of cells in the Syncfusion React Spreadsheet component.
-
-Intercepts the beforeReplaceAll action via [actionBegin](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin), reads getActiveSheet().selectedRange, expands it to cell addresses, and filters eventArgs.addressCollection to match only the selection.
-
-The following code example shows how to find and replace the text within the selected range of cells
+The following code example shows how to find and replace the text within the selected range of cells:
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

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

@@ -17,7 +17,12 @@ function App() {
   // Triggers after the component is created
   const handleCreated = () => {
     if (!spreadsheetRef.current) return;
-    // Add a header Ribbon tab with a button to initialize everything on click.
+    // 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' },
@@ -53,8 +58,6 @@ function App() {
         ref={spreadsheetRef}
         created={handleCreated}
         beforeCellRender={handleBeforeCellRender}
-        openUrl="https://services.syncfusion.com/js/production/api/spreadsheet/open"
-        saveUrl="https://services.syncfusion.com/js/production/api/spreadsheet/save"
       />
     </div>
   );

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

@@ -17,7 +17,12 @@ function App(): React.ReactElement {
   // Triggers after the component is created
   const handleCreated = (): void => {
     if (!spreadsheetRef.current) return;
-    // Add a header Ribbon tab with a button to initialize everything on click.
+    // 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' },
@@ -53,8 +58,6 @@ function App(): React.ReactElement {
         ref={spreadsheetRef}
         created={handleCreated}
         beforeCellRender={handleBeforeCellRender}
-        openUrl="https://services.syncfusion.com/js/production/api/spreadsheet/open"
-        saveUrl="https://services.syncfusion.com/js/production/api/spreadsheet/save"
       />
     </div>
   );

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

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Essential JS 2 for React Components" />
     <meta name="author" content="Syncfusion" />
-    <link href="https://cdn.syncfusion.com/ej2/23.1.36/material.css" rel="stylesheet" type="text/css" />
+    <link href="https://cdn.syncfusion.com/ej2/23.1.36/tailwind3.css" rel="stylesheet" type="text/css" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>

Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/index.html

@@ -1,6 +1,6 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent, setCell } from '@syncfusion/ej2-react-spreadsheet';
+import { SpreadsheetComponent, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-react-spreadsheet';
 import { DropDownList } from '@syncfusion/ej2-dropdowns';
 
 function App() {
@@ -12,6 +12,20 @@ function App() {
   const onCreated = () => {
     spreadsheet = spreadsheetRef.current;
     if (!spreadsheet) return;
+
+    // Custom template tab to add dropdown to cell.
+    spreadsheet.addRibbonTabs([{ header: { text: 'Template' }, content: [{
+      text: 'DropDown List', click: () => {
+        if (!spreadsheet) return;
+        const sheet = spreadsheet.getActiveSheet();
+        const [rowIdx, colIdx] = getCellIndexes(sheet.activeCell);
+        const cellModel = getCell(rowIdx, colIdx, sheet);
+        const cellEle = spreadsheet.getCell(rowIdx, colIdx);
+        if (cellModel && cellModel.template === 'dropdown-list') return;
+        addDropDownlist(cellEle, dropDownOptions);
+      }
+    }] }]);
+
     spreadsheet.setRowsHeight(35, ['1:100']);
     // Rendering dropdown list for a specific range initially.
     const activeSheet = spreadsheet.getActiveSheet();
@@ -21,44 +35,25 @@ function App() {
     spreadsheet.resize();
   };
 
-  // If you want to handle the dropdown via a custom ribbon button, you can
-  // create a small handler like this:
-  // const handleCreated = () => {
-  //   const spreadsheet = spreadsheetRef.current;
-  //   spreadsheet.addRibbonTabs([{ header: { text: 'Template' }, content: [{
-  //     text: 'DropDown List', click: () => {
-  //       const sheet = spreadsheet.getActiveSheet();
-  //       const [rowIdx, colIdx] = getCellIndexes(sheet.activeCell);
-  //       const cellModel = getCell(rowIdx, colIdx, sheet);
-  //       const cellEle = spreadsheet.getCell(rowIdx, colIdx);
-  //       if (cellModel && cellModel.template === 'dropdown-list') return;
-  //       addDropDownlist(cellModel, cellEle, dropDownOptions);
-  //       spreadsheet.updateCell({ template: 'dropdown-list' }, sheet.activeCell);
-  //     }
-  //   }] }]);
-  // };
-
   // Triggers before the cell is appended to the DOM.
   const beforeCellRender = (args) => {
     if (args.rowIndex !== undefined && args.colIndex !== undefined) {
       // To render dropdown if template property 'dropdown-list' is set.
       if (args.cell && args.cell.template === 'dropdown-list') {
-        addDropDownlist(args.cell, args.element, dropDownOptions);
+        addDropDownlist(args.element, dropDownOptions);
       }
     }
   };
 
   // To render the dropdown list.
-  const addDropDownlist = (cell, element, legendOptions) => {
+  const addDropDownlist = (element, legendOptions) => {
     element.innerHTML = '';
     const inputEle = document.createElement('input');
     element.appendChild(inputEle);
     new DropDownList({
       placeholder: 'Select a value',
       dataSource: legendOptions,
       cssClass: 'e-dropdown-list',
-      // Preserve existing value if present
-      value: cell && cell.value ? cell.value : null,
     }, inputEle);
   };
 

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

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { SpreadsheetComponent, setCell } from '@syncfusion/ej2-react-spreadsheet';
+import { SpreadsheetComponent, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-react-spreadsheet';
 import { DropDownList } from '@syncfusion/ej2-dropdowns';
 
 function App() {
@@ -11,6 +11,20 @@ function App() {
   const onCreated = (): void => {
     spreadsheet = spreadsheetRef.current;
     if (!spreadsheet) return;
+
+    // Custom template tab to add dropdown to cell.
+    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);
+        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();
@@ -20,44 +34,25 @@ function App() {
     spreadsheet.resize();
   };
 
-  // If you want to handle the dropdown via a custom ribbon button, you can
-  // create a small handler like this:
-  // const handleCreated = (): void => {
-  //   const spreadsheet = spreadsheetRef.current!;
-  //   spreadsheet.addRibbonTabs([{ header: { text: 'Template' }, content: [{
-  //     text: 'DropDown List', click: () => {
-  //       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);
-  //       if (cellModel && (cellModel as any).template === 'dropdown-list') return;
-  //       addDropDownlist(cellModel, cellEle as any, dropDownOptions);
-  //       spreadsheet.updateCell({ template: 'dropdown-list' } as any, (sheet as any).activeCell);
-  //     }
-  //   }] }]);
-  // };
-
   // Triggers before the cell is appended to the DOM.
   const beforeCellRender = (args: any): void => {
     if (args.rowIndex !== undefined && args.colIndex !== undefined) {
       // To render dropdown if template property 'dropdown-list' is set.
       if (args.cell && args.cell.template === 'dropdown-list') {
-        addDropDownlist(args.cell, args.element as HTMLElement, dropDownOptions);
+        addDropDownlist(args.element as HTMLElement, dropDownOptions);
       }
     }
   };
 
   // To render the dropdown list.
-  const addDropDownlist = (cell: any, element: HTMLElement, legendOptions: number[]): void => {
+  const addDropDownlist = (element: HTMLElement, legendOptions: number[]): void => {
     element.innerHTML = '';
     const inputEle = document.createElement('input');
     element.appendChild(inputEle);
     new DropDownList({
       placeholder: 'Select a value',
       dataSource: legendOptions,
       cssClass: 'e-dropdown-list',
-      // Preserve existing value if present
-      value: cell && cell.value ? (cell.value as any) : null,
     }, inputEle);
   };