Merge branch 'development' of https://github.com/syncfusion-content/document-processing-docs into EJ2-1011961-ug

Author: Nithishk1

Document-Processing-toc.html

@@ -5331,6 +5331,10 @@
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure">Create a object structure </a></li>
 									<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</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-cell-icon.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Add icons inside cells in React Spreadsheet component | Syncfusion
+description: Learn here all about adding icon inside cells using a custom template in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Add Custom Icons to Cells in React Spreadsheet
+
+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.
+
+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" %}
+{% include code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1" %}

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

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Dynamic cell template in React Spreadsheet component | Syncfusion
+description: Render dropdown templates inside cells in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Create Dynamic Cell Templates with Dropdowns in React Spreadsheet
+
+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.
+
+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" %}
+{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1" %}

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

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Find and replace in range in React Spreadsheet component | Syncfusion
+description: Learn here all about performing find and replace limited to the range in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Find and replace the text within the selected range of cells
+
+In Syncfusion Spreadsheet, the "Replace All" action by default searches and replaces a text throughout the entire sheet, regardless of the selected range. To limit "Replace All" to only the selected range, you can customize the addressCollection based on the selectedRange in the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event when the action is `beforeReplaceAll`.
+
+The following sample demonstrates how to limit the "Replace All" operation to the currently selected range.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/find-and-replace-cs1" %}

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

@@ -0,0 +1,31 @@
+---
+layout: post
+title: Retrieve filtered row data in React Spreadsheet component | Syncfusion
+description: Learn here all about getting filtered row data in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Get filtered row data in React Spreadsheet
+
+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:
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/filter-cs2/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/filter-cs2/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/filter-cs2/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/filter-cs2/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/filter-cs2" %}

…act/Open-Excel-File/from-google-drive.md …act/open-excel-file/from-google-drive.mdDocument-Processing/Excel/Spreadsheet/React/Open-Excel-File/from-google-drive.md renamed to Document-Processing/Excel/Spreadsheet/React/open-excel-file/from-google-drive.md Document-Processing/Excel/Spreadsheet/React/Open-Excel-File/from-google-drive.md renamed to Document-Processing/Excel/Spreadsheet/React/open-excel-file/from-google-drive.md

@@ -230,74 +230,50 @@ The Syncfusion PowerPoint Library enables developers to create, read, edit, and
 
 The Syncfusion Spreadsheet Editor SDK component enables developers to create, view, edit, and analyze spreadsheets directly in web and desktop applications across multiple platforms, including Angular, React, Vue, JavaScript, Blazor, ASP.NET Core, and more.
 
-{% tabs %}
-{% highlight tabtitle="Initialize Spreadsheet" %}
+{% promptcards %}
+{% promptcard Initialize Spreadsheet %}
 #SyncfusionSpreadsheetEditorSDKAssistant How do I initialize a basic Spreadsheet in Angular with default settings?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Data Binding" %}
+{% endpromptcard %}
+{% promptcard Data Binding %}
 #SyncfusionSpreadsheetEditorSDKAssistant Show me how to bind local JSON data to the Spreadsheet in React?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Remote Data Binding" %}
+{% endpromptcard %}
+{% promptcard Remote Data Binding %}
 #SyncfusionSpreadsheetEditorSDKAssistant Provide an example of binding remote data in a Vue Spreadsheet?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Formulas and Calculation" %}
+{% endpromptcard %}
+{% promptcard Formulas and Calculation %}
 #SyncfusionSpreadsheetEditorSDKAssistant How can I enable formula support and use named ranges in the TypeScript Spreadsheet?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Charts" %}
+{% endpromptcard %}
+{% promptcard Charts %}
 #SyncfusionSpreadsheetEditorSDKAssistant How do I insert and customize a column chart in the Blazor Spreadsheet?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Data Validation" %}
+{% endpromptcard %}
+{% promptcard Data Validation %}
 #SyncfusionSpreadsheetEditorSDKAssistant Provide an example of adding list validation to cells in TypeScript?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Import and Export" %}
+{% endpromptcard %}
+{% promptcard Import and Export %}
 #SyncfusionSpreadsheetEditorSDKAssistant How do I import an Excel file and export the Spreadsheet as XLSX in ASP.NET Core?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Ribbon and Toolbar" %}
+{% endpromptcard %}
+{% promptcard Ribbon and Toolbar %}
 #SyncfusionSpreadsheetEditorSDKAssistant Show how to customize the ribbon toolbar and add custom buttons in the ASP.NET MVC Spreadsheet?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Grid Lines and Headers" %}
+{% endpromptcard %}
+{% promptcard Grid Lines and Headers %}
 #SyncfusionSpreadsheetEditorSDKAssistant How do I show or hide grid lines and row/column headers in the Windows Forms Spreadsheet?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Sheet Protection" %}
+{% endpromptcard %}
+{% promptcard Sheet Protection %}
 #SyncfusionSpreadsheetEditorSDKAssistant How can I protect a sheet with a password in the WPF Spreadsheet control?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Conditional Formatting" %}
+{% endpromptcard %}
+{% promptcard Conditional Formatting %}
 #SyncfusionSpreadsheetEditorSDKAssistant How do I apply conditional formatting such as color scales or data bars in the UWP Spreadsheet?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Cell Formatting" %}
+{% endpromptcard %}
+{% promptcard Cell Formatting %}
 #SyncfusionSpreadsheetEditorSDKAssistant How do I apply cell styles, number formatting, and wrap text in the TypeScript Spreadsheet?
-{% endhighlight %}
-{% endtabs %}
-{% tabs %}
-{% highlight tabtitle="Sorting and Filtering" %}
+{% endpromptcard %}
+{% promptcard Sorting and Filtering %}
 #SyncfusionSpreadsheetEditorSDKAssistant Show me how to enable sorting and filtering features in the React Spreadsheet?
-{% endhighlight %}
-{% endtabs %}
+{% endpromptcard %}
+{% endpromptcards %}
 
 ## See also
 
 * [AI Coding Assistant Overview](https://help.syncfusion.com/document-processing/ai-coding-assistant/overview)
 * [SyncfusionDocumentSDKAssistant MCP Server](https://www.npmjs.com/package/@syncfusion/documentsdk-assistant)
-* [SyncfusionSpreadsheetEditorSDKAssistant MCP Server](https://www.npmjs.com/package/@syncfusion/spreadsheeteditorsdk-assistant)
+* [SyncfusionSpreadsheetEditorSDKAssistant MCP Server](https://www.npmjs.com/package/@syncfusion/spreadsheeteditorsdk-assistant)

…React/Save-Excel-File/to-google-drive.md …React/save-excel-file/to-google-drive.mdDocument-Processing/Excel/Spreadsheet/React/Save-Excel-File/to-google-drive.md renamed to Document-Processing/Excel/Spreadsheet/React/save-excel-file/to-google-drive.md Document-Processing/Excel/Spreadsheet/React/Save-Excel-File/to-google-drive.md renamed to Document-Processing/Excel/Spreadsheet/React/save-excel-file/to-google-drive.md

@@ -0,0 +1,68 @@
+import React, { useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+  const spreadsheetRef = useRef(null);
+
+  // To create plus icon wrapper.
+  const createPlusIconWrapper = () => {
+    const wrapperDiv = document.createElement('div');
+    wrapperDiv.className = 'e-custom-wrapper';
+    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' },
+        content: [
+          {
+            text: 'Add Icon',
+            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();
+            },
+          },
+        ],
+      },
+    ]);
+  };
+
+  // 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);
+    }
+  };
+
+  return (
+    <div>
+      <SpreadsheetComponent
+        ref={spreadsheetRef}
+        created={handleCreated}
+        beforeCellRender={handleBeforeCellRender}
+      />
+    </div>
+  );
+}
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

Document-Processing/ai-coding-assistant/prompt-library.md

@@ -0,0 +1,70 @@
+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: HTMLDivElement = document.createElement('div');
+    wrapperDiv.className = 'e-custom-wrapper';
+    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' },
+        content: [
+          {
+            text: 'Add Icon',
+            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.resize();
+            },
+          },
+        ],
+      },
+    ]);
+  };
+
+  // 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);
+    }
+  };
+
+  return (
+    <div>
+      <SpreadsheetComponent
+        ref={spreadsheetRef}
+        created={handleCreated}
+        beforeCellRender={handleBeforeCellRender}
+      />
+    </div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);