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

Author: Nithishk1

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

@@ -11,15 +11,23 @@ documentation: ug
 
 This guide demonstrates how to implement dropdown functionality within cells using custom templates in the Syncfusion React Spreadsheet component.
 
+A template name is added to the cell through setCell, and this tells the Spreadsheet to display a dropdown component instead of normal text.
+
+The dropdown is created using the given options, and after the template is applied, resize is called so the cell adjusts properly.
+
+Templates can also be added automatically when the Spreadsheet is created. For example, you can mark a range of cells with the dropdown template during the created event. This helps when you want certain columns to always show dropdowns without manually updating cells one by one.
+
+You can also add dropdowns dynamically. A custom Ribbon tab is added with a button that inserts a dropdown into the currently selected cell. When the user clicks this button, the template is applied to that cell immediately. This makes it easy for users to add dropdowns anywhere in their sheet while working.
+
+### Dropdown insertion logic
+
 Mark cells with a template and sets `setCell(0, col, sheet, { template: 'dropdown-list' })`.
 Initiate the `DropDownList` using `dropDownOptions`.
 The calls `resize()` after applying templates.
 On selection, call `updateCell({ value })` to save the chosen value in the sheet.
 Apply templates programmatically with `setCell` during `created` to pre-configure ranges.
 
-You can also create custom button to dynamically add dropdown lists to specific cells.
-
-A custom Ribbon tab ("Template" -> "DropDown List") is added via addRibbonTabs in created, enabling a dropdown to be injected into the active cell.
+If you want to create custom button to dynamically add dropdown lists to specific cells, custom Ribbon tab ("Template" -> "DropDown List") is added via addRibbonTabs in created, enabling a dropdown to be injected into the active cell.
 
 The following code example shows how to add a dropdown from a custom template:
 

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

@@ -11,10 +11,22 @@ documentation: ug
 
 This guide demonstrates how to add a custom icons in cells in the Syncfusion React Spreadsheet component.
 
+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.
 
 The following code example shows how to add custom icons to cells for grouping functionality:

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

@@ -9,6 +9,12 @@ documentation: ug
 
 ## 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.
+
+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.
+
+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.