Skip to content

Commit 7f325fd

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
authored
Merge branch 'development' into EJ2-1013392-diataxis-forms
2 parents d7ffb87 + 327753d commit 7f325fd

24 files changed

Lines changed: 1273 additions & 55 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5334,6 +5334,10 @@
53345334
<li><a href="/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure">Create a object structure </a></li>
53355335
<li><a href="/document-processing/excel/spreadsheet/react/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
53365336
<li><a href="/document-processing/excel/spreadsheet/react/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
5337+
<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>
5338+
<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-dynamic-cell-template">Add dynamic cell templates</a></li>
5339+
<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-cell-icon">Add an icon to the cell</a></li>
5340+
<li><a href="/document-processing/excel/spreadsheet/react/how-to/get-filtered-data">Get the filtered row data</a></li>
53375341
</ul>
53385342
</li>
53395343
<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‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Add icons inside cells in React Spreadsheet component | Syncfusion
4+
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.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Add Custom Icons to Cells in React Spreadsheet
11+
12+
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.
13+
14+
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.
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1" %}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Dynamic cell template in React Spreadsheet component | Syncfusion
4+
description: Render dropdown templates inside cells in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Create Dynamic Cell Templates with Dropdowns in React Spreadsheet
11+
12+
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.
13+
14+
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.
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1" %}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Find and replace in range in React Spreadsheet component | Syncfusion
4+
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.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Find and replace the text within the selected range of cells
11+
12+
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`.
13+
14+
The following sample demonstrates how to limit the "Replace All" operation to the currently selected range.
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/find-and-replace-cs1" %}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
layout: post
3+
title: Retrieve filtered row data in React Spreadsheet component | Syncfusion
4+
description: Learn here all about getting filtered row data in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Get filtered row data in React Spreadsheet
11+
12+
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.
13+
14+
The following example shows how to get the filtered rows from the Spreadsheet:
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/filter-cs2/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/filter-cs2/app/app.tsx %}
22+
{% endhighlight %}
23+
{% highlight js tabtitle="datasource.jsx" %}
24+
{% include code-snippet/spreadsheet/react/filter-cs2/app/datasource.jsx %}
25+
{% endhighlight %}
26+
{% highlight ts tabtitle="datasource.tsx" %}
27+
{% include code-snippet/spreadsheet/react/filter-cs2/app/datasource.tsx %}
28+
{% endhighlight %}
29+
{% endtabs %}
30+
31+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/filter-cs2" %}

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

File renamed without changes.

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

File renamed without changes.

‎Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1590,3 +1590,122 @@ loadedDocument.Close(True)
15901590
{% endtabs %}
15911591

15921592
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PDF-Examples/tree/master/Pages/Insert-New-Page-in-Existing-PDF-with-Same-Size/.NET).
1593+
1594+
## Page-level actions in PDF documents
1595+
1596+
Added full support for page‑level actions in the .NET PDF library, enabling developers to add, retrieve, edit, and remove actions triggered by PDF page events such as `OnOpen` and `OnClose`.
1597+
1598+
Refer to the following code example to define custom behavior for PDF page‑level actions.
1599+
1600+
{% tabs %}
1601+
1602+
{% highlight c# tabtitle="C# [Cross-platform]" %}
1603+
1604+
using Syncfusion.Pdf;
1605+
using Syncfusion.Pdf.Interactive;
1606+
1607+
// Create a new PDF document.
1608+
using (PdfDocument document = new PdfDocument())
1609+
{
1610+
// Add a page to the document.
1611+
PdfPage page1 = document.Pages.Add();
1612+
document.Actions.AfterOpen =
1613+
// Create and add new JavaScript action to execute when the first page opens
1614+
Page1.Actions.OnOpen = new PdfJavaScriptAction("app.alert(\"Welcome! This page has just been opened.\");");
1615+
// Create and add new URI action to execute when the first page closes
1616+
Page1.Actions.OnClose = new PdfUriAction("http://www.google.com");
1617+
// Add second page to the document.
1618+
PdfPage page2 = document.Pages.Add();
1619+
// Create a sound action
1620+
PdfSoundAction soundAction = new PdfSoundAction("Startup.wav");
1621+
soundAction.Sound.Bits = 16;
1622+
soundAction.Sound.Channels = PdfSoundChannels.Stereo;
1623+
soundAction.Sound.Encoding = PdfSoundEncoding.Signed;
1624+
soundAction.Volume = 0.9f;
1625+
// Set the sound action to execute when the second page opens
1626+
Page2.Actions.OnOpen = soundAction;
1627+
// Create and add new Launch action to execute when the second page closes
1628+
Page2.Actions.OnClose = new PdfLaunchAction("logo.png");
1629+
// Removing the close action on first page
1630+
Page1.Actions.OnClose = null;
1631+
// Removing both open and close actions on second page
1632+
Page2.Actions.Clear(true);
1633+
//Save the document
1634+
document.Save("Output.pdf");
1635+
}
1636+
1637+
{% endhighlight %}
1638+
1639+
{% highlight c# tabtitle="C# [Windows-specific]" %}
1640+
1641+
using Syncfusion.Pdf;
1642+
using Syncfusion.Pdf.Interactive;
1643+
1644+
// Create a new PDF document.
1645+
using (PdfDocument document = new PdfDocument())
1646+
{
1647+
// Add a page to the document.
1648+
PdfPage page1 = document.Pages.Add();
1649+
document.Actions.AfterOpen =
1650+
// Create and add new JavaScript action to execute when the first page opens
1651+
Page1.Actions.OnOpen = new PdfJavaScriptAction("app.alert(\"Welcome! This page has just been opened.\");");
1652+
// Create and add new URI action to execute when the first page closes
1653+
Page1.Actions.OnClose = new PdfUriAction("http://www.google.com");
1654+
// Add second page to the document.
1655+
PdfPage page2 = document.Pages.Add();
1656+
// Create a sound action
1657+
PdfSoundAction soundAction = new PdfSoundAction("Startup.wav");
1658+
soundAction.Sound.Bits = 16;
1659+
soundAction.Sound.Channels = PdfSoundChannels.Stereo;
1660+
soundAction.Sound.Encoding = PdfSoundEncoding.Signed;
1661+
soundAction.Volume = 0.9f;
1662+
// Set the sound action to execute when the second page opens
1663+
Page2.Actions.OnOpen = soundAction;
1664+
// Create and add new Launch action to execute when the second page closes
1665+
Page2.Actions.OnClose = new PdfLaunchAction("logo.png");
1666+
// Removing the close action on first page
1667+
Page1.Actions.OnClose = null;
1668+
// Removing both open and close actions on second page
1669+
Page2.Actions.Clear(true);
1670+
//Save the document
1671+
document.Save("Output.pdf");
1672+
}
1673+
1674+
{% endhighlight %}
1675+
1676+
{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %}
1677+
1678+
Imports Syncfusion.Pdf
1679+
Imports Syncfusion.Pdf.Interactive
1680+
1681+
' Create a new PDF document.
1682+
Using document As New PdfDocument()
1683+
' Add a page to the document.
1684+
Dim page1 As PdfPage = document.Pages.Add()
1685+
' Create and add new JavaScript action to execute when the first page opens
1686+
page1.Actions.OnOpen = New PdfJavaScriptAction("app.alert(""Welcome! This page has just been opened."");")
1687+
' Create and add new URI action to execute when the first page closes
1688+
page1.Actions.OnClose = New PdfUriAction("http://www.google.com")
1689+
' Add second page to the document.
1690+
Dim page2 As PdfPage = document.Pages.Add()
1691+
' Create a sound action
1692+
Dim soundAction As New PdfSoundAction("Startup.wav")
1693+
soundAction.Sound.Bits = 16
1694+
soundAction.Sound.Channels = PdfSoundChannels.Stereo
1695+
soundAction.Sound.Encoding = PdfSoundEncoding.Signed
1696+
soundAction.Volume = 0.9F
1697+
' Set the sound action to execute when the second page opens
1698+
page2.Actions.OnOpen = soundAction
1699+
' Create and add new Launch action to execute when the second page closes
1700+
page2.Actions.OnClose = New PdfLaunchAction("logo.png")
1701+
' Removing the close action on first page
1702+
page1.Actions.OnClose = Nothing
1703+
' Removing both open and close actions on second page
1704+
page2.Actions.Clear(True)
1705+
' Save the document
1706+
document.Save("Output.pdf")
1707+
End Using
1708+
1709+
{% endhighlight %}
1710+
1711+
{% endtabs %}

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

Lines changed: 29 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -230,74 +230,50 @@ The Syncfusion PowerPoint Library enables developers to create, read, edit, and
230230

231231
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.
232232

233-
{% tabs %}
234-
{% highlight tabtitle="Initialize Spreadsheet" %}
233+
{% promptcards %}
234+
{% promptcard Initialize Spreadsheet %}
235235
#SyncfusionSpreadsheetEditorSDKAssistant How do I initialize a basic Spreadsheet in Angular with default settings?
236-
{% endhighlight %}
237-
{% endtabs %}
238-
{% tabs %}
239-
{% highlight tabtitle="Data Binding" %}
236+
{% endpromptcard %}
237+
{% promptcard Data Binding %}
240238
#SyncfusionSpreadsheetEditorSDKAssistant Show me how to bind local JSON data to the Spreadsheet in React?
241-
{% endhighlight %}
242-
{% endtabs %}
243-
{% tabs %}
244-
{% highlight tabtitle="Remote Data Binding" %}
239+
{% endpromptcard %}
240+
{% promptcard Remote Data Binding %}
245241
#SyncfusionSpreadsheetEditorSDKAssistant Provide an example of binding remote data in a Vue Spreadsheet?
246-
{% endhighlight %}
247-
{% endtabs %}
248-
{% tabs %}
249-
{% highlight tabtitle="Formulas and Calculation" %}
242+
{% endpromptcard %}
243+
{% promptcard Formulas and Calculation %}
250244
#SyncfusionSpreadsheetEditorSDKAssistant How can I enable formula support and use named ranges in the TypeScript Spreadsheet?
251-
{% endhighlight %}
252-
{% endtabs %}
253-
{% tabs %}
254-
{% highlight tabtitle="Charts" %}
245+
{% endpromptcard %}
246+
{% promptcard Charts %}
255247
#SyncfusionSpreadsheetEditorSDKAssistant How do I insert and customize a column chart in the Blazor Spreadsheet?
256-
{% endhighlight %}
257-
{% endtabs %}
258-
{% tabs %}
259-
{% highlight tabtitle="Data Validation" %}
248+
{% endpromptcard %}
249+
{% promptcard Data Validation %}
260250
#SyncfusionSpreadsheetEditorSDKAssistant Provide an example of adding list validation to cells in TypeScript?
261-
{% endhighlight %}
262-
{% endtabs %}
263-
{% tabs %}
264-
{% highlight tabtitle="Import and Export" %}
251+
{% endpromptcard %}
252+
{% promptcard Import and Export %}
265253
#SyncfusionSpreadsheetEditorSDKAssistant How do I import an Excel file and export the Spreadsheet as XLSX in ASP.NET Core?
266-
{% endhighlight %}
267-
{% endtabs %}
268-
{% tabs %}
269-
{% highlight tabtitle="Ribbon and Toolbar" %}
254+
{% endpromptcard %}
255+
{% promptcard Ribbon and Toolbar %}
270256
#SyncfusionSpreadsheetEditorSDKAssistant Show how to customize the ribbon toolbar and add custom buttons in the ASP.NET MVC Spreadsheet?
271-
{% endhighlight %}
272-
{% endtabs %}
273-
{% tabs %}
274-
{% highlight tabtitle="Grid Lines and Headers" %}
257+
{% endpromptcard %}
258+
{% promptcard Grid Lines and Headers %}
275259
#SyncfusionSpreadsheetEditorSDKAssistant How do I show or hide grid lines and row/column headers in the Windows Forms Spreadsheet?
276-
{% endhighlight %}
277-
{% endtabs %}
278-
{% tabs %}
279-
{% highlight tabtitle="Sheet Protection" %}
260+
{% endpromptcard %}
261+
{% promptcard Sheet Protection %}
280262
#SyncfusionSpreadsheetEditorSDKAssistant How can I protect a sheet with a password in the WPF Spreadsheet control?
281-
{% endhighlight %}
282-
{% endtabs %}
283-
{% tabs %}
284-
{% highlight tabtitle="Conditional Formatting" %}
263+
{% endpromptcard %}
264+
{% promptcard Conditional Formatting %}
285265
#SyncfusionSpreadsheetEditorSDKAssistant How do I apply conditional formatting such as color scales or data bars in the UWP Spreadsheet?
286-
{% endhighlight %}
287-
{% endtabs %}
288-
{% tabs %}
289-
{% highlight tabtitle="Cell Formatting" %}
266+
{% endpromptcard %}
267+
{% promptcard Cell Formatting %}
290268
#SyncfusionSpreadsheetEditorSDKAssistant How do I apply cell styles, number formatting, and wrap text in the TypeScript Spreadsheet?
291-
{% endhighlight %}
292-
{% endtabs %}
293-
{% tabs %}
294-
{% highlight tabtitle="Sorting and Filtering" %}
269+
{% endpromptcard %}
270+
{% promptcard Sorting and Filtering %}
295271
#SyncfusionSpreadsheetEditorSDKAssistant Show me how to enable sorting and filtering features in the React Spreadsheet?
296-
{% endhighlight %}
297-
{% endtabs %}
272+
{% endpromptcard %}
273+
{% endpromptcards %}
298274

299275
## See also
300276

301277
* [AI Coding Assistant Overview](https://help.syncfusion.com/document-processing/ai-coding-assistant/overview)
302278
* [SyncfusionDocumentSDKAssistant MCP Server](https://www.npmjs.com/package/@syncfusion/documentsdk-assistant)
303-
* [SyncfusionSpreadsheetEditorSDKAssistant MCP Server](https://www.npmjs.com/package/@syncfusion/spreadsheeteditorsdk-assistant)
279+
* [SyncfusionSpreadsheetEditorSDKAssistant MCP Server](https://www.npmjs.com/package/@syncfusion/spreadsheeteditorsdk-assistant)

0 commit comments

Comments
 (0)