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/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>
+									<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>
 								</ul>
 							</li>
 							<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>

…dsheet/React/how-to/dynamic-cell-icon.md …preadsheet/React/how-to/add-cell-icon.mdDocument-Processing/Excel/Spreadsheet/React/how-to/dynamic-cell-icon.md renamed to Document-Processing/Excel/Spreadsheet/React/how-to/add-cell-icon.md Document-Processing/Excel/Spreadsheet/React/how-to/dynamic-cell-icon.md renamed to Document-Processing/Excel/Spreadsheet/React/how-to/add-cell-icon.md

@@ -9,11 +9,9 @@ documentation: ug
 
 # Add Custom Icons to Cells in React Spreadsheet
 
-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.
+In the Syncfusion Spreadsheet, you can render custom icons inside specific cells by defining a custom template property within the cell model. During the [beforeCellRender](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellrender) event, the icon element can be appended to the corresponding table cell (td) by checking whether the cell contains this template property.
 
-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:
+The following sample demonstrates how to add icons to cells by assigning the template property in the cell definition. Additionally, a custom ribbon item named "Add Icon" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts an icon into the currently active cell.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

…et/React/how-to/dynamic-cell-template.md …eact/how-to/add-dynamic-cell-template.mdDocument-Processing/Excel/Spreadsheet/React/how-to/dynamic-cell-template.md renamed to Document-Processing/Excel/Spreadsheet/React/how-to/add-dynamic-cell-template.md Document-Processing/Excel/Spreadsheet/React/how-to/dynamic-cell-template.md renamed to Document-Processing/Excel/Spreadsheet/React/how-to/add-dynamic-cell-template.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Create Dynamic Cell Templates with Dropdowns in React Spreadsheet
 
-Templates can be added directly to cells or initialized for a range of cells. A custom Ribbon tab can also be added so users can insert a dropdown into the selected cell.
+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.
 
-When the user picks an item, the chosen value is written back into the sheet, keeping the cell updated. This keeps the dropdown feature simple, as only the template name is stored and the control is created during rendering. You can also add your own custom template to display any UI element you need inside the cell.
+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 code example shows how to add a dropdown from a custom template:
+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.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

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

@@ -9,11 +9,9 @@ documentation: ug
 
 # Find and replace the text within the selected range of cells
 
-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.
+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.
 
-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 following code example shows how to find and replace the text within the selected range of cells:
+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.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

…l/Spreadsheet/React/how-to/filter-row.md …dsheet/React/how-to/get-filtered-data.mdDocument-Processing/Excel/Spreadsheet/React/how-to/filter-row.md renamed to Document-Processing/Excel/Spreadsheet/React/how-to/get-filtered-data.md Document-Processing/Excel/Spreadsheet/React/how-to/filter-row.md renamed to Document-Processing/Excel/Spreadsheet/React/how-to/get-filtered-data.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Get filtered row data in React Spreadsheet
 
-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.
+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.
 
 The following example shows how to get the filtered rows from the Spreadsheet:
 

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

@@ -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/tailwind3.css" rel="stylesheet" type="text/css" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/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/systemjs.config.js

@@ -14,7 +14,7 @@ System.config({
         }
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
     },
     map: {
         app: 'app',

Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/index.html

@@ -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/tailwind3.css" rel="stylesheet" type="text/css" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/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/dynamic-cell-template-cs1/systemjs.config.js

@@ -14,7 +14,7 @@ System.config({
         }
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
     },
     map: {
         app: 'app',

Document-Processing/code-snippet/spreadsheet/react/filter-cs2/index.html

@@ -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/24.1.41/tailwind3.css" rel="stylesheet" type="text/css" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/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>