From a0866a5a898ced469fe0d32d5e2783776fd58b45 Mon Sep 17 00:00:00 2001 From: MOHANRAJSF4991 Date: Thu, 21 May 2026 17:11:20 +0530 Subject: [PATCH 1/9] 1027337: move react dev UG changes into hotfix branch --- .../Excel/Spreadsheet/React/accessibility.md | 4 +- .../Excel/Spreadsheet/React/cell-range.md | 20 +- .../React/charts-and-visualizations.md | 276 +++++++ .../Excel/Spreadsheet/React/comment.md | 120 +-- .../React/conditional-formatting.md | 125 +++ .../Excel/Spreadsheet/React/context-menu.md | 12 +- .../Excel/Spreadsheet/React/data-binding.md | 20 +- .../Spreadsheet/React/data-validation.md | 34 +- .../Excel/Spreadsheet/React/events.md | 6 +- .../Excel/Spreadsheet/React/filter.md | 6 +- .../Excel/Spreadsheet/React/formatting.md | 364 +-------- .../Excel/Spreadsheet/React/formulas.md | 243 +++--- .../Excel/Spreadsheet/React/freeze-pane.md | 21 +- .../Excel/Spreadsheet/React/global-local.md | 716 +++++++++--------- .../React/how-to/existing-react-layout.md | 88 +++ .../Excel/Spreadsheet/React/illustrations.md | 94 ++- .../React/images-and-illustrations.md | 201 +++++ .../Excel/Spreadsheet/React/link.md | 22 +- .../Excel/Spreadsheet/React/notes.md | 58 +- .../Spreadsheet/React/number-formatting.md | 169 +++++ .../Spreadsheet/React/open-excel-files.md | 126 +-- .../Excel/Spreadsheet/React/protect-sheet.md | 31 +- .../Spreadsheet/React/save-excel-files.md | 83 +- .../Excel/Spreadsheet/React/searching.md | 8 +- .../Excel/Spreadsheet/React/selection.md | 22 +- ...eadsheet-server-to-aws-eks-using-docker.md | 2 +- ...eet-server-to-azure-using-visual-studio.md | 2 +- .../Excel/Spreadsheet/React/sort.md | 57 +- .../Excel/Spreadsheet/React/template.md | 15 +- .../Spreadsheet/React/text-cell-formatting.md | 145 ++++ .../Spreadsheet/React/ui-customization.md | 15 +- .../Excel/Spreadsheet/React/undo-redo.md | 33 +- .../Excel/Spreadsheet/React/worksheet.md | 49 +- .../spreadsheet/react/border-cs1/app/app.jsx | 71 ++ .../spreadsheet/react/border-cs1/app/app.tsx | 71 ++ .../react/border-cs1/app/datasource.jsx | 15 + .../react/border-cs1/app/datasource.tsx | 15 + .../spreadsheet/react/border-cs1/index.html | 36 + .../react/border-cs1/systemjs.config.js | 58 ++ .../react/delete-chart-cs1/app/app.jsx | 59 ++ .../react/delete-chart-cs1/app/app.tsx | 59 ++ .../react/delete-chart-cs1/app/datasource.jsx | 11 + .../react/delete-chart-cs1/app/datasource.tsx | 11 + .../react/delete-chart-cs1/index.html | 36 + .../react/delete-chart-cs1/systemjs.config.js | 58 ++ .../react/delete-image-cs1/app/app.jsx | 40 + .../react/delete-image-cs1/app/app.tsx | 40 + .../react/delete-image-cs1/index.html | 36 + .../react/delete-image-cs1/systemjs.config.js | 58 ++ .../react/insert-chart-cs1/app/app.jsx | 56 ++ .../react/insert-chart-cs1/app/app.tsx | 56 ++ .../react/insert-chart-cs1/app/datasource.jsx | 11 + .../react/insert-chart-cs1/app/datasource.tsx | 11 + .../react/insert-chart-cs1/index.html | 36 + .../react/insert-chart-cs1/systemjs.config.js | 58 ++ .../react/insert-image-cs1/app/app.jsx | 33 + .../react/insert-image-cs1/app/app.tsx | 33 + .../react/insert-image-cs1/index.html | 36 + .../react/insert-image-cs1/systemjs.config.js | 58 ++ .../integrate-into-layouts-cs1/app/app.jsx | 59 ++ .../integrate-into-layouts-cs1/app/app.tsx | 59 ++ .../integrate-into-layouts-cs1/index.html | 36 + .../systemjs.config.js | 56 ++ .../integrate-into-layouts-cs2/app/app.jsx | 57 ++ .../integrate-into-layouts-cs2/app/app.tsx | 57 ++ .../integrate-into-layouts-cs2/index.html | 36 + .../systemjs.config.js | 56 ++ .../integrate-into-layouts-cs3/app/app.jsx | 72 ++ .../integrate-into-layouts-cs3/app/app.tsx | 72 ++ .../integrate-into-layouts-cs3/index.html | 36 + .../systemjs.config.js | 56 ++ 71 files changed, 3744 insertions(+), 1157 deletions(-) create mode 100644 Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md create mode 100644 Document-Processing/Excel/Spreadsheet/React/conditional-formatting.md create mode 100644 Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md create mode 100644 Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md create mode 100644 Document-Processing/Excel/Spreadsheet/React/number-formatting.md create mode 100644 Document-Processing/Excel/Spreadsheet/React/text-cell-formatting.md create mode 100644 Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/datasource.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/datasource.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/border-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/border-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js diff --git a/Document-Processing/Excel/Spreadsheet/React/accessibility.md b/Document-Processing/Excel/Spreadsheet/React/accessibility.md index 586eb3bb1b..f7e58096d7 100644 --- a/Document-Processing/Excel/Spreadsheet/React/accessibility.md +++ b/Document-Processing/Excel/Spreadsheet/React/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in React Spreadsheet component -The Spreadsheet component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Spreadsheet component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Spreadsheet component is outlined below. @@ -61,7 +61,7 @@ The Spreadsheet component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/ap ## Keyboard interaction -The Spreadsheet component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet component. +The Spreadsheet component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet component. | Press | To do this | |----------|-------------| diff --git a/Document-Processing/Excel/Spreadsheet/React/cell-range.md b/Document-Processing/Excel/Spreadsheet/React/cell-range.md index b816856d4b..38a12ad30b 100644 --- a/Document-Processing/Excel/Spreadsheet/React/cell-range.md +++ b/Document-Processing/Excel/Spreadsheet/React/cell-range.md @@ -9,9 +9,9 @@ documentation: ug # Cell range in React Spreadsheet component -A group of cells in a sheet is known as cell range. +A **cell range** is a group of cells in a sheet. It allows you to work with multiple cells together for operations such as formatting, formulas, and data manipulation. -To get started quickly with Cell Range, you can check on this video: +To get started quickly with `Cell Range`, you can check out this video: {% youtube "https://www.youtube.com/watch?v=izgXkfzUMBQ" %} @@ -104,9 +104,9 @@ Auto Fill is used to fill the cells with data based on adjacent cells. It also f You can do this by one of the following ways, * Using “AutoFillOptions” menu which is open, while drag and drop the cell using fill handle element. -* Use the autoFill() method programmatically. +* Use the autoFill method programmatically. -The available parameters in `autoFill()` method are, +The available parameters in `autoFill` method are, | Parameter | Type | Description | |-----|------|----| @@ -184,14 +184,14 @@ In the following sample, you can enable/disable the fill option on the button cl ## Clear -Clear feature helps you to clear the cell contents (formulas and data), formats (including number formats, conditional formats, and borders) in a spreadsheet. When you apply clear all, both the contents and the formats will be cleared simultaneously. +The **Clear** feature allows you to remove cell contents (formulas and data) and formats (including number formats, conditional formats, and borders) in a spreadsheet. When you apply **Clear All**, both the contents and the formats are removed simultaneously. ### Apply Clear Feature You can apply clear feature by using one of the following ways, -* Select the clear icon in the Ribbon toolbar under the Home Tab. -* Using the [`clear()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method to clear the values. +* Select the clear icon in the Ribbon toolbar under the `Home` Tab. +* Using the [`clear`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method to clear the values. Clear has the following types in the spreadsheet, @@ -204,7 +204,11 @@ Clear has the following types in the spreadsheet, ### Methods -Clear the cell contents and formats in the Spreadsheet document by using the [clear](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method. The [clear](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method has `type` and `range` as parameters. The following code example shows how to clear the cell contents and formats in the button click event. +You can clear cell contents and formats in the Spreadsheet by using the [`clear`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method. The `clear` method accepts two parameters: +* `type` – specifies the type of clear operation (`Clear All`, `Clear Formats`, `Clear Contents`, or `Clear Hyperlinks`). +* `range` – specifies the cell or range of cells to clear. + +The following code example demonstrates how to clear cell contents and formats in a button click event. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md new file mode 100644 index 0000000000..87fc187316 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md @@ -0,0 +1,276 @@ +--- +layout: post +title: Charts and visualizations in React Spreadsheet component | Syncfusion +description: Learn here how to insert, customize, update, and remove charts in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Charts and Visualizations + +## Understanding Charts + +The Syncfusion React Spreadsheet component supports built-in charts, allowing you to turn cell ranges into clear visual representations directly inside your worksheet. Charts help you identify trends, compare values, and communicate data insights at a glance. + +## Supported Chart Types + +The following types of charts are available in the Spreadsheet. + +>* Column Chart +>* Bar Chart +>* Area Chart +>* Line Chart +>* Pie Chart +>* Scatter Chart + +## How Charts Stay Synchronized + +When you create a chart from a cell range, the chart becomes linked to that data source. If values in the source range change, the chart automatically updates to reflect the new data. This makes it easy to build dynamic spreadsheets where visuals and data stay in sync. + +## Chart Behavior + +By default, charts are enabled in the Spreadsheet (via the [allowChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowchart) property). Once created, charts behave as objects within the worksheet—they can be moved, resized, and customized without affecting the underlying data. + +--- + +## How To: Insert Charts + +### Insert a Chart Using the UI + +You can insert a chart by selecting the chart icon in the Ribbon toolbar under the Insert Tab. The chart will be inserted based on the selected range of cells in the Spreadsheet. + +### Insert a Chart Programmatically + +Use the [insertChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertchart) method to insert the chart programmatically. + +The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertchart) method is, + +| Parameter | Type | Description | +|-----|------|----| +| chart | `ChartModel` | Specifies the options to insert a chart in the spreadsheet. | + +The available arguments in the `ChartModel` are: + +* type: Specifies the type of chart. +* theme: Specifies the theme of a chart. +* isSeriesInRows: Specifies to switch the row or a column. +* range: Specifies the selected range or specified range. +* id: Specifies the chart element id. +* markerSettings: Specifies the marker settings. The marker is used to provide information about the data points in the series and is currently only applicable to the line chart. + +The following code example shows how to insert a chart in the spreadsheet: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/insert-chart-cs1" %} + +--- + +## How To: Customize Chart Appearance + +Once a chart is inserted into the worksheet, you can customize its appearance and structure to make it clearer and more informative. + +### Move a Chart + +To reposition a chart within the worksheet: + +1. **Click the chart** to select it (selection handles appear around it). +2. **Click and drag** the chart to your desired location. +3. **Release** to place the chart in the new position. + +### Resize a Chart + +To adjust the chart size: + +1. **Click the chart** to select it. +2. **Drag a middle edge handle** to resize along a single axis — horizontally or vertically. +3. **Release** to apply the new size. + +### Access Chart Design Options + +When a chart is selected, a **Chart Design** tab becomes available in the ribbon. This tab provides tools to modify chart elements and structure. + +### Add or Modify Chart Elements + +Using the **Add Chart Element** option, you can enhance your chart with the following elements: + +#### Axes and Axis Titles +- **Purpose** — Clearly describe what your data values represent +- **When to use** — Add when axis measurements are not immediately obvious +- **How to add** — Chart Design tab → Add Chart Element → Axes → Select the desired axis type + +#### Chart Title +- **Purpose** — Explain what the chart represents at a glance +- **When to use** — Always recommended for clarity +- **How to add** — Chart Design tab → Add Chart Element → Chart Title → Choose a title style + +#### Data Labels +- **Purpose** — Display exact values directly on the chart +- **When to use** — Helpful when precise values are important to viewers +- **How to add** — Chart Design tab → Add Chart Element → Data Labels → Select label position + +#### Gridlines +- **Purpose** — Improve readability by providing a reference grid +- **When to use** — Useful for charts with many data points +- **How to add** — Chart Design tab → Add Chart Element → Gridlines → Select gridline type + +#### Legends +- **Purpose** — Identify and distinguish data series in multi-series charts +- **When to use** — Essential when multiple data series are plotted +- **How to add** — Chart Design tab → Add Chart Element → Legend → Choose legend position + +### Switch Data Orientation + +If your chart is not displaying data as intended, you can reverse how rows and columns are interpreted: + +1. **Select the chart** by clicking on it +2. **Go to Chart Design tab** in the ribbon +3. **Click Switch Row/Column** to flip the data orientation +4. **Review the result** — The chart now groups data differently + +This is useful when: +- You want to compare categories differently +- Your data is organized differently than expected +- You need to highlight different trends or patterns + +### Change Chart Type + +To switch between chart types after creation: + +1. **Select the chart** by clicking on it +2. **Go to Chart Design tab** in the ribbon +3. **Click Chart Type** option +4. **Select a new type** (Column, Bar, Line, Area, Pie, etc.) + +### Customization of line chart markers + +Using the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/chart-cs3/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/chart-cs3/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/chart-cs3/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/chart-cs3/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "/document-processing/code-snippet/spreadsheet/react/chart-cs3" %} + +## How To: Remove Charts + +You can remove a chart from your worksheet either through the user interface or programmatically. + +### Remove a Chart Using the UI + +To delete a chart: + +1. **Select the chart** by clicking on it +2. **Press Delete** or **Backspace** to remove it immediately + +**Alternative method:** +- **Select the chart** and choose **Clear All** from the ribbon (this clears the selected chart) + +### Remove a Chart Programmatically + +Use the [deleteChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deletechart) method to remove charts through code: + +- **With a chart ID** — Pass the chart ID to remove that specific chart +- **Without an ID** — Call the method without arguments to remove the currently active (selected) chart + +The following code example shows how to remove a chart in the spreadsheet: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/delete-chart-cs1" %} + +--- + +## API Reference + +### Methods + +#### insertChart() +Inserts a new chart into the worksheet at a specified location with the given chart type and data range. + +**Parameters:** +- `ChartModel[]` — Specifies the options to insert a chart in the spreadsheet. + +**See:** [insertChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertchart) + +#### deleteChart() +Removes a chart from the worksheet. + +**Parameters:** +- `chartId` (optional) — The ID of the specific chart to remove. If omitted, the active chart is deleted. + +**See:** [deleteChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deletechart) + +#### selectChart() +Selects a chart in the active worksheet. + +**Parameters:** +- `chartId` (optional) — The ID of the chart to select. If omitted, the chart in the active cell is selected. If the active cell contains no chart, the first rendered chart in the active sheet is selected. + +**See:** [selectChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#selectchart) + +#### deselectChart() +Removes selection from the currently selected chart. + +**See:** [deselectChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deselectchart) + +### Properties + +#### allowChart +Enables or disables chart functionality in the Spreadsheet. + +**Type:** `boolean` +**Default:** `true` + +**See:** [allowChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowchart) + +## Limitations of Chart + +The following features have some limitations in the Chart: + +* Insert row/delete row between the chart data source will not reflect the chart. +* Copy/paste into the chart data source will not reflect the chart. +* Corner resizing option in chart element. + +## See Also +* [Images](./images-and-illustrations.md) +* [Formatting](./formatting) +* [Rows and columns](./rows-and-columns) diff --git a/Document-Processing/Excel/Spreadsheet/React/comment.md b/Document-Processing/Excel/Spreadsheet/React/comment.md index 1225fe2d37..828c04405d 100644 --- a/Document-Processing/Excel/Spreadsheet/React/comment.md +++ b/Document-Processing/Excel/Spreadsheet/React/comment.md @@ -8,14 +8,17 @@ documentation: ug --- # Comment in React Spreadsheet control -The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as **resolve** and **reopen** to track status, plus an optional **Comments Review Pane** for browsing and managing threads. +The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as `resolve` and `reopen` to track status, plus an optional **Comments Review Pane** for browsing and managing threads. -Cells with comment display a small comment indicator; hover to preview the comment editor. This provides a clear, collaborative workflow while keeping data intact. +Cells that contain a comment show a small indicator. Hovering over the cell opens a preview of the comment editor. This helps maintain a clear workflow for collaboration while keeping the original data unchanged. ![Spreadsheet showing a comment](./images/spreadsheet_comment.png) ## Author identity -The Syncfusion Spreadsheet does not automatically track user identity. To tag new comments and replies with an author name, set the `author` property when initializing the Spreadsheet. +The Syncfusion Spreadsheet does not automatically track author details. To assign an author name to new comments and replies, set the [`author`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#author) property when initializing the Spreadsheet. + +If the [`author`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#author) property is not defined, the default value will be **Guest User**. + ```ts import * as React from 'react'; @@ -32,29 +35,33 @@ The Syncfusion Spreadsheet does not automatically track user identity. To tag ne const root = createRoot(document.getElementById('root')!); root.render(); ``` ->If the author property is not set, "Guest User" will be displayed as the author for comment and replies by default. +> If the [`author`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#author) property is not set, "Guest User" will appear as the author for comments and replies by default. ## Adding a comment -You can add a **comment** to a cell in several ways: -* **Context menu**: Right-click the target cell and select **"New Comment"**. -* **Ribbon**: Go to **Review > Comment > New Comment**. -* **Keyboard shortcut**: Press Ctrl + Shift + F2 to open the comment editor for the active cell. -* **Programmatically**: - * Use the `updateCell` method with the comment model to add a comment to a specific cell. - * Bind comments via code-behind during initial load by associating the comment model with the cell model. + +A **comment** can be added to a cell in the following ways: + +* **Context menu**: Right-click the cell and choose **New Comment**. +* **Ribbon**: Go to **Review > Comment > New Comment**. +* **Keyboard shortcut**: Press Ctrl + Shift + F2 to open the comment editor for the active cell. +* **Programmatically**: + * Use the [updateCell](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#updatecell) method with the comment model to add a comment to a specific cell. + * Bind comments during initial load by linking the comment model with the cell model. The image below shows that once a comment is posted, the cell displays an indicator, and the comment can be previewed on hover. ![Adding a comment in Spreadsheet](./images/spreadsheet_adding_a_comment.gif) ## Adding a reply -You can add one or more replies to an existing comment to provide additional details or answers: -* **Context menu**: Right-click the cell that already has a comment, select **Comment > New Reply**, enter your reply, and click **Post**. + +Replies can be added to an existing comment to provide more details or responses: + +* **Context menu**: Right-click the cell that already has a comment, choose **Comment > New Reply**, type the reply, and click **Post**. * **Ribbon**: Go to **Review > Comment > New Comment** on a cell that contains a comment. This opens the comment editor in **reply mode**. -* **Comment editor**: Open the comment editor by hovering over the comment indicator, type your reply, and click **Post**. -* **Keyboard shortcut**: Press Ctrl + Shift + F2 on a cell that contains a comment to open the comment editor in reply mode. +* **Comment editor**: Hover over the comment indicator to open the editor, type the reply, and click **Post**. +* **Keyboard shortcut**: Press Ctrl + Shift + F2 on a cell with a comment to open the editor in reply mode. -After posting, the replies appear under the first comment in the comment editor. +After posting, replies appear directly under the original comment in the comment editor. ![Adding a reply in Spreadsheet](./images/spreadsheet_comment_reply.png) @@ -67,7 +74,9 @@ You can edit the content of a comment or its replies directly within the comment ![Editing a comment reply in Spreadsheet](./images/spreadsheet_edit_comment.png) ## Resolve and Reopen -The **Resolve thread** option marks a comment thread as completed when the discussion or issue is addressed. When a thread is resolved, its background color changes to indicate the resolved state, and the reply input box and reply menu actions are hidden. Use **Reopen** to restore the comment if further discussion is needed. +The **Resolve thread** option is used to mark a comment thread as completed once the issue or discussion has been addressed. When a thread is resolved, its background color changes to show the resolved state, and the reply input box along with reply menu actions are hidden. + +If more discussion is needed later, the **Reopen** option can be used. Reopening a thread restores it to active state, brings back the reply input box, and re-enables the reply menu actions so the conversation can be continued. ### Resolve a comment * In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**. @@ -99,11 +108,11 @@ You can also use the `isResolved` property in the comment model when initializin You can delete either a specific reply or an entire comment thread (including all replies) using the following options: ### Deleting a comment thread -* **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**. -* **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment. -* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment or use the **Delete Thread** button in header for a resolved comment. +* **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**. +* **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment. +* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment, or use the **Delete Thread** button in the header for a resolved comment. -Deleting a thread removes the comment and all its replies from the cell. +Deleting a thread removes the comment and all of its replies from the cell. ![Deleting a comment thread in Spreadsheet](./images/spreadsheet_delete_comment.png) @@ -113,45 +122,47 @@ In the comment editor, hover over the reply and click the **"⋯" (More actions) ![Deleting a comment reply in Spreadsheet](./images/spreadsheet_delete-reply_comment.png) ## Next and Previous Comment -The **Review > Comment > Next Comment and Previous Comment** options in the ribbon allow you to quickly navigate between cells that contain comments: -* **Next Comment**: Moves to the next cell with a comment. -* **Previous Comment**: Moves to the previous cell with a comment. +The **Review > Comment > Next Comment** and **Previous Comment** options in the ribbon allow you move quickly between cells that contain comments: -Navigation starts within the active sheet. When all comments in the active sheet have been visited (end or start reached), the navigation automatically continues to the next or previous sheet that contains comments. This ensures you can review all comments across the workbook without manually switching sheets. +* **Next Comment**: Jumps to the next cell with a comment. +* **Previous Comment**: Jumps to the previous cell with a comment. + +Navigation starts in the active sheet. When all comments in that sheet have been visited (end or start reached), the navigation continues automatically to the next or previous sheet that has comments. This makes it easy to review all comments across the workbook without switching sheets manually. ![Next and Previous comments in Spreadsheet](./images/spreadsheet_next_previous_comment.png) ## Comments review pane -The **"Comments" review pane** provides a centralized view of all comments in the active sheet, making it easier to manage discussions without switching between individual cells. It offers filtering, inline actions, and navigation, ensuring an efficient review workflow across the workbook. +The **Comments review pane** gives a clear, central view of all comments in the active sheet, making it easier to manage discussions without moving through each cell one by one. It provides options for filtering, quick actions, and navigation, helping maintain an efficient review process across the workbook. -You can show or hide the "Comments" review pane using: +You can show or hide the Comments review pane in two ways: * **Ribbon**: Go to **Review > Comment > Show Comments**. -* **Property**: Set the `showCommentsPane` property to true when initializing the Spreadsheet. By default, this property is **false**. +* **Property**: Set the `showCommentsPane` property to **true** when initializing the Spreadsheet. By default, this property is set to **false**. ![Show comments in Spreadsheet](./images/spreadsheet_show_comments.gif) ### Features of the comments review pane -The "Comments" review pane is rendered within the spreadsheet interface to provide a dedicated space for managing comments efficiently. It acts as a centralized hub where you can view all comment threads, perform actions, and keep discussions organized without navigating cell by cell. +The "Comments" review pane appears inside the Spreadsheet to give a dedicated space for handling comments. It works as a central place where all comment threads can be viewed, managed, and organized without moving cell by cell. -The "Comments" review pane allows you to: +The "Comments" review pane supports the following actions: -* Add new comment using the **New** button. -* Filter comments by **All**, **Active**, or **Resolved** to view specific comment threads. -* Navigate between comments and synchronize selection with the corresponding cells. +* Add a new comment using the **New** button. +* Filter comments by **All**, **Active**, or **Resolved** to show specific threads. +* Move between comments and link the selection with the related cells. * Perform actions such as: - * **Reply** – Add replies directly from the review pane. - * **Edit** – Modify the text of a comment or reply. - * **Delete** – Remove a reply or an entire thread. - * **Resolve/Reopen** – Change the status of a comment. + * **Reply** – Add a reply directly in the review pane. + * **Edit** – Change the text of a comment or reply. + * **Delete** – Remove a reply or the whole thread. + * **Resolve/Reopen** – Update the status of a comment. + +When the review pane is open, any action done in the review pane or in the cell’s comment editor stays in synchronized. -When the review pane is open, all actions performed in the review pane or in the cell’s comment editor are synchronized: -* Selecting a comment in the review pane highlights the corresponding cell in the sheet. -* Selecting a cell with a comment focuses the respective comment thread in the review pane. -* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the pane and the cell comment editor instantly, ensuring consistency across the UI. -* The review pane dynamically updates when comments are added, deleted, or resolved, so you always see the latest state without refreshing. +* Selecting a comment in the review pane highlights the matching cell in the worksheet. +* Selecting a cell that has a comment opens the related comment thread in the review pane. +* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the review pane and the cell comment editor at the same time, keeping them consistent. +* The review pane updates automatically when comments are added, removed, or resolved, so the latest state is always shown without needing to refresh. ## Saving a Workbook with Comments You can save spreadsheet data along with **comments** using **File > Save As > Microsoft Excel(.xlsx)**. @@ -160,17 +171,21 @@ You can save spreadsheet data along with **comments** using **File > Save As > M > Comments are **not included** when exporting to **.xls**, **.csv**, and **.pdf**. ### Why comments are not saved in `.xls` -The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**. -Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`. +### Why comments are not saved in `.xls` + +The **.xls** format is built on the older Excel binary structure (BIFF8). This structure does not support newer features such as **threaded comments**. +Threaded comments require the **Open XML** structure that is used in `.xlsx` files. > To retain threaded comments, always save the workbook in **.xlsx** format. ## Bind Comments via code-behind -You can bind **comment thread** to cells at initial load by providing a `comment` object in the cell model. Each cell supports **per comment thread**, which can include: -- **Comment**: `author`, `text`, `createdTime`, `isResolved` -- **Replies**: A collection of replies. Each reply is an object containing its `author`, `text`, and `createdTime` (no nested replies-of-replies). -In the below sample, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown initially by enabling the `showCommentsPane` property, and comments are added using `updateCell` method in the `created` event. +You can attach a **comment thread** to cells during initial load by adding a `comment` object in the cell model. Each cell supports one comment thread, which can include: + +- **Comment**: Contains `author`, `text`, `createdTime`, and `isResolved`. +- **Replies**: A list of replies. Each reply has its own `author`, `text`, and `createdTime`. Nested replies (replies to replies) are not supported. + +In the example below, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown at startup by enabling the `showCommentsPane` property, and comments are added with the `updateCell` method inside the `created` event. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -189,10 +204,11 @@ In the below sample, comments are added to a specific cell using cell data bindi * **New comment**: When the "Comments" review pane is enabled, adding a new comment renders the drafted comment editor directly in the "Comments" review pane. ## Limitations -* **Un-posted comments are not stored**: If you type in the comment editor and close it without clicking **Post**, the entered text is not saved and will not appear when you reopen the editor. Only posted content is persisted in the comment model. -* **Comments and Notes cannot coexist**: When a cell contains comment, notes cannot be added. Similarly, if a cell already has a notes, comment cannot be added. -* **Comments in Print**: Comments are not included in print output. -* **Non-collaborative**: Real-time multi-user synchronization is not supported. However, when exporting and re-importing the workbook, the author information for each comment and reply is preserved. + +* **Draft comments are not saved**: Text typed in the comment editor is lost if the editor is closed without clicking **Post**. Only posted comments are stored and shown again when the editor is reopened. +* **Comments and Notes cannot be used together**: A cell can have either a comment or a note, but not both. If a cell already has a comment, a note cannot be added, and if it has a note, a comment cannot be added. +* **Comments in print output**: Comments are not included when printing the worksheet or workbook. +* **No real-time collaboration**: Multiple people cannot edit comments at the same time. However, when a workbook is exported and then imported again, the author details for each comment and reply remain available. ## See Also * [Notes](./notes) diff --git a/Document-Processing/Excel/Spreadsheet/React/conditional-formatting.md b/Document-Processing/Excel/Spreadsheet/React/conditional-formatting.md new file mode 100644 index 0000000000..b4238774da --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/conditional-formatting.md @@ -0,0 +1,125 @@ +--- +layout: post +title: Conditional Formatting in React Spreadsheet component | Syncfusion +description: Conditional formatting rules, data bars, color scales and icon sets in Syncfusion React Spreadsheet. +control: Formatting +platform: document-processing +documentation: ug +--- + +# Conditional Formatting + +Conditional formatting helps you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the [`allowConditionalFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowconditionalformat) property. + +> * The default value for the `allowConditionalFormat` property is `true`. + +## Apply Conditional Formatting + +You can apply conditional formatting by using one of the following ways, + +* Select the conditional formatting icon in the Ribbon toolbar under the Home Tab. +* Using the [`conditionalFormat()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#conditionalformat) method to define the condition. +* Using the `conditionalFormats` in sheets model. + +Conditional formatting has the following types in the spreadsheet, + +## Highlight Cells Rules + +Highlight cells rules option in the conditional formatting enables you to highlight cells with a preset color depending on the cell's value. + +The following options can be given for the highlight cells rules as type, + +>* `GreaterThan`, `LessThan`, `Between`, `EqualTo`, `ContainsText`, `DateOccur`, `Duplicate`, `Unique`. + +The following preset colors can be used for formatting styles, + +>* `"RedFT"` - Light Red Fill with Dark Red Text, +>* `"YellowFT"` - Yellow Fill with Dark Yellow Text, +>* `"GreenFT"` - Green Fill with Dark Green Text, +>* `"RedF"` - Red Fill, +>* `"RedT"` - Red Text. + +## Top Bottom Rules + +Top bottom rules option in the conditional formatting allows you to apply formatting to the cells that satisfy a statistical condition with other cells in the range. + +The following options can be given for the top bottom rules as type, + +>* `Top10Items`, `Bottom10Items`, `Top10Percentage`, `Bottom10Percentage`, `BelowAverage`, `AboveAverage`. + +## Data Bars + +You can apply data bars to represent the data graphically inside a cell. The longest bar represents the highest value and the shorter bars represent the smaller values. + +The following options can be given for the data bars as type, + +>* `BlueDataBar`, `GreenDataBar`, `RedDataBar`, `OrangeDataBar`, `LightBlueDataBar`, `PurpleDataBar`. + +## Color Scales + +Using color scales, you can format your cells with two or three colors, where different color shades represent the different cell values. In the Green-Yellow-Red(GYR) Color Scale, the cell that holds the minimum value is colored as red. The cell that holds the median is colored as yellow, and the cell that holds the maximum value is colored as green. All other cells are colored proportionally. + +The following options can be given for the color scales as type, + +>* `GYRColorScale`, `RYGColorScale`, `GWRColorScale`, `RWGColorScale`, `BWRColorScale`, `RWBColorScale`, `WRColorScale`, `RWColorScale`, `GWColorScale`, `WGColorScale`, `GYColorScale`, `YGColorScale`. + +## Icon Sets + +Icon sets will help you to visually represent your data with icons. Every icon represents a range of values. In the Three Arrows(colored) icon, the green arrow icon represents the values greater than 67%, the yellow arrow icon represents the values between 33% to 67%, and the red arrow icon represents the values less than 33%. + +The following options can be given for the icon sets as type, + +>* `ThreeArrows`, `ThreeArrowsGray`, `FourArrowsGray`, `FourArrows`, `FiveArrowsGray`, `FiveArrows`, `ThreeTrafficLights1`, `ThreeTrafficLights2`, `ThreeSigns`, `FourTrafficLights`, `FourRedToBlack`, `ThreeSymbols`, `ThreeSymbols2`, `ThreeFlags`, `FourRating`, `FiveQuarters`, `FiveRating`, `ThreeTriangles`, `ThreeStars`, `FiveBoxes`. + +## Custom Format + +Using the custom format for conditional formatting you can set cell styles like color, background color, font style, font weight, and underline. + +In the MAY and JUN columns, we have applied conditional formatting custom format. + +>* In the Conditional format, custom format supported for **Highlight cell rules** and **Top bottom rules**. + +## Clear Rules + +You can clear the defined rules by using one of the following ways, + +* Using the `Clear Rules` option in the Conditional Formatting button of HOME Tab in the ribbon to clear the rule from selected cells. +* Using the [`clearConditionalFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#clearconditionalformat) method to clear the defined rules. + +The following code sample shows how to apply different types of conditional formatting, colors, and styles in the Spreadsheet + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "/document-processing/code-snippet/spreadsheet/react/conditional-formatting-cs1" %} + +## Limitations of Conditional formatting + +The following features have some limitations in Conditional Formatting: + +* Insert row/column between the conditional formatting. +* Conditional formatting with formula support. +* Copy and paste the conditional formatting applied cells. +* Custom rule support. + +## Note + +You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to learn how to present and manipulate data. + +## See Also + +* [Number Formatting](./number-formatting) +* [Text & Cell Formatting](./text-cell-formatting) +* [Cell Range](./cell-range) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/context-menu.md b/Document-Processing/Excel/Spreadsheet/React/context-menu.md index bc070726e4..fa96555ec1 100644 --- a/Document-Processing/Excel/Spreadsheet/React/context-menu.md +++ b/Document-Processing/Excel/Spreadsheet/React/context-menu.md @@ -9,11 +9,11 @@ documentation: ug # Context menu in React Spreadsheet component -Context Menu is used to improve user interaction with Spreadsheet using the popup menu. This will open when right-clicking on Cell/Column Header/Row Header/ Pager in the Spreadsheet. You can use [`enableContextMenu`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#enablecontextmenu) property to enable/disable context menu. +The Context menu is used to improve user interaction with the Spreadsheet through a popup menu. It opens when right-clicking on a cell, column header, row header, or pager in the Spreadsheet. You can use the [`enableContextMenu`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#enablecontextmenu) property to enable or disable the context menu. > The default value for the `enableContextMenu` property is `true`. -## Context Menu Items in Row Cell +## Context menu Items in Row Cell Please find the table below for default context menu items and their actions. @@ -29,7 +29,8 @@ Please find the table below for default context menu items and their actions. ## Context Menu Items in Row Header / Column Header -Please find the table below for default context menu items and their actions. +The context menu in row and column headers provides quick access to common actions for managing spreadsheet data. +Refer to the table below for the default context menu items and their actions. | Context Menu items | Action | |-------|---------| @@ -44,7 +45,8 @@ Please find the table below for default context menu items and their actions. ## Context Menu Items in Pager -Please find the table below for default context menu items and their actions. +The context menu in the pager provides quick access to actions for managing worksheet navigation and related options. +Refer to the table below for the default context menu items and their actions. | Context Menu items | Action | |-------|---------| @@ -62,4 +64,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet- * [Customize context menu](./user-interface-customization/customize-context-menu) * [Worksheet](./worksheet) -* [Rows and columns](./rows-and-columns) \ No newline at end of file +* [Rows and columns](./rows-and-columns) diff --git a/Document-Processing/Excel/Spreadsheet/React/data-binding.md b/Document-Processing/Excel/Spreadsheet/React/data-binding.md index 3af4fa3461..fb336fb538 100644 --- a/Document-Processing/Excel/Spreadsheet/React/data-binding.md +++ b/Document-Processing/Excel/Spreadsheet/React/data-binding.md @@ -9,7 +9,8 @@ documentation: ug # Data binding in React Spreadsheet component -The Spreadsheet uses [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started), which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started) or JavaScript object array collection. +The Spreadsheet supports binding data from both **RESTful JSON services** and **local JavaScript object arrays** using the [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started). +You can assign the `dataSource` property either with a `DataManager` instance or directly with a JavaScript object array collection. To get start quickly with Data Binding, you can check on this video: @@ -19,7 +20,7 @@ To get start quickly with Data Binding, you can check on this video: ## Local data -To bind local data to the Spreadsheet, you can assign a JavaScript object array to the `dataSource` property. +Bind local data to the Spreadsheet by assigning a JavaScript object array to the `dataSource` property. Refer to the following code example for local data binding. @@ -44,7 +45,7 @@ Refer to the following code example for local data binding. ### Customizing column data mapping -By default, when a data source is bound to a sheet, columns are auto-assigned from the data source fields sequentially. This means that the first field in the data source is assigned to Column A, the second to Column B, and so on, sequentially. However, now you can customize the column assignments by specifying the appropriate field names in the desired order using the [fieldsOrder](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rangeModel/#fieldsorder) property. +By default, columns are auto-assigned sequentially from data source fields (first field → Column A, second field → Column B, etc.). To customize this mapping, use the [fieldsOrder](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rangeModel#fieldsorder) property to specify field names in your desired order. > You can customize the mapping of column data only in the local data binding support. @@ -109,7 +110,7 @@ Refer to the following code example for remote data binding. ### Web API -You can use WebApiAdaptor to bind spreadsheet with Web API created using OData endpoint. +You can use `WebApiAdaptor` to bind spreadsheet with Web API created using OData endpoint. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -130,7 +131,7 @@ You can use WebApiAdaptor to bind spreadsheet with Web API created using OData e ## Cell data binding -The Spreadsheet control can bind the data to individual cell in a sheet . To achive this you can use the `value` property. +Bind data to individual cells in a sheet using the `value` property. Refer to the following code example for cell data binding. @@ -188,11 +189,14 @@ The following table defines the arguments of the `dataSourceChanged` event. ## Dynamic data binding using updateRange method -The [updateRange](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#updaterange) method allows you to dynamically update the [dataSource](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rangeModel/#datasource) in a spreadsheet without manually iterating through each cell. This method is especially useful for efficiently applying bulk updates to a specific range within the spreadsheet. +The [updateRange](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#updaterange) method enables bulk updates to the [dataSource](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rangeModel#datasource) without iterating through individual cells, making it efficient for large data updates. -To use the [updateRange](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#updaterange) method, provide the new [dataSource](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rangeModel/#datasource) and specify the starting cell for the update using the [startCell](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rangeModel/#startcell) property of the `RangeDirective`. Additionally, set the `sheetIndex` to target the appropriate sheet for the update. +**Setup:** +- Provide the new `dataSource` to update. +- Specify the starting cell using the [startCell](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rangeModel#startcell) property in the `RangeDirective`. +- Set the `sheetIndex` to target the appropriate sheet. -The following code example demonstrates how to dynamically update data using the [updateRange](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#updaterange) method. +The following code example demonstrates how to dynamically update data using the [updateRange](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#updaterange) method. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/data-validation.md b/Document-Processing/Excel/Spreadsheet/React/data-validation.md index ef58cc13cd..3beb7cfc27 100644 --- a/Document-Processing/Excel/Spreadsheet/React/data-validation.md +++ b/Document-Processing/Excel/Spreadsheet/React/data-validation.md @@ -7,10 +7,10 @@ control: Data validation documentation: ug --- -# Data validation in EJ2 React Spreadsheet control +# Data validation in React Spreadsheet component +Data validation restricts users from entering invalid data. Use the [`allowDataValidation`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowdatavalidation) property to enable or disable data validation. -Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowdatavalidation) property to enable or disable data validation. > * The default value for `allowDataValidation` property is `true`. @@ -18,37 +18,33 @@ Data Validation is used to restrict the user from entering the invalid data. You You can apply data validation to restrict the type of data or the values that users enter into a cell. -You can apply data validation by using one of the following ways, +* **Ribbon UI:** Select the **Data** tab, then choose **Data Validation**. +* **Programmatically:** Use the [`addDataValidation`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#adddatavalidation) method. -* Select the Data tab in the Ribbon toolbar, and then choose the Data Validation item. -* Use the [`addDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#adddatavalidation) method programmatically. ## Clear Validation -Clear validation feature is used to remove data validations from the specified ranges or the whole worksheet. +Clear validation using one of these methods: -You can clear data validation rule by one of the following ways, +* **Ribbon UI:** Select the **Data** tab, then choose **Clear Validation**. +* **Programmatically:** Use the [`removeDataValidation`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#removedatavalidation) method. -* Select the Data tab in the Ribbon toolbar, and then choose the Clear Validation item. -* Use the [`removeDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#removedatavalidation) method programmatically. ## Highlight Invalid Data Highlight invalid data feature is used to highlight the previously entered invalid values. -You can highlight an invalid data by using one of the following ways, +* **Ribbon UI:** Select the **Data** tab, then choose **Highlight Invalid Data**. +* **Programmatically:** Use the [`addInvalidHighlight`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#addinvalidhighlight) method. -* Select the Data tab in the Ribbon toolbar, and then choose the Highlight Invalid Data item. -* Use the [`addInvalidHighlight()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#addinvalidhighlight) method programmatically. ## Clear Highlighted Invalid Data Clear highlight feature is used to remove the highlight from invalid cells. -You can clear the highlighted invalid data by using the following ways, +* **Ribbon UI:** Select the **Data** tab, then choose **Clear Highlight**. +* **Programmatically:** Use the [`removeInvalidHighlight`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#removeinvalidhighlight) method. -* Select the Data tab in the Ribbon toolbar, and then choose the Clear Highlight item. -* Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#removeinvalidhighlight) method programmatically. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -67,14 +63,12 @@ The Spreadsheet supports custom data validation, allowing users to define their With custom validation, you can enforce rules using logical expressions or formulas, ensuring that only valid data is entered into the Spreadsheet. -For example, consider a scenario where you want to ensure that a cell contains a number between 10 and 100. To achieve this, define a validation rule using a formula that checks if the entered value is greater than 10 and less than 100. The formula for this validation is =AND(A1>10, A1<100), where A1 refers to the cell being validated. - -When this rule is applied, the Spreadsheet evaluates the entered value against the formula. If a user enters a value outside the specified range, an alert notifies them of the invalid input. This helps users correct errors efficiently and ensures that only desired values are accepted. +**Example:** Validate a number between 10 and 100 using the formula `=AND(A1>10, A1<100)`, where A1 is the cell being validated. The Spreadsheet evaluates entered values against the formula and displays an alert if validation fails. You can apply custom data validation using two methods. -* The first is through the Data Validation dialog in the Ribbon toolbar. Navigate to the Data tab, select the Data Validation option, and choose the Custom type from the Allow dropdown menu. -* The second method is programmatically, using the [`addDataValidation()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#adddatavalidation) method, which allows developers to set custom rules dynamically via code. +* **Ribbon UI:** Navigate to **Data** tab, select **Data Validation**, then choose **Custom** from the **Allow** dropdown. +* **Programmatically:** Use the [`addDataValidation`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#adddatavalidation) method. The following code example demonstrates how to add custom data validation with a formula in a Spreadsheet. diff --git a/Document-Processing/Excel/Spreadsheet/React/events.md b/Document-Processing/Excel/Spreadsheet/React/events.md index a8a92319dd..24bd7aaca2 100644 --- a/Document-Processing/Excel/Spreadsheet/React/events.md +++ b/Document-Processing/Excel/Spreadsheet/React/events.md @@ -2,7 +2,7 @@ layout: post title: Events in React Spreadsheet component | Syncfusion description: Learn here all about the events in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. -control: Events +control: Events platform: document-processing documentation: ug --- @@ -150,5 +150,5 @@ The table below describes each event and its role in the editing process: ## See Also -* [Editing](./editing) -* [Clipboard](./clipboard) \ No newline at end of file +* [Editing](./editing.md) +* [Clipboard](./clipboard.md) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/filter.md b/Document-Processing/Excel/Spreadsheet/React/filter.md index c276cf4182..e9516d0df1 100644 --- a/Document-Processing/Excel/Spreadsheet/React/filter.md +++ b/Document-Processing/Excel/Spreadsheet/React/filter.md @@ -21,14 +21,14 @@ In the active sheet, select a range of cells to filter by value of the cell. The * Select the filter item in the Ribbon toolbar. * Right-click the sheet, select the filter item in the context menu. -* Use the [`applyFilter()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#applyfilter) method programmatically. +* Use the [`applyFilter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#applyfilter) method programmatically. * Use `Ctrl + Shift + L` keyboard shortcut to apply the filter. > * Use `Alt + Up/Down` keyboard shortcut to open the filter dialog. ## Filter by criteria -The [`applyFilter()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments. +The [`applyFilter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments. > * The [`beforeFilter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#beforefilter) event will be triggered before filtering the specified range. > * The [`filterComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#filtercomplete) event will be triggered after the filter action is completed successfully. @@ -62,7 +62,7 @@ After applying filter to a certain column, you may want to clear it to make all * Choose `Clear` option in ribbon toolbar under `Filter and Sort`. It clears the filters applied in the spreadsheet for all fields. -* Use the [`clearFilter()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields. +* Use the [`clearFilter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields. ## Clear filter on a field diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting.md index 2595d8f999..f6260e64bf 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting.md @@ -7,364 +7,26 @@ platform: document-processing documentation: ug --- -# Formatting in React Spreadsheet component +# Formatting Cells in React Spreadsheet component -Formatting options make your data easier to view and understand. The different types of formatting options in the Spreadsheet are, -* Number Formatting -* Text Formatting -* Cell Formatting +Formatting options make your data easier to view and understand. The different types of formatting options in the Spreadsheet are: -To get start quickly with Formatting, you can check on this video: +* [Number Formatting](./number-formatting) +* [Text & Cell Formatting](./text-cell-formatting) +* [Conditional Formatting](./conditional-formatting) -{% youtube "https://www.youtube.com/watch?v=AyHLgzNq6_w" %} - -## Number Formatting - -Number formatting provides a type for your data in the Spreadsheet. Use the [`allowNumberFormatting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allownumberformatting) property to enable or disable the number formatting option in the Spreadsheet. The different types of number formatting supported in Spreadsheet are, - -| Types | Format Code | Format ID | -|---------|---------|---------| -| General(default) | NA | 0 | -| Number | `0.00` | 2 | -| Currency | `$#,##0.00` | NA | -| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 | -| ShortDate | `m/d/yyyy` | 14 | -| LongDate | `dddd, mmmm dd, yyyy` | NA | -| Time | `h:mm:ss AM/PM` | NA | -| Percentage | `0.00%` | 10 | -| Fraction | `# ?/?` | 12 | -| Scientific |`0.00E+00` | 11 | -| Text | `@` | 49 | - -Number formatting can be applied in following ways, -* Using the `format` property in `cell`, you can set the desired format to each cell at initial load. -* Using the [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method, you can set the number format to a cell or range of cells. -* Selecting the number format option from ribbon toolbar. - -### Custom Number Formatting - -Spreadsheet supports custom number formats to display your data as numbers, dates, times, percentages, and currency values. If the pre-defined number formats do not meet your needs, you can set your own custom formats using custom number formats dialog or `numberFormat` method. - -The different types of custom number format populated in the custom number format dialog are, - -| Type | Format Code | Format ID | -|-------|---------|---------| -| General(default) | NA | 0 | -| Number | `0` | 1 | -| Number | `0.00` | 2 | -| Number | `#,##0` | 3 | -| Number | `#,##0.00` | 4 | -| Number | `#,##0_);(#,##0)` | 37 | -| Number | `#,##0_);[Red](#,##0)` | 38 | -| Number | `#,##0.00_);(#,##0.00)` | 39 | -| Number | `#,##0.00_);[Red](#,##0.00)` | 40 | -| Currency | `$#,##0_);($#,##0)` | 5 | -| Currency | `$#,##0_);[Red]($#,##0)` | 6 | -| Currency | `$#,##0.00_);($#,##0.00)` | 7 | -| Currency | `$#,##0.00_);[Red]($#,##0.00)` | 8 | -| Percentage | `0%` | 9 | -| Percentage | `0.00%` | 10 | -| Scientific |`0.00E+00` | 11 | -| Scientific |`##0.0E+0` | 48 | -| Fraction | `# ?/?` | 12 | -| Fraction | `# ??/??` | 13 | -| ShortDate | `m/d/yyyy` | 14 | -| Custom | `d-mmm-yy` | 15 | -| Custom | `d-mmm` | 16 | -| Custom | `mmm-yy` | 17 | -| Custom | `h:mm AM/PM` | 18 | -| Custom | `h:mm:ss AM/PM` | 19 | -| Custom | `h:mm` | 20 | -| Custom | `h:mm:ss` | 21 | -| Custom | `m/d/yyyy h:mm` | 22 | -| Custom | `mm:ss` | 45 | -| Custom | `mm:ss.0` | 47 | -| Text | `@` | 49 | -| Custom | `[h]:mm:ss` | 46 | -| Accounting | `_($* #,##0_);_($* (#,##0);_($* "-"_);_(@_)` | 42 | -| Accounting | `_(* #,##0_);_(* (#,##0);_(* "-"_);_(@_)` | 41 | -| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 | -| Accounting | `_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)` | 43 | - -Custom Number formatting can be applied in following ways, -* Using the [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method, you can set your own custom number format to a cell or range of cells. -* Selecting the custom number format option from custom number formats dialog or type your own format in dialog input and then click apply button. It will apply the custom format for selected cells. - -The following code example shows the number formatting in cell data. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "/document-processing/code-snippet/spreadsheet/react/numberformat-cs1" %} - -## Configure culture-based custom format - -Previously, the custom format dialog always displayed formats using the English settings (group separator, decimal separator, and currency symbol were not updated based on the applied culture). Starting from version `27.1.*`, the custom format dialog will now display formats according to the applied culture. You can select a culture-based number format from the dialog or enter your own format using the culture-specific decimal separator, group separator, and currency symbol. Then, click "Apply" to apply the culture-specific custom format to the selected cells. - -The spreadsheet allows customization of formats in the custom format dialog using the `configureLocalizedFormat` method. In this method, you need to pass a collection containing the default number format IDs and their corresponding format codes as arguments. Based on this collection, the custom format dialog will display the customized formats. You can refer to the [default number format IDs](https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.spreadsheet.numberingformat?view=openxml-2.8.1) from the Excel built-in number format reference. - -Compared to Excel, the date, time, currency, and accounting formats vary across different cultures. For example, when an Excel file with the date format `'m/d/yyyy'` is imported in the `en-US` culture, the spreadsheet displays the date in that format. However, when the same file is imported in the German culture, the date format changes to `'dd.MM.yyyy'`, which is the default for that region. The default number format ID for the date is 14. To customize the date format based on the culture, you should map the default number format ID to the appropriate culture-specific format code, like this: `{ id: 14, code: 'dd.MM.yyyy' }` in the `configureLocalizedFormat` method. - -> The format code should use the default decimal separator (.) and group separator (,). - -The code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German` culture. - -```js -import { configureLocalizedFormat } from '@syncfusion/ej2-react-spreadsheet'; - -const deLocaleFormats = [ - { id: 14, code: 'dd.MM.yyyy' }, - { id: 15, code: 'dd. MMM yy' }, - { id: 16, code: 'dd. MMM' }, - { id: 17, code: 'MMM yy' }, - { id: 20, code: 'hh:mm' }, - { id: 21, code: 'hh:mm:ss' }, - { id: 22, code: 'dd.MM.yyyy hh:mm' }, - { id: 37, code: '#,##0;-#,##0' }, - { id: 38, code: '#,##0;[Red]-#,##0' }, - { id: 39, code: '#,##0.00;-#,##0.00' }, - { id: 40, code: '#,##0.00;[Red]-#,##0.00' }, - { id: 5, code: '#,##0 "€";-#,##0 "€"' }, - { id: 6, code: '#,##0 "€";[Red]-#,##0 "€"' }, - { id: 7, code: '#,##0.00 "€";-#,##0.00 "€"' }, - { id: 8, code: '#,##0.00 "€";[Red]-#,##0.00 "€"' }, - { id: 41, code: '_-* #,##0_-;-* #,##0_-;_-* "-"_-;_-@_-' }, - { id: 42, code: '_-* #,##0 "€"_-;-* #,##0 "€"_-;_-* "-" "€"_-;_-@_-' }, - { id: 43, code: '_-* #,##0.00_-;-* #,##0.00_-;_-* "-"??_-;_-@_-' }, - { id: 44, code: '_-* #,##0.00 "€"_-;-* #,##0.00 "€"_-;_-* "-"?? "€"_-;_-@_-' } -]; - -// Mapping culture-based number formats for the "de" culture: The "spreadsheetRef.current" parameter is an instance of the spreadsheet component, and the "deLocaleFormats" parameter is an array containing format codes and their corresponding format IDs for the "de" culture. -configureLocalizedFormat(spreadsheetRef.current, deLocaleFormats); -``` - -The following code example demonstrates how to configure culture-based formats for different cultures in the spreadsheet. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/globalization-cs1/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/globalization-cs1/app/app.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/spreadsheet/react/globalization-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/spreadsheet/react/globalization-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "/document-processing/code-snippet/spreadsheet/react/globalization-cs1" %} - -## Text and cell formatting - -Text and cell formatting enhances the look and feel of your cell. It helps to highlight a particular cell or range of cells from a whole workbook. You can apply formats like font size, font family, font color, text alignment, border etc. to a cell or range of cells. Use the [`allowCellFormatting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowcellformatting) property to enable or disable the text and cell formatting option in Spreadsheet. You can set the formats in following ways, -* Using the `style` property, you can set formats to each cell at initial load. -* Using the [`cellFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cellformat) method, you can set formats to a cell or range of cells. -* You can also apply by clicking the desired format option from the ribbon toolbar. - -### Fonts - -Various font formats supported in the spreadsheet are font-family, font-size, bold, italic, strike-through, underline and font color. - -### Text Alignment - -You can align text in a cell either vertically or horizontally using the `textAlign` and `verticalAlign` property. - -### Indents - -To enhance the appearance of text in a cell, you can change the indentation of a cell content using `textIndent` property. - -### Fill color - -To highlight cell or range of cells from whole workbook you can apply background color for a cell using `backgroundColor` property. - -### Borders - -You can add borders around a cell or range of cells to define a section of worksheet or a table. The different types of border options available in the spreadsheet are, - -| Types | Actions | -|-------|---------| -| Top Border | Specifies the top border of a cell or range of cells.| -| Left Border | Specifies the left border of a cell or range of cells.| -| Right Border | Specifies the right border of a cell or range of cells.| -| Bottom Border | Specifies the bottom border of a cell or range of cells.| -| No Border | Used to clear the border from a cell or range of cells.| -| All Border | Specifies all border of a cell or range of cells.| -| Horizontal Border | Specifies the top and bottom border of a cell or range of cells.| -| Vertical Border | Specifies the left and right border of a cell or range of cells.| -| Outside Border | Specifies the outside border of a range of cells.| -| Inside Border | Specifies the inside border of a range of cells.| - -You can also change the color, size, and style of the border. The size and style supported in the spreadsheet are, - -| Types | Actions | -|-------|---------| -| Thin | Specifies the `1px` border size (default).| -| Medium | Specifies the `2px` border size.| -| Thick | Specifies the `3px` border size.| -| Solid | Used to create the `solid` border (default).| -| Dashed | Used to create the `dashed` border.| -| Dotted | Used to create the `dotted` border.| -| Double | Used to create the `double` border.| - -Borders can be applied in the following ways, -* Using the `border`, `borderLeft`, `borderRight`, `borderBottom` properties, you can set the desired border to each cell at initial load. -* Using the `setBorder` method, you can set various border options to a cell or range of cells. -* Selecting the border options from ribbon toolbar. - -The following code example shows the style formatting in text and cells of the spreadsheet. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/cellformat-cs1/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/cellformat-cs1/app/app.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/spreadsheet/react/cellformat-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/spreadsheet/react/cellformat-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "/document-processing/code-snippet/spreadsheet/react/cellformat-cs1" %} +To get started quickly with Formatting, you can check this video: -### Limitations of Formatting - -The following features are not supported in Formatting: - -* Insert row/column between the formatting applied cells. -* Formatting support for row/column. - -## Conditional Formatting - -Conditional formatting helps you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the [`allowConditionalFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowconditionalformat) property. - -> * The default value for the `allowConditionalFormat` property is `true`. - -### Apply Conditional Formatting - -You can apply conditional formatting by using one of the following ways, - -* Select the conditional formatting icon in the Ribbon toolbar under the Home Tab. -* Using the [`conditionalFormat()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#conditionalformat) method to define the condition. -* Using the `conditionalFormats` in sheets model. - -Conditional formatting has the following types in the spreadsheet, - -### Highlight cells rules - -Highlight cells rules option in the conditional formatting enables you to highlight cells with a preset color depending on the cell's value. - -The following options can be given for the highlight cells rules as type, - ->* 'GreaterThan', 'LessThan', 'Between', 'EqualTo', 'ContainsText', 'DateOccur', 'Duplicate', 'Unique'. - -The following preset colors can be used for formatting styles, - ->* `"RedFT"` - Light Red Fill with Dark Red Text, ->* `"YellowFT"` - Yellow Fill with Dark Yellow Text, ->* `"GreenFT"` - Green Fill with Dark Green Text, ->* `"RedF"` - Red Fill, ->* `"RedT"` - Red Text. - -### Top bottom rules - -Top bottom rules option in the conditional formatting allows you to apply formatting to the cells that satisfy a statistical condition with other cells in the range. - -The following options can be given for the top bottom rules as type, - ->* 'Top10Items', 'Bottom10Items', 'Top10Percentage', 'Bottom10Percentage', 'BelowAverage', 'AboveAverage'. - -### Data Bars - -You can apply data bars to represent the data graphically inside a cell. The longest bar represents the highest value and the shorter bars represent the smaller values. - -The following options can be given for the data bars as type, - ->* 'BlueDataBar', 'GreenDataBar', 'RedDataBar', 'OrangeDataBar', 'LightBlueDataBar', 'PurpleDataBar'. - -### Color Scales - -Using color scales, you can format your cells with two or three colors, where different color shades represent the different cell values. In the Green-Yellow-Red(GYR) Color Scale, the cell that holds the minimum value is colored as red. The cell that holds the median is colored as yellow, and the cell that holds the maximum value is colored as green. All other cells are colored proportionally. - -The following options can be given for the color scales as type, - ->* 'GYRColorScale', 'RYGColorScale', 'GWRColorScale', 'RWGColorScale', 'BWRColorScale', 'RWBColorScale', 'WRColorScale', 'RWColorScale', 'GWColorScale', 'WGColorScale', 'GYColorScale', 'YGColorScale'. - -### Icon Sets - -Icon sets will help you to visually represent your data with icons. Every icon represents a range of values. In the Three Arrows(colored) icon, the green arrow icon represents the values greater than 67%, the yellow arrow icon represents the values between 33% to 67%, and the red arrow icon represents the values less than 33%. - -The following options can be given for the icon sets as type, - ->* 'ThreeArrows', 'ThreeArrowsGray', 'FourArrowsGray', 'FourArrows', 'FiveArrowsGray', 'FiveArrows', 'ThreeTrafficLights1', 'ThreeTrafficLights2', 'ThreeSigns', 'FourTrafficLights', 'FourRedToBlack', 'ThreeSymbols', 'ThreeSymbols2', 'ThreeFlags', 'FourRating', 'FiveQuarters', 'FiveRating', 'ThreeTriangles', 'ThreeStars', 'FiveBoxes'. - -### Custom Format - -Using the custom format for conditional formatting you can set cell styles like color, background color, font style, font weight, and underline. - -In the MAY and JUN columns, we have applied conditional formatting custom format. - ->* In the Conditional format, custom format supported for Highlight cell rules and Top bottom rules. - -### Clear Rules - -You can clear the defined rules by using one of the following ways, - -* Using the “Clear Rules” option in the Conditional Formatting button of HOME Tab in the ribbon to clear the rule from selected cells. -* Using the [`clearConditionalFormat()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#clearconditionalformat) method to clear the defined rules. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/app.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/spreadsheet/react/conditional-formatting-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "/document-processing/code-snippet/spreadsheet/react/conditional-formatting-cs1" %} - -### Limitations of Conditional formatting - -The following features have some limitations in Conditional Formatting: - -* Insert row/column between the conditional formatting. -* Conditional formatting with formula support. -* Copy and paste the conditional formatting applied cells. -* Custom rule support. +{% youtube "https://www.youtube.com/watch?v=AyHLgzNq6_w" %} ## Note -You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to knows how to present and manipulate data. +You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to learn how to present and manipulate data. ## See Also -* [Rows and columns](./rows-and-columns) -* [Hyperlink](./link) -* [Sorting](./sort) -* [Filtering](./filter) -* [`Ribbon customization`](./ribbon#ribbon-customization) \ No newline at end of file +- [Rows and columns](./rows-and-columns) +- [Hyperlink](./link) +- [Sorting](./sort) +- [Filtering](./filter) +- [`Ribbon customization`](./ribbon#ribbon-customization) diff --git a/Document-Processing/Excel/Spreadsheet/React/formulas.md b/Document-Processing/Excel/Spreadsheet/React/formulas.md index 414bd6789e..7d30bc602e 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formulas.md +++ b/Document-Processing/Excel/Spreadsheet/React/formulas.md @@ -9,26 +9,26 @@ documentation: ug # Formulas in React Spreadsheet component -Formulas are used for calculating the data in a worksheet. You can refer the cell reference from same sheet or from different sheets. +Formulas are used to perform calculations on data in a worksheet. You can refer the cell reference from same sheet or from different sheets. ## Usage -You can set formula for a cell in the following ways, +You can set a formula for a cell in the following ways, -* Using the `formula` property from `cell`, you can set the formula or expression to each cell at initial load. +* Using the [formula](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#formula) property from `cell`, you can set the formula or expression to each cell at initial load. * Set the formula or expression through data binding. * You can set formula for a cell by [`editing`](./editing). -* Using the [`updateCell`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#updatecell) method, you can set or update the cell formula. +* Using the [`updateCell`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#updatecell) method, you can set or update the cell formula. -## Culture-Based Argument Separator +## Culture-Specific Formula Separators -Previously, although you could import culture-based Excel files into the Spreadsheet component, the formulas wouldn't calculate correctly. This was due to the absence of culture-based argument separators and support for culture-based formatted numeric values as arguments. However, starting from version 25.1.35, you can now import culture-based Excel files into the Spreadsheet component. +In earlier versions, even though culture-based Excel files could be imported into the Spreadsheet component, formulas did not calculate correctly. This happened because culture-based argument separators and support for culture-based formatted numeric values were not available. Starting from version **25.1.35**, you can now import culture-based Excel files into the Spreadsheet component with proper support. -> Before importing culture-based Excel files, ensure that the Spreadsheet component is rendered with the corresponding culture. Additionally, launch the import/export services with the same culture to ensure compatibility. +> Before importing culture-based Excel files, make sure the Spreadsheet component is rendered with the matching culture. Also, start the import/export services with the same culture to ensure compatibility. -When loading spreadsheet data with culture-based formula argument separators using cell data binding, local/remote data, or JSON, ensure to set the [listSeparator](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#listseparator) property value as the culture-based list separator from your end. Additionally, note that when importing an Excel file, the [listSeparator](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#listseparator) property will be updated based on the culture of the launched import/export service. +When loading spreadsheet data with culture-based formula argument separators using cell data binding, local/remote data, or JSON, ensure to set the [listSeparator](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#listseparator) property value as the culture-based list separator from your end. Additionally, note that when importing an Excel file, the [listSeparator](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#listseparator) property will be updated based on the culture of the launched import/export service. -In the example below, the Spreadsheet component is rendered with the `German culture (de)`. Additionally, you can find references on how to set the culture-based argument separator and culture-based formatted numeric value as arguments to the formulas. +In the example below, the Spreadsheet component is rendered with the **German culture[de]**. The example also shows how to set the culture-based argument separator and use culture-based formatted numeric values as arguments in formulas. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -52,11 +52,11 @@ In the example below, the Spreadsheet component is rendered with the `German cul ## Create User Defined Functions / Custom Functions -The Spreadsheet includes a number of built-in formulas. For your convenience, a list of supported formulas can be found [here](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formulas#supported-formulas). +The Spreadsheet includes a set of built-in formulas. For convenience, you can find the list of supported formulas [here](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formulas#supported-formulas). -You can define and use an unsupported formula, i.e. a user defined/custom formula, in the spreadsheet by using the [addCustomFunction](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addcustomfunction) function. Meanwhile, remember that you should define a user defined/custom formula whose results should only return a single value. If a user-defined/custom formula returns an array, it will be time-consuming to update adjacent cell values. +You can also define and use formulas that are not supported by default, known as **user defined/custom formulas**, by using the [addCustomFunction](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#addcustomfunction) function. Keep in mind that a user defined/custom formula should return only a single value. If the formula returns an array, updating adjacent cell values will take more time and may affect performance. -The following code example shows an unsupported formula in the spreadsheet. +The following code example shows how to use an unsupported formula in the Spreadsheet. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -75,7 +75,7 @@ The following code example shows an unsupported formula in the spreadsheet. {% previewsample "/document-processing/code-snippet/spreadsheet/react/formula-cs1" %} -Second, if you want to directly compute any formula or expression, you can use the [computeExpression](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#computeexpression) method. This method will work for both built-in and used-defined/custom formula. +To directly compute a formula or expression, use the [computeExpression](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#computeexpression) method. This method will work for both built-in and used-defined/custom formula. The following code example shows how to use `computeExpression` method in the spreadsheet. @@ -96,20 +96,21 @@ The following code example shows how to use `computeExpression` method in the sp {% previewsample "/document-processing/code-snippet/spreadsheet/react/formula-cs2" %} -## Formula bar +## Formula Bar -Formula bar is used to edit or enter cell data in much easier way. By default, the formula bar is enabled in the spreadsheet. Use the [`showFormulaBar`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#showformulabar) property to enable or disable the formula bar. +The formula bar is used to enter or edit cell data more easily. By default, the formula bar is enabled in the spreadsheet. Use the [`showFormulaBar`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#showformulabar) property to enable or disable the formula bar. ## Named Ranges -You can define a meaningful name for a cell range and use it in the formula for calculation. It makes your formula much easier to understand and maintain. You can add named ranges to the Spreadsheet in the following ways, +You can assign a meaningful name to a cell range and then use that name in formulas for calculation. This makes formulas easier to read, understand, and maintain. Named ranges can be added to the Spreadsheet in several ways: -* Using the [`definedNames`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#definednames) collection, you can add multiple named ranges at initial load. -* Use the [`addDefinedName`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#adddefinedname) method to add a named range dynamically. -* You can remove an added named range dynamically using the [`removeDefinedName`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#removedefinedname) method. -* Select the range of cells, and then enter the name for the selected range in the name box. +* Use the [`definedNames`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#definednames) collection to add multiple named ranges during the initial load. +* Use the [`addDefinedName`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#adddefinedname) method to add a named range dynamically at runtime. +* Remove a named range dynamically using the [`removeDefinedName`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#removedefinedname) method. +* Select a range of cells and enter a name for the selected range directly in the **Name Box**. + +The following code example demonstrates how named ranges can be defined and used in formulas within the Spreadsheet. -The following code example shows the usage of named ranges support. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -130,18 +131,20 @@ The following code example shows the usage of named ranges support. ## Calculation Mode -The Spreadsheet provides a `Calculation Mode` feature like the calculation options in online Excel. This feature allows you to control when and how formulas are recalculated in the spreadsheet. The available modes are: +The Spreadsheet provides a **Calculation Mode** feature similar to the calculation options in online Excel. This feature lets you control when and how formulas are recalculated in the spreadsheet. The available modes are: -* `Automatic`: Formulas are recalculated instantly whenever a change occurs in the dependent cells. -* `Manual`: Formulas are recalculated only when triggered explicitly by the user using options like `Calculate Sheet` or `Calculate Workbook`. +* **Automatic**: Formulas recalculate instantly whenever a change is made in dependent cells. +* **Manual**: Formulas recalculate only when explicitly triggered by the user using options like **Calculate Sheet** or **Calculate Workbook**. -You can configure the calculate mode using the [`calculationMode`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#calculationmode) property of the Spreadsheet. These modes offer flexibility to balance real-time updates and performance optimization. +You can configure the calculation mode using the [`calculationMode`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#calculationmode) property of the Spreadsheet. These modes give flexibility to balance real-time updates with performance optimization. ### Automatic Mode -In Automatic Mode, formulas are recalculated instantly whenever a dependent cell is modified. This mode is perfect for scenarios where real-time updates are essential, ensuring that users see the latest results without additional actions. +In **Automatic Mode**, formulas are recalculated immediately whenever a dependent cell is changed. This mode is ideal for situations where real-time updates are important, ensuring that users always see the latest results without needing extra steps. + +For example, if cell `C1` contains the formula `=A1+B1`, any change in `A1` or `B1` will instantly update the value in `C1`. No manual action is required. -For example, consider a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, `C1` updates immediately without requiring any user intervention. You can enable this mode by setting the [`calculationMode`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#calculationmode) property to `Automatic`. +You can enable this mode by setting the [`calculationMode`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#calculationmode) property to `Automatic`. The following code example demonstrates how to set the Automatic calculation mode in a Spreadsheet. @@ -164,11 +167,12 @@ The following code example demonstrates how to set the Automatic calculation mod ### Manual Mode -In Manual Mode, formulas are not recalculated automatically when cell values are modified. Instead, recalculations must be triggered explicitly. This mode is ideal for scenarios where performance optimization is a priority, such as working with large datasets or computationally intensive formulas. +In **Manual Mode**, formulas are not recalculated automatically when cell values change. Instead, recalculation must be triggered explicitly. This mode is useful when performance optimization is important, such as working with large datasets or formulas that require heavy computation. -For example, imagine a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, the value in `C1` will not update automatically. Instead, the recalculation must be initiated manually using either the `Calculate Sheet` or `Calculate Workbook` option. To manually initiate recalculation, the Spreadsheet provides two options: +For example, if cell `C1` contains the formula `=A1+B1`, changing the values in `A1` or `B1` will not update `C1` automatically. The recalculation must be initiated manually using either the `Calculate Sheet` or `Calculate Workbook` option. -* `Calculate Sheet`: Recalculates formulas for the active sheet only. +The Spreadsheet provides two manual recalculation options: +* `Calculate Sheet`: Recalculates formulas only in the active sheet. * `Calculate Workbook`: Recalculates formulas across all sheets in the workbook. The following code example demonstrates how to set the Manual calculation mode in a Spreadsheet. @@ -192,68 +196,25 @@ The following code example demonstrates how to set the Manual calculation mode i ## Supported Formulas -The following are the list of formulas supported in spreadsheet, +The Spreadsheet component supports a comprehensive set of built-in formulas organized by category. Each formula can be used for calculations, data analysis, text manipulation, date operations, and logical evaluations. + +### Math & Trigonometry | Formula | Description | -|-------|---------| +|---------|-------------| | ABS | Returns the value of a number without its sign. | -| ADDRESS | Returns a cell reference as text, given specified row and column numbers. | -| AND | Returns TRUE if all the arguments are TRUE, otherwise returns FALSE. | -| AVERAGE | Calculates average for the series of numbers and/or cells excluding text. | -| AVERAGEA | Calculates the average for the cells evaluating TRUE as 1, text and FALSE as 0. | -| AVERAGEIF | Clears content of the active cell and enables edit mode. | -| AVERAGEIFS | Calculates average for the cells based on specified conditions. | | CEILING | Rounds a number up to the nearest multiple of a given factor. | -| CHOOSE | Returns a value from list of values, based on index number. | -| CHAR | Returns the character from the specified number. | -| CODE | Returns the numeric code for the first character in a given string. | -| CONCAT | Concatenates a list or a range of text strings. | -| CONCATENATE | Combines two or more strings together. | -| COUNT | Counts the cells that contain numeric values in a range. | -| COUNTA | Counts the cells that contains values in a range. | -| COUNTBLANK | Returns the number of empty cells in a specified range of cells. | -| COUNTIF | Counts the cells based on specified condition. | -| COUNTIFS | Counts the cells based on specified conditions. | -| DATE | Returns the date based on given year, month, and day. | -| DATEVALUE | Converts a date string into date value. | -| DAY | Returns the day from the given date. | -| DAYS | Returns the number of days between two dates. | | DECIMAL | Converts a text representation of a number in a given base into a decimal number. | | DEGREES | Converts radians to degrees. | -| DOLLAR | Converts the number to currency formatted text. | -| EDATE | Returns a date with given number of months before or after the specified date. | -| EOMONTH | Returns the last day of the month that is a specified number of months before or after an initially supplied start date. | | EVEN | Rounds a positive number up and negative number down to the nearest even integer. | -| EXACT | Checks whether a two text strings are exactly same and returns TRUE or FALSE. | | EXP | Returns e raised to the power of the given number. | | FACT | Returns the factorial of a number. | -| FIND | Returns the position of a string within another string, which is case sensitive.| | FLOOR | Rounds a number down to the nearest multiple of a given factor. | -| HLOOKUP | Looks for a value in the top row of the array of values and then returns a value in the same column from a row in the array that you specify. | -| HOUR | Returns the number of hours in a specified time string. | -| IF | Returns value based on the given expression. | -| IFERROR | Returns value if no error found else it will return specified value. | -| IFS | Returns value based on the given multiple expressions. | -| INDEX | Returns a value of the cell in a given range based on row and column number. | | INT | Rounds a number down to the nearest integer. | -| INTERCEPT | Calculates the point of the Y-intercept line via linear regression. | -| ISNUMBER | Returns true when the value parses as a numeric value. | -| LARGE | Returns the `k-th` largest value in a given array. | -| LEN | Returns a number of characters in a given string. | | LN | Returns the natural logarithm of a number. | | LOG | Returns the logarithm of a number to the base that you specify. | -| LOOKUP | Looks for a value in a one-row or one-column range, then returns a value from the same position in a second one-row or one-column range. | -| MATCH | Returns the relative position of a specified value in given range. | -| MAX | Returns the largest number of the given arguments. | -| MEDIAN | Returns the median of the given set of numbers. | -| MINUTE | Returns the number of minutes in a specified time string. | -| MIN | Returns the smallest number of the given arguments. | | MOD | Returns a remainder after a number is divided by divisor. | -| MONTH | Returns the number of months in a specified date string. | -| NOT | Returns the inverse of a given logical expression. | -| NOW | Returns the current date and time. | | ODD | Rounds a positive number up and negative number down to the nearest odd integer. | -| OR | Returns TRUE if any of the arguments are TRUE, otherwise returns FALSE. | | PI | Returns the value of pi. | | POWER | Returns the result of a number raised to power. | | PRODUCT | Multiplies a series of numbers and/or cells. | @@ -263,24 +224,106 @@ The following are the list of formulas supported in spreadsheet, | ROUND | Rounds a number to the specified number of digits. | | ROUNDDOWN | Rounds a number down, toward zero. | | ROUNDUP | Rounds a number up, away from zero. | -| RSQ | Returns the square of the Pearson product moment correlation coefficient based on data points in known_y's and known_x's. | -| SECOND | Returns the number of seconds in a specified time string. | -| SMALL | Returns the `k-th` smallest value in a given array. | -| SLOPE | Returns the slope of the line from linear regression of the data points. | -| SORT | Sorts the contents of a column, range, or array in ascending or descending order. | | SQRT | Returns the square root of a positive number. | -| SUBTOTAL | Returns subtotal for a range using the given function number. | +| TRUNC | Truncates a supplied number to a specified number of decimal places. | + + +### Statistical & Aggregate + +| Formula | Description | +|---------|-------------| +| AVERAGE | Calculates average for the series of numbers and/or cells excluding text. | +| AVERAGEA | Calculates the average for the cells evaluating TRUE as 1, text and FALSE as 0. | +| AVERAGEIF | Calculates the average of cells that meet a specified condition. | +| AVERAGEIFS | Calculates average for cells based on multiple specified conditions. | +| COUNT | Counts the cells that contain numeric values in a range. | +| COUNTA | Counts the cells that contain values in a range. | +| COUNTBLANK | Returns the number of empty cells in a specified range of cells. | +| COUNTIF | Counts the cells based on a specified condition. | +| COUNTIFS | Counts the cells based on multiple specified conditions. | +| GEOMEAN | Returns the geometric mean of a given array or range of positive data. | +| INTERCEPT | Calculates the point of the Y-intercept line via linear regression. | +| LARGE | Returns the `k-th` largest value in a given array. | +| MAX | Returns the largest number of the given arguments. | +| MEDIAN | Returns the median of the given set of numbers. | +| MIN | Returns the smallest number of the given arguments. | +| RSQ | Returns the square of the Pearson product moment correlation coefficient based on data points. | +| SLOPE | Returns the slope of the line from linear regression of the data points. | +| SMALL | Returns the `k-th` smallest value in a given array. | | SUM | Adds a series of numbers and/or cells. | -| SUMIF | Adds the cells based on specified condition. | -| SUMIFS | Adds the cells based on specified conditions. | -| SUMPRODUCT | Returns the sum of the products of the corresponding array in given arrays. | -| T | Checks whether a value is text or not and returns the text. | -| TEXT | Converts the supplied value into text by using the user-specified format. | +| SUMIF | Adds the cells based on a specified condition. | +| SUMIFS | Adds the cells based on multiple specified conditions. | +| SUMPRODUCT | Returns the sum of the products of corresponding arrays in given arrays. | +| SUBTOTAL | Returns subtotal for a range using the given function number. | + + +### Date & Time + +| Formula | Description | +|---------|-------------| +| DATE | Returns the date based on given year, month, and day. | +| DATEVALUE | Converts a date string into date value. | +| DAY | Returns the day from the given date. | +| DAYS | Returns the number of days between two dates. | +| EDATE | Returns a date with given number of months before or after the specified date. | +| EOMONTH | Returns the last day of the month that is a specified number of months before or after a start date. | +| HOUR | Returns the number of hours in a specified time string. | +| MINUTE | Returns the number of minutes in a specified time string. | +| MONTH | Returns the number of months in a specified date string. | +| NOW | Returns the current date and time. | +| SECOND | Returns the number of seconds in a specified time string. | | TIME | Converts hours, minutes, seconds to the time formatted text. | | TODAY | Returns the current date. | -| TRUNC | Truncates a supplied number to a specified number of decimal places. | -| UNIQUE | Returns a unique values from a range or array. | -| VLOOKUP | Looks for a specific value in the first column of a lookup range and returns a corresponding value from a different column within the same row. | +| WEEKDAY | Returns the day of the week for a specified date. | + +### Logical + +| Formula | Description | +|---------|-------------| +| AND | Returns TRUE if all the arguments are TRUE, otherwise returns FALSE. | +| IF | Returns value based on the given expression. | +| IFERROR | Returns value if no error found; else returns specified value. | +| IFS | Returns value based on multiple given expressions. | +| NOT | Returns the inverse of a given logical expression. | +| OR | Returns TRUE if any of the arguments are TRUE, otherwise returns FALSE. | + + +### Lookup & Reference + +| Formula | Description | +|---------|-------------| +| ADDRESS | Returns a cell reference as text, given specified row and column numbers. | +| CHOOSE | Returns a value from list of values, based on index number. | +| HLOOKUP | Looks for a value in the top row of an array and returns a value in the same column from a specified row. | +| INDEX | Returns a value of the cell in a given range based on row and column number. | +| LOOKUP | Looks for a value in a one-row or one-column range, then returns a value from the same position in another range. | +| MATCH | Returns the relative position of a specified value in a given range. | +| SORT | Sorts the contents of a column, range, or array in ascending or descending order. | +| UNIQUE | Returns unique values from a range or array. | +| VLOOKUP | Looks for a value in the first column of a lookup range and returns a corresponding value from a different column. | + +### Text + +| Formula | Description | +|---------|-------------| +| CHAR | Returns the character from the specified number. | +| CODE | Returns the numeric code for the first character in a given string. | +| CONCAT | Concatenates a list or a range of text strings. | +| CONCATENATE | Combines two or more strings together. | +| DOLLAR | Converts the number to currency formatted text. | +| EXACT | Checks whether two text strings are exactly the same and returns TRUE or FALSE. | +| FIND | Returns the position of a string within another string (case sensitive). | +| LEN | Returns the number of characters in a given string. | +| PROPER | Converts text to proper case (first letter capitalized). | +| T | Checks whether a value is text or not and returns the text. | +| TEXT | Converts the supplied value into text by using the user-specified format. | + +### Information + +| Formula | Description | +|---------|-------------| +| ISNUMBER | Returns true when the value parses as a numeric value; otherwise returns false. | + ## Formula Error Dialog @@ -288,15 +331,15 @@ If you enter an invalid formula in a cell, an error dialog with an error message | Error Message | Reason | |-------|---------| -| We found that you typed a formula with an invalid arguments | Occurs when passing an argument even though it wasn't needed. | -| We found that you typed a formula with an empty expression | Occurs when passing an empty expression in the argument. | -| We found that you typed a formula with one or more missing opening or closing parenthesis | Occurs when an open parenthesis or a close parenthesis is missing. | -| We found that you typed a formula which is improper | Occurs when passing a single reference but a range was needed. | -| We found that you typed a formula with a wrong number of arguments | Occurs when the required arguments were not passed. | -| We found that you typed a formula which requires 3 arguments | Occurs when the required 3 arguments were not passed. | -| We found that you typed a formula with a mismatched quotes | Occurs when passing an argument with mismatched quotes. | -| We found that you typed a formula with a circular reference | Occurs when passing a formula with circular cell reference. | -| We found that you typed a formula which is invalid | Except in the cases mentioned above, all other errors will fall into this broad category. | +| `We found that you typed a formula with an invalid arguments` | Occurs when passing an argument even though it wasn't needed. | +| `We found that you typed a formula with an empty expression` | Occurs when passing an empty expression in the argument. | +| `We found that you typed a formula with one or more missing opening or closing parenthesis` | Occurs when an open parenthesis or a close parenthesis is missing. | +| `We found that you typed a formula which is improper` | Occurs when passing a single reference but a range was needed. | +| `We found that you typed a formula with a wrong number of arguments` | Occurs when the required arguments were not passed. | +| `We found that you typed a formula which requires 3 arguments` | Occurs when the required 3 arguments were not passed. | +| `We found that you typed a formula with a mismatched quotes` | Occurs when passing an argument with mismatched quotes. | +| `We found that you typed a formula with a circular reference` | Occurs when passing a formula with circular cell reference. | +| `We found that you typed a formula which is invalid` | Except in the cases mentioned above, all other errors will fall into this broad category. | ![Formula Alert Dialog](./images/formula-alert-dialog.png) diff --git a/Document-Processing/Excel/Spreadsheet/React/freeze-pane.md b/Document-Processing/Excel/Spreadsheet/React/freeze-pane.md index a03f48d83a..c56d6f23a9 100644 --- a/Document-Processing/Excel/Spreadsheet/React/freeze-pane.md +++ b/Document-Processing/Excel/Spreadsheet/React/freeze-pane.md @@ -9,20 +9,22 @@ documentation: ug # Freeze pane in React Spreadsheet component -Freeze Panes helps you to keep particular rows or columns visible when scrolling the sheet content in the spreadsheet. You can specify the number of frozen rows and columns using the [`frozenRows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#frozenrows) and [`frozenColumns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#frozencolumns) properties inside the [`Sheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#sheets) property. +**Freeze Panes** helps you keep specific rows or columns visible while scrolling through the sheet content. This makes it easier to work with large spreadsheets without losing track of important headers or labels. -To get start quickly with Freeze Panes in React Spreadsheet, you can check on this video: +You can set the number of frozen rows and columns using the [`frozenRows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#frozenrows) and [`frozenColumns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#frozencolumns) properties inside the [`Sheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sheets) property. + +To quickly get started with Freeze Panes in React Spreadsheet, you can check out this video tutorial: {% youtube "https://www.youtube.com/watch?v=TX4P6gFymwo" %} -## Apply freezepanes on UI +## Apply freeze panes on UI **User Interface**: In the active spreadsheet, click the cell where you want to create freeze panes. Freeze panes can be done in any of the following ways: * Select the View tab in the Ribbon toolbar and choose the `Freeze Panes` item. -* Use the [`freezePanes`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#freezepanes) method programmatically. +* Use the [`freezePanes`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#freezepanes) method programmatically. ## FrozenRows @@ -41,12 +43,13 @@ It allows you to keep a certain number of columns visible while scrolling horizo **User Interface**: -In the active spreadsheet, select the cell where you want to create frozen columns. Frozen columns can be done in any one of the following ways: +In the active spreadsheet, you can freeze columns by selecting the cell where you want them to remain visible. Frozen columns can be applied in the following ways: + +* Go to the **View** tab in the Ribbon toolbar and choose the **Freeze Columns** option. +* Set the number of frozen columns using the [`frozenColumns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sheet#frozencolumns) property inside the [Sheet](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sheet) property. -* Select the View tab in the Ribbon toolbar and choose the `Freeze Columns` item. -* You can specify the number of frozen columns using the `frozenColumns` property inside the `Sheet` property. +In this demo, `frozenColumns` is set to **2** and `frozenRows` is set to **2**. As a result, the first two columns on the left and the top two rows remain frozen while scrolling. -In this demo, the frozenColumns is set as ‘2’, and the frozenRows is set as ‘2’. Hence, the two columns on the left and the top two rows are frozen. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -69,7 +72,7 @@ In this demo, the frozenColumns is set as ‘2’, and the frozenRows is set as Here, we have listed out the limitations with Freeze Panes feature. -* Merging the cells between freeze and unfreeze area. +* Merging cells between the freeze and unfreeze areas is not supported. * If images and charts are added inside the freeze area cells, their portion in the unfreeze area will not move when scrolling. ## Note diff --git a/Document-Processing/Excel/Spreadsheet/React/global-local.md b/Document-Processing/Excel/Spreadsheet/React/global-local.md index 26d7cbbfc8..e8e2d90bbc 100644 --- a/Document-Processing/Excel/Spreadsheet/React/global-local.md +++ b/Document-Processing/Excel/Spreadsheet/React/global-local.md @@ -12,368 +12,368 @@ documentation: ug ## Localization The [`Localization`](https://helpej2.syncfusion.com/react/documentation/common/globalization/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the -[`locale`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#locale) value and translation object. +[`locale`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#locale) value and translation object. The following list of properties and their values are used in the Spreadsheet. Locale keywords |Text -----|----- -Cut | Cut -Copy | Copy -Paste | Paste -PasteSpecial | Paste Special -All | All -Values | Values -Formats | Formats -Font | Font -FontSize | Font Size -Bold | Bold -Italic | Italic -Underline | Underline -Strikethrough | Strikethrough -TextColor | Text Color -FillColor | Fill Color -HorizontalAlignment | Horizontal Alignment -AlignLeft | Align Left -AlignCenter | Center -AlignRight | Align Right -VerticalAlignment | Vertical Alignment -AlignTop | Align Top -AlignMiddle | Align Middle -AlignBottom | Align Bottom -InsertFunction | Insert Function -Insert | Insert -Delete | Delete -Rename | Rename -Hide | Hide -Unhide | Unhide -NameBox | Name Box -ShowHeaders | Show Headers -HideHeaders | Hide Headers -ShowGridLines | Show Gridlines -HideGridLines | Hide Gridlines -AddSheet | Add Sheet -ListAllSheets | List All Sheets -FullScreen | Full Screen -CollapseToolbar | Collapse Toolbar -ExpandToolbar | Expand Toolbar -CollapseFormulaBar | Collapse Formula Bar -ExpandFormulaBar | Expand Formula Bar -File | File -Home | Home -Formulas | Formulas -View | View -New | New -Open | Open -SaveAs | Save As -ExcelXlsx | Microsoft Excel -ExcelXls | Microsoft Excel 97-2003 -CSV | Comma-separated values -FormulaBar | Formula Bar -Ok | Ok -Close | Close -Cancel | Cancel -Apply | Apply -MoreColors | More Colors -StandardColors | Standard Colors -General | General -Number | Number -Currency | Currency -Accounting | Accounting -ShortDate | Short Date -LongDate | Long Date -Time | Time -Percentage | Percentage -Fraction | Fraction -Scientific | Scientific -Text | Text -NumberFormat | Number Format -MobileFormulaBarPlaceHolder | Enter value or Formula -PasteAlert | You can't paste it here because the copy area and paste area aren't in the same size. Please try pasting in a different range. -DestroyAlert | Are you sure you want to destroy the current workbook without saving and create a new workbook? -SheetRenameInvalidAlert | Sheet name contains invalid character. -SheetRenameEmptyAlert | Sheet name cannot be empty. -SheetRenameAlreadyExistsAlert | Sheet name already exists. Please enter another name. -DeleteSheetAlert | Are you sure you want to delete this sheet? -DeleteSingleLastSheetAlert | A Workbook must contain at least one visible worksheet. -PickACategory | Pick a category -Description | Description -UnsupportedFile | Unsupported File -InvalidUrl | Invalid Url -SUM | Adds a series of numbers and/or cells. -SUMIF | Adds the cells based on the specified condition. -SUMIFS | Adds the cells based on the specified conditions. -ABS | Returns the value of a number without its sign. -RAND | Returns a random number between 0 and 1. -RANDBETWEEN | Returns a random integer based on the specified values. -FLOOR | Rounds a number down to the nearest multiple of a given factor. -CEILING | Rounds a number up to the nearest multiple of a given factor. -PRODUCT | Multiplies a series of numbers and/or cells. -AVERAGE | Calculates average for the series of numbers and/or cells excluding text. -AVERAGEIF | Calculates average for the cells based on the specified criterion. -AVERAGEIFS | Calculates average for the cells based on the specified conditions. -AVERAGEA | Calculates the average for the cells evaluating TRUE as 1 text and FALSE as 0. -COUNT | Counts the cells that contain numeric values in a range. -COUNTIF | Counts the cells based on the specified condition. -COUNTIFS | Counts the cells based on specified conditions. -COUNTA | Counts the cells that contain values in a range. -MIN | Returns the smallest number of the given arguments. -MAX | Returns the largest number of the given arguments. -DATE | Returns the date based on the given year, month, and day. -DAY | Returns the day from the given date. -DAYS | Returns the number of days between two dates. -IF | Returns value based on the given expression. -IFS | Returns value based on the given multiple expressions. -AND | Returns TRUE if all the arguments are TRUE otherwise returns FALSE. -OR | Returns TRUE if any of the arguments are TRUE otherwise returns FALSE. -IFERROR | Returns value if no error found else it will return specified value. -CHOOSE | Returns a value from the list of values based on the index number. -INDEX | Returns the value of the cell in a given range based on row and column number. -FIND | Returns the position of a string within another string which is case sensitive. -CONCATENATE | Combines two or more strings together. -CONCAT | Concatenates a list or a range of text strings. -SUBTOTAL | Returns subtotal for a range using the given function number. -RADIANS | Converts degrees into radians. -MATCH | Returns the relative position of a specified value in the given range. -DefineNameExists | This name already exists try a different name. -CircularReference | When a formula refers to one or more circular references this may result in an incorrect calculation. -ShowRowsWhere | Show rows where | -CustomFilterDatePlaceHolder | Choose a date -CustomFilterPlaceHolder | Enter the value -CustomFilter | Custom Filter -Between | Between -MatchCase | Match Case -DateTimeFilter | DateTime Filters -Undo | Undo -Redo | Redo -DateFilter | Date Filters -TextFilter | Text Filters -NumberFilter | Number Filters -ClearFilter | Clear Filter -NoResult | No Matches Found -FilterFalse | False -FilterTrue | True -Blanks | Blanks -SelectAll | Select All -GreaterThanOrEqual | Greater Than Or Equal -GreaterThan | Greater Than -LessThanOrEqual | Less Than Or Equal -LessThan | Less Than -NotEqual | Not Equal -Equal | Equal -Contains | Contains -EndsWith | Ends With -StartsWith | Starts With -ClearButton | Clear -FilterButton | Filter -CancelButton | Cancel -OKButton | OK -Search | Search -Link | Link -Hyperlink | Hyperlink -EditHyperlink | Edit Hyperlink -OpenHyperlink | Open Hyperlink -RemoveHyperlink | Remove Hyperlink -InsertLink | Insert Link -EditLink | Edit Link -WebPage | WEB PAGE -ThisDocument | THIS DOCUMENT -DisplayText | Display Text -Url | URL -CellReference | Cell Reference -Sheet | Sheet -DefinedNames | Defined Names -EnterTheTextToDisplay | Enter the text to display -EnterTheUrl | Enter the URL -ProtectSheet | Protect Sheet -UnprotectSheet | Unprotect Sheet -SelectCells | Select cells -FormatCells | Format cells -FormatRows | Format rows -Format Columns | Format columns -InsertLinks | Insert links -ProtectContent | Protect the contents of locked cells -ProtectAllowUser | Allow all users of this worksheet to | -EditAlert | The cell you're trying to change is protected. To make a change, unprotect the sheet. -FindReplaceTooltip | Find & Replace -InsertingEmptyValue | Reference value is not valid. -ByRow | By Row -ByColumn | By Column -MatchExactCellElements | Match Exact Cell Contents -EntercellAddress | Enter Cell Address -FindAndReplace | Find and Replace -ReplaceAllEnd | matches replaced with. -FindNextBtn | Find Next -FindPreviousBtn | Find Previous -ReplaceBtn | Replace -ReplaceAllBtn | Replace All -GotoHeader | Go To -GotoSpecialHeader | Go To Special -SearchWithin | Search within -SearchBy | Search by -Reference | Reference -Workbook | Workbook -NoElements | We couldn’t find what you were looking for. -FindWhat | Find what -ReplaceWith | Replace with -EnterValue | Enter Value -DefineNameInValid | The name that you entered is not valid. -FindValue | Find Value -ReplaceValue | Replace Value -DataValidation | Data Validation -CLEARALL | CLEAR ALL -APPLY | APPLY -CellRange | Cell Range -Allow | Allow -Data | Data -Minimum | Minimum -Maximum | Maximum -IgnoreBlank | Ignore blank -WholeNumber | Whole Number -Decimal | Decimal -Date | Date -TextLength | Text Length -List | List -NotBetween | Not between -EqualTo | Equal to -NotEqualTo | Not equal to -Greaterthan | Greater than -Lessthan | Less than -GreaterThanOrEqaulTo | Greater than or eqaul to -LessThanOrEqualTo | Less than or equal to -InCellDropDown | In-cell-dropdown -Sources | Sources -Value | Value -Retry | Retry -DialogError | The list source must be a reference to a single row or column. -ValidationError | This value doesn't match the data validation restrictions defined for the cell. -HideRow | Hide Row -HideRows | Hide Rows -UnHideRows | UnHide Rows -HideColumn | Hide Column -HideColumns | Hide Columns -UnHideColumns | UnHide Columns -InsertRow | Insert Row -InsertRows | Insert Rows -InsertColumn | Insert Column -InsertColumns | Insert Columns -DeleteRow | Delete Row -DeleteRows | Delete Rows -DeleteColumn | Delete Column -DeleteColumns | Delete Columns -Borders | Borders -TopBorders | Top Borders -LeftBorders | Left Borders -RightBorders | Right Borders -BottomBorders | Bottom Borders -AllBorders | All Borders -HorizontalBorders | Horizontal Borders -VerticalBorders | Vertical Borders -OutsideBorders | Outside Borders -InsideBorders | Inside Borders -NoBorders | No Borders -BorderColor | Border Color -BorderStyle | Border Style -INTERCEPT | Calculates the point of the Y-intercept line via linear regression. -SLOPE | Returns the slope of the line from linear regression of the data points. -FreezePanes | Freeze Panes -FreezeRows | Freeze Rows -FreezeColumns | Freeze Columns -UnfreezePanes | Unfreeze Panes -UnfreezeRows | Unfreeze Rows -UnfreezeColumns | Unfreeze Columns -MergeCells | Merge Cells -MergeAll | Merge All -MergeHorizontally | Merge Horizontally -MergeVertically | Merge Vertically -Unmerge | Unmerge -UnmergeCells | Unmerge Cells -SortAscending | Ascending -SortDescending | Descending -CustomSort | Custom Sort -ClearAllFilter | Clear -ReapplyFilter | Reapply -Clear | Clear -ClearContents | Clear Contents -ClearAll | Clear All -ClearFormats | Clear Formats -ClearHyperlinks | Clear Hyperlinks -Image | Image -AddColumn | Add Column -SortBy | Sort by -ThenBy | Then by -Chart | Chart -Column | Column -Bar | Bar -Area | Area -Pie | Pie -Doughnut | Doughnut -PieAndDoughnut | Pie/Doughnut -Line | Line -Radar | Radar -Scatter | Scatter -ChartDesign | Chart Design -ClusteredColumn | Clustered Column -StackedColumn | Stacked Column -StackedColumn100 | 100% Stacked Column -ClusteredBar | Clustered Bar -StackedBar | Stacked Bar -StackedBar100 | 100% Stacked Bar -StackedArea | Stacked Area -StackedArea100 | 100% Stacked Area -StackedLine | Stacked Line -StackedLine100 | 100% Stacked Line -AddChartElement | Add Chart Element -Axes | Axes -AxisTitle | Axis Title -ChartTitle | Chart Title -DataLabels | Data Labels -Gridlines | Gridlines -Legends | Legends -PrimaryHorizontal | Primary Horizontal -PrimaryVertical | Primary Vertical -None | None -AboveChart | Above Chart -Center | Center -InsideEnd | Inside End -InsideBase | Inside Base -OutsideEnd | OutSide End -PrimaryMajorHorizontal | Primary Major Horizontal -PrimaryMajorVertical | Primary Major Vertical -PrimaryMinorHorizontal | Primary Minor Horizontal -PrimaryMinorVertical | Primary Minor Vertical -Right | Right -Left | Left -Bottom | Bottom -Top | Top -SwitchRowColumn | Switch Row/Column -ChartTheme | Chart Theme -ChartType | Chart Type -Material | Material -Fabric | Fabric -Bootstrap | Bootstrap -HighContrastLight | HighContrastLight -MaterialDark | MaterialDark -FabricDark | FabricDark -HighContrast | HighContrast -BootstrapDark | BootstrapDark -Bootstrap4 | Bootstrap4 -VerticalAxisTitle | Vertical Axis Title -HorizontalAxisTitle | Horizontal Axis Title -EnterTitle | Enter Title -ProtectWorkbook | Protect Workbook -Password | Password (optional) | -unProtectPassword | Password -EnterThePassword | Enter the password -ConfirmPassword | Confirm Password -EnterTheConfirmPassword | Re-enter your password -PasswordAlert | Confirmation password is not identical -UnProtectWorkbook | Unprotect Workbook -UnProtectPasswordAlert | The password you supplied is not correct. -InCorrectPassword | Unable to open the file or worksheet with the given password. -PasswordAlertMsg | Please enter the password -ConfirmPasswordAlertMsg | Please enter the confirm password -IsProtected | is protected +`Cut` | Cut +`Copy` | Copy +`Paste` | Paste +`PasteSpecial` | Paste Special +`All` | All +`Values` | Values +`Formats` | Formats +`Font` | Font +`FontSize` | Font Size +`Bold` | Bold +`Italic` | Italic +`Underline` | Underline +`Strikethrough` | Strikethrough +`TextColor` | Text Color +`FillColor` | Fill Color +`HorizontalAlignment` | Horizontal Alignment +`AlignLeft` | Align Left +`AlignCenter` | Center +`AlignRight` | Align Right +`VerticalAlignment` | Vertical Alignment +`AlignTop` | Align Top +`AlignMiddle` | Align Middle +`AlignBottom` | Align Bottom +`InsertFunction` | Insert Function +`Insert` | Insert +`Delete` | Delete +`Rename` | Rename +`Hide` | Hide +`Unhide` | Unhide +`NameBox` | Name Box +`ShowHeaders` | Show Headers +`HideHeaders` | Hide Headers +`ShowGridLines` | Show Gridlines +`HideGridLines` | Hide Gridlines +`AddSheet` | Add Sheet +`ListAllSheets` | List All Sheets +`FullScreen` | Full Screen +`CollapseToolbar` | Collapse Toolbar +`ExpandToolbar` | Expand Toolbar +`CollapseFormulaBar` | Collapse Formula Bar +`ExpandFormulaBar` | Expand Formula Bar +`File` | File +`Home` | Home +`Formulas` | Formulas +`View` | View +`New` | New +`Open` | Open +`SaveAs` | Save As +`ExcelXlsx` | Microsoft Excel +`ExcelXls` | Microsoft Excel 97-2003 +`CSV` | Comma-separated values +`FormulaBar` | Formula Bar +`Ok` | Ok +`Close` | Close +`Cancel` | Cancel +`Apply` | Apply +`MoreColors` | More Colors +`StandardColors` | Standard Colors +`General` | General +`Number` | Number +`Currency` | Currency +`Accounting` | Accounting +`ShortDate` | Short Date +`LongDate` | Long Date +`Time` | Time +`Percentage` | Percentage +`Fraction` | Fraction +`Scientific` | Scientific +`Text` | Text +`NumberFormat` | Number Format +`MobileFormulaBarPlaceHolder` | Enter value or Formula +`PasteAlert` | You can't paste it here because the copy area and paste area aren't in the same size. Please try pasting in a different range. +`DestroyAlert` | Are you sure you want to destroy the current workbook without saving and create a new workbook? +`SheetRenameInvalidAlert` | Sheet name contains invalid character. +`SheetRenameEmptyAlert` | Sheet name cannot be empty. +`SheetRenameAlreadyExistsAlert` | Sheet name already exists. Please enter another name. +`DeleteSheetAlert` | Are you sure you want to delete this sheet? +`DeleteSingleLastSheetAlert` | A Workbook must contain at least one visible worksheet. +`PickACategory` | Pick a category +`Description` | Description +`UnsupportedFile` | Unsupported File +`InvalidUrl` | Invalid Url +`SUM` | Adds a series of numbers and/or cells. +`SUMIF` | Adds the cells based on the specified condition. +`SUMIFS` | Adds the cells based on the specified conditions. +`ABS` | Returns the value of a number without its sign. +`RAND` | Returns a random number between 0 and 1. +`RANDBETWEEN` | Returns a random integer based on the specified values. +`FLOOR` | Rounds a number down to the nearest multiple of a given factor. +`CEILING` | Rounds a number up to the nearest multiple of a given factor. +`PRODUCT` | Multiplies a series of numbers and/or cells. +`AVERAGE` | Calculates average for the series of numbers and/or cells excluding text. +`AVERAGEIF` | Calculates average for the cells based on the specified criterion. +`AVERAGEIFS` | Calculates average for the cells based on the specified conditions. +`AVERAGEA` | Calculates the average for the cells evaluating TRUE as 1 text and FALSE as 0. +`COUNT` | Counts the cells that contain numeric values in a range. +`COUNTIF` | Counts the cells based on the specified condition. +`COUNTIFS` | Counts the cells based on specified conditions. +`COUNTA` | Counts the cells that contain values in a range. +`MIN` | Returns the smallest number of the given arguments. +`MAX` | Returns the largest number of the given arguments. +`DATE` | Returns the date based on the given year, month, and day. +`DAY` | Returns the day from the given date. +`DAYS` | Returns the number of days between two dates. +`IF` | Returns value based on the given expression. +`IFS` | Returns value based on the given multiple expressions. +`AND` | Returns TRUE if all the arguments are TRUE otherwise returns FALSE. +`OR` | Returns TRUE if any of the arguments are TRUE otherwise returns FALSE. +`IFERROR` | Returns value if no error found else it will return specified value. +`CHOOSE` | Returns a value from the list of values based on the index number. +`INDEX` | Returns the value of the cell in a given range based on row and column number. +`FIND` | Returns the position of a string within another string which is case sensitive. +`CONCATENATE` | Combines two or more strings together. +`CONCAT` | Concatenates a list or a range of text strings. +`SUBTOTAL` | Returns subtotal for a range using the given function number. +`RADIANS` | Converts degrees into radians. +`MATCH` | Returns the relative position of a specified value in the given range. +`DefineNameExists` | This name already exists try a different name. +`CircularReference` | When a formula refers to one or more circular references this may result in an incorrect calculation. +`ShowRowsWhere` | Show rows where | +`CustomFilterDatePlaceHolder` | Choose a date +`CustomFilterPlaceHolder` | Enter the value +`CustomFilter` | Custom Filter +`Between` | Between +`MatchCase` | Match Case +`DateTimeFilter` | DateTime Filters +`Undo` | Undo +`Redo` | Redo +`DateFilter` | Date Filters +`TextFilter` | Text Filters +`NumberFilter` | Number Filters +`ClearFilter` | Clear Filter +`NoResult` | No Matches Found +`FilterFalse` | False +`FilterTrue` | True +`Blanks` | Blanks +`SelectAll` | Select All +`GreaterThanOrEqual` | Greater Than Or Equal +`GreaterThan` | Greater Than +`LessThanOrEqual` | Less Than Or Equal +`LessThan` | Less Than +`NotEqual` | Not Equal +`Equal` | Equal +`Contains` | Contains +`EndsWith` | Ends With +`StartsWith` | Starts With +`ClearButton` | Clear +`FilterButton` | Filter +`CancelButton` | Cancel +`OKButton` | OK +`Search` | Search +`Link` | Link +`Hyperlink` | Hyperlink +`EditHyperlink` | Edit Hyperlink +`OpenHyperlink` | Open Hyperlink +`RemoveHyperlink` | Remove Hyperlink +`InsertLink` | Insert Link +`EditLink` | Edit Link +`WebPage` | WEB PAGE +`ThisDocument` | THIS DOCUMENT +`DisplayText` | Display Text +`Url` | URL +`CellReference` | Cell Reference +`Sheet` | Sheet +`DefinedNames` | Defined Names +`EnterTheTextToDisplay` | Enter the text to display +`EnterTheUrl` | Enter the URL +`ProtectSheet` | Protect Sheet +`UnprotectSheet` | Unprotect Sheet +`SelectCells` | Select cells +`FormatCells` | Format cells +`FormatRows` | Format rows +`Format` Columns | Format columns +`InsertLinks` | Insert links +`ProtectContent` | Protect the contents of locked cells +`ProtectAllowUser` | Allow all users of this worksheet to | +`EditAlert` | The cell you're trying to change is protected. To make a change, unprotect the sheet. +`FindReplaceTooltip` | Find & Replace +`InsertingEmptyValue` | Reference value is not valid. +`ByRow` | By Row +`ByColumn` | By Column +`MatchExactCellElements` | Match Exact Cell Contents +`EntercellAddress` | Enter Cell Address +`FindAndReplace` | Find and Replace +`ReplaceAllEnd` | matches replaced with. +`FindNextBtn` | Find Next +`FindPreviousBtn` | Find Previous +`ReplaceBtn` | Replace +`ReplaceAllBtn` | Replace All +`GotoHeader` | Go To +`GotoSpecialHeader` | Go To Special +`SearchWithin` | Search within +`SearchBy` | Search by +`Reference` | Reference +`Workbook` | Workbook +`NoElements` | We couldn’t find what you were looking for. +`FindWhat` | Find what +`ReplaceWith` | Replace with +`EnterValue` | Enter Value +`DefineNameInValid` | The name that you entered is not valid. +`FindValue` | Find Value +`ReplaceValue` | Replace Value +`DataValidation` | Data Validation +`CLEARALL` | CLEAR ALL +`APPLY` | APPLY +`CellRange` | Cell Range +`Allow` | Allow +`Data` | Data +`Minimum` | Minimum +`Maximum` | Maximum +`IgnoreBlank` | Ignore blank +`WholeNumber` | Whole Number +`Decimal` | Decimal +`Date` | Date +`TextLength` | Text Length +`List` | List +`NotBetween` | Not between +`EqualTo` | Equal to +`NotEqualTo` | Not equal to +`Greaterthan` | Greater than +`Lessthan` | Less than +`GreaterThanOrEqaulTo` | Greater than or eqaul to +`LessThanOrEqualTo` | Less than or equal to +`InCellDropDown` | In-cell-dropdown +`Sources` | Sources +`Value` | Value +`Retry` | Retry +`DialogError` | The list source must be a reference to a single row or column. +`ValidationError` | This value doesn't match the data validation restrictions defined for the cell. +`HideRow` | Hide Row +`HideRows` | Hide Rows +`UnHideRows` | UnHide Rows +`HideColumn` | Hide Column +`HideColumns` | Hide Columns +`UnHideColumns` | UnHide Columns +`InsertRow` | Insert Row +`InsertRows` | Insert Rows +`InsertColumn` | Insert Column +`InsertColumns` | Insert Columns +`DeleteRow` | Delete Row +`DeleteRows` | Delete Rows +`DeleteColumn` | Delete Column +`DeleteColumns` | Delete Columns +`Borders` | Borders +`TopBorders` | Top Borders +`LeftBorders` | Left Borders +`RightBorders` | Right Borders +`BottomBorders` | Bottom Borders +`AllBorders` | All Borders +`HorizontalBorders` | Horizontal Borders +`VerticalBorders` | Vertical Borders +`OutsideBorders` | Outside Borders +`InsideBorders` | Inside Borders +`NoBorders` | No Borders +`BorderColor` | Border Color +`BorderStyle` | Border Style +`INTERCEPT` | Calculates the point of the Y-intercept line via linear regression. +`SLOPE` | Returns the slope of the line from linear regression of the data points. +`FreezePanes` | Freeze Panes +`FreezeRows` | Freeze Rows +`FreezeColumns` | Freeze Columns +`UnfreezePanes` | Unfreeze Panes +`UnfreezeRows` | Unfreeze Rows +`UnfreezeColumns` | Unfreeze Columns +`MergeCells` | Merge Cells +`MergeAll` | Merge All +`MergeHorizontally` | Merge Horizontally +`MergeVertically` | Merge Vertically +`Unmerge` | Unmerge +`UnmergeCells` | Unmerge Cells +`SortAscending` | Ascending +`SortDescending` | Descending +`CustomSort` | Custom Sort +`ClearAllFilter` | Clear +`ReapplyFilter` | Reapply +`Clear` | Clear +`ClearContents` | Clear Contents +`ClearAll` | Clear All +`ClearFormats` | Clear Formats +`ClearHyperlinks` | Clear Hyperlinks +`Image` | Image +`AddColumn` | Add Column +`SortBy` | Sort by +`ThenBy` | Then by +`Chart` | Chart +`Column` | Column +`Bar` | Bar +`Area` | Area +`Pie` | Pie +`Doughnut` | Doughnut +`PieAndDoughnut` | Pie/Doughnut +`Line` | Line +`Radar` | Radar +`Scatter` | Scatter +`ChartDesign` | Chart Design +`ClusteredColumn` | Clustered Column +`StackedColumn` | Stacked Column +`StackedColumn100` | 100% Stacked Column +`ClusteredBar` | Clustered Bar +`StackedBar` | Stacked Bar +`StackedBar100` | 100% Stacked Bar +`StackedArea` | Stacked Area +`StackedArea100` | 100% Stacked Area +`StackedLine` | Stacked Line +`StackedLine100` | 100% Stacked Line +`AddChartElement` | Add Chart Element +`Axes` | Axes +`AxisTitle` | Axis Title +`ChartTitle` | Chart Title +`DataLabels` | Data Labels +`Gridlines` | Gridlines +`Legends` | Legends +`PrimaryHorizontal` | Primary Horizontal +`PrimaryVertical` | Primary Vertical +`None` | None +`AboveChart` | Above Chart +`Center` | Center +`InsideEnd` | Inside End +`InsideBase` | Inside Base +`OutsideEnd` | OutSide End +`PrimaryMajorHorizontal` | Primary Major Horizontal +`PrimaryMajorVertical` | Primary Major Vertical +`PrimaryMinorHorizontal` | Primary Minor Horizontal +`PrimaryMinorVertical` | Primary Minor Vertical +`Right` | Right +`Left` | Left +`Bottom` | Bottom +`Top` | Top +`SwitchRowColumn` | Switch Row/Column +`ChartTheme` | Chart Theme +`ChartType` | Chart Type +`Material` | Material +`Fabric` | Fabric +`Bootstrap` | Bootstrap +`HighContrastLight` | HighContrastLight +`MaterialDark` | MaterialDark +`FabricDark` | FabricDark +`HighContrast` | HighContrast +`BootstrapDark` | BootstrapDark +`Bootstrap4` | Bootstrap4 +`VerticalAxisTitle` | Vertical Axis Title +`HorizontalAxisTitle` | Horizontal Axis Title +`EnterTitle` | Enter Title +`ProtectWorkbook` | Protect Workbook +`Password` | Password (optional) | +`unProtectPassword` | Password +`EnterThePassword` | Enter the password +`ConfirmPassword` | Confirm Password +`EnterTheConfirmPassword` | Re-enter your password +`PasswordAlert` | Confirmation password is not identical +`UnProtectWorkbook` | Unprotect Workbook +`UnProtectPasswordAlert` | The password you supplied is not correct. +`InCorrectPassword` | Unable to open the file or worksheet with the given password. +`PasswordAlertMsg` | Please enter the password +`ConfirmPasswordAlertMsg` | Please enter the confirm password +`IsProtected` | is protected ### Loading translations @@ -501,7 +501,7 @@ Internationalization [`sample link`](https://stackblitz.com/edit/react-5rhnwd-uj ## Right to left (RTL) -RTL provides an option to switch the text direction and layout of the Spreadsheet component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Spreadsheet, set the [`enableRtl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enablertl) to true. +RTL provides an option to switch the text direction and layout of the Spreadsheet component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Spreadsheet, set the [`enableRtl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#enablertl) to true. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md new file mode 100644 index 0000000000..3b2123440f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md @@ -0,0 +1,88 @@ +--- +layout: post +title: Integrating Spreadsheet into existing React layouts | Syncfusion +description: Guidance on embedding the Spreadsheet into react layouts using the Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Integrating Spreadsheet into Existing React Layouts + +## Overview + +The React Spreadsheet component can be embedded into dashboards, admin panels, split‑screen views, tabs, dialogs, collapsible/accordion sections, sidebars, and multi‑column layouts. This guide provides concise layout patterns and minimal code examples to ensure the Spreadsheet renders correctly, resizes properly, and refreshes when hosted inside common layout containers. + +## How‑To + +### Use Spreadsheet inside Tab components + +The React Spreadsheet component is fully supported within [Syncfusion Tab component](https://ej2.syncfusion.com/react/documentation/api/tab/index-default). You can safely place and render the Spreadsheet inside a Tab item. + +The following sample shows how to render the Spreadsheet inside the Tab component. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1" %} + +### Use spreadsheet inside Dialog + +If the Spreadsheet is placed inside a dialog (for example, a Syncfusion Dialog), render or initialize the Spreadsheet only within the dialog’s open event. The parent container must be visible in the DOM for the Spreadsheet to correctly measure and compute its layout. + +And if the Spreadsheet is rendered while the dialog container is hidden and the container is made visible later, the Spreadsheet's layout may not calculated properly. In such cases, invoke the [resize](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#resize) method in the dialog's open event to re-render the Spreadsheet layout based on the currently visible parent container. + +The following sample shows how to render Spreadsheet inside the Dialog component. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2" %} + +### Use Spreadsheet inside collapsible sections + +When placing the Spreadsheet inside an accordion or any collapsible container (for example, within an AccordionItem), it is important to ensure that the Spreadsheet is rendered only when the corresponding section is visible. The Spreadsheet relies on the visibility of its parent container in the DOM to accurately measure dimensions and compute its layout. + +If the accordion item is initialized while it is in a collapsed (hidden) state, the Spreadsheet will not be able to calculate its layout correctly, which may result where the Spreadsheet will not be displayed fully. To avoid this, you can either: + +- Render or initialize the Spreadsheet only when the accordion item becomes active (expanded), or +- If the Spreadsheet must be rendered while the accordion item is hidden, explicitly trigger a Spreadsheet's [resize](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#resize) method in the accordion's expanded event to re-render the Spreadsheet layout based on the current parent container. + +The following sample shows how to render the Spreadsheet inside the Accordion. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3" %} + +> **Note**: Mount the Spreadsheet component only when the corresponding pane becomes visible. If the Spreadsheet must be mounted while hidden, call its [resize](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#resize) method after the pane is shown so that the layout is recalculated correctly. + +## When to use these patterns + +- Use Dialogs for temporary or isolated spreadsheet previews. +- Use Tabs/Accordion patterns for multi-pane UIs — ensure a resize is triggered when a pane becomes active. +- Avoid placing the Spreadsheet in invisible containers without a resize strategy; otherwise the Spreadsheet layout will not calculated correctly. + +## See also + +- [Overview of Syncfusion React Tab component](https://ej2.syncfusion.com/react/documentation/tab/getting-started) +- [Overview of Syncfusion React Dialog component](https://ej2.syncfusion.com/react/documentation/dialog/getting-started) +- [Overview of Syncfusion React Accordion component](https://ej2.syncfusion.com/react/documentation/accordion/getting-started) diff --git a/Document-Processing/Excel/Spreadsheet/React/illustrations.md b/Document-Processing/Excel/Spreadsheet/React/illustrations.md index 9af8640aff..e5d75e4694 100644 --- a/Document-Processing/Excel/Spreadsheet/React/illustrations.md +++ b/Document-Processing/Excel/Spreadsheet/React/illustrations.md @@ -9,7 +9,7 @@ documentation: ug # Illustrations in React Spreadsheet component -Illustrations help you to insert an image, shapes, and graphic objects in the Essential® JS 2 spreadsheet. +Illustrations allow you to insert images, shapes, and graphic objects into the Essential® JS 2 Spreadsheet. This feature helps to enhance the visual presentation of your worksheet by embedding graphical elements alongside your data. ## Image @@ -19,12 +19,12 @@ Adding images to a spreadsheet can enhance the visual appeal and help to convey ### Insert Image -You can insert the image by using one of the following ways, +You can insert an image by using one of the following ways: -* Selecting the Insert tab in the Ribbon toolbar, and then choose the Image tab. -* Use the `insertImage()` method programmatically. +* Select the **Insert** tab in the Ribbon toolbar, and then choose the **Image** option. +* Use the `insertImage` method programmatically. -The available parameters in `insertImage()` method are, +The available parameters in the `insertImage` method are, | Parameter | Type | Description | |-----|------|----| @@ -33,21 +33,22 @@ The available parameters in `insertImage()` method are, The available arguments in `ImageModel` are: -* src: Specifies the image source. -* id: Specifies the image element id. -* height: Specifies the height of the image. -* width: Specifies the width of the image. -* top: Specifies the top position of the image. -* left: Specifies the left side of the image. - ->* In a spreadsheet, you can add many types of image files, including IMAGE, JPG, PNG, GIF, and JPEG files. +| Property | Description | +|----------|-------------| +| [src](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#src) | Specifies the image source. | +| [id](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#id) | Specifies the image element id. | +| [height](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#height) | Specifies the height of the image. | +| [width](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#width) | Specifies the width of the image. | +| [top](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#top) | Specifies the top position of the image. | +| [left](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#left) | Specifies the left side of the image. | +>* In a spreadsheet, you can add many types of image files, including IMAGE, JPG, PNG, GIF, and JPEG formats. ### Delete Image -* If you want to delete the image, just select the image, and then press the Delete key. -* Use the `deleteImage()` method programmatically. +* To delete an image, select the image and press the **Delete** key. +* You can also use the `deleteImage` method programmatically. -The available parameters in `deleteImage()` method are, +The available parameters in the `deleteImage` method are: | Parameter | Type | Description | |-----|------|----| @@ -56,17 +57,17 @@ The available parameters in `deleteImage()` method are, ### Image Customization -Image feature allows you to view and insert an image in a spreadsheet, and you can change the height and width of the image by resizing and moving it to another position. +The image feature allows you to view and insert an image in a spreadsheet. You can customize the image by resizing it to change the height and width, and by moving it to another position within the worksheet. #### Height and Width * You can change the height and width of the image by resizing. -* Use the `height` and `width` property in the `insertImage()` method programmatically. +* Use the `height` and `width` property in the `insertImage` method programmatically. #### Top and Left * You can change the position of the image by drag and drop. -* Use the `top` and `left` property in the `insertImage()` method programmatically. +* Use the `top` and `left` property in the `insertImage` method programmatically. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -94,9 +95,9 @@ The following features have some limitations in Image: ## Chart -A chart is a graphical representation of data, that organizes and represents a set of numerical or qualitative data. It mostly displays the selected range of data in terms of `x`-axis and `y`-axis. You can use the [`allowChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowchart) property to enable or disable the chart functionality. +A chart is a graphical representation of data, that organizes and represents a set of numerical or qualitative data. It mostly displays the selected range of data in terms of `x`-axis and `y`-axis. You can use the [`allowChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowchart) property to enable or disable the chart functionality. ->* The default value for the [`allowChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowchart) property is `true`. +>* The default value for the [`allowChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowchart) property is `true`. ### Types of chart @@ -111,12 +112,12 @@ The following types of charts are available in the Spreadsheet. ### Insert Chart -You can insert the chart by using one of the following ways, +You can insert a chart by using one of the following ways, -* Select the chart icon in the Ribbon toolbar under the Insert Tab. -* Use the [`insertChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertchart) method programmatically. +* Select the chart icon in the Ribbon toolbar under the **Insert** tab. +* Use the [`insertChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertchart) method programmatically. -The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertchart) method is, +The available parameter in the [`insertChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertchart) method is, | Parameter | Type | Description | |-----|------|----| @@ -124,12 +125,21 @@ The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/reac The available arguments in the `ChartModel` are: -* type: Specifies the type of chart. -* theme: Specifies the theme of a chart. -* isSeriesInRows: Specifies to switch the row or a column. -* range: Specifies the selected range or specified range. -* id: Specifies the chart element id. -* markerSettings: Specifies the marker settings. The marker is used to provide information about the data points in the series and is currently only applicable to the line chart. +| Property | Type | Description | +|----------|------|-------------| +| [id](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#id) | `string` | Specifies the chart element id. | +| [type](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#type) | `ChartType` | Specifies the type of chart. | +| [theme](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#theme) | `ChartTheme` | Specifies the theme of the chart. | +| [range](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#range) | `string` | Specifies the selected or specified data range for the chart. | +| [isSeriesInRows](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#isseriesinrows) | `boolean` | Specifies whether series are organized in rows (true) or columns (false). | +| [title](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#title) | `string` | Specifies the title of the chart. | +| [width](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#width) | `number` | Specifies the width of the chart. | +| [height](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#height) | `number` | Specifies the height of the chart. | +| [dataLabelSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#datalabelsettings) | `DataLabelSettingsModel` | Specifies the data label settings for the series. | +| [markerSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#markersettings) | `MarkerSettingsModel` | Specifies the marker settings for the series (applicable to line charts). | +| [legendSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#legendsettings) | `LegendSettingsModel` | Specifies options for customizing the chart legend. | +| [primaryXAxis](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#primaryxaxis) | `AxisModel` | Specifies options to configure the horizontal axis. | +| [primaryYAxis](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#primaryyaxis) | `AxisModel` | Specifies options to configure the vertical axis. | {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -150,10 +160,10 @@ The available arguments in the `ChartModel` are: ### Delete Chart -* If you want to delete the chart, just select the chart, and then press the Delete key. -* Use the [`deleteChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#deletechart) method programmatically. +* To delete a chart, simply select the chart and press the **Delete** key. +* You can also use the [`deleteChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#deletechart) method programmatically. -The available parameter in the [`deleteChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#deletechart) method is, +The available parameter in the [`deleteChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#deletechart) method is, | Parameter | Type | Description | |-----|------|----| @@ -161,11 +171,13 @@ The available parameter in the [`deleteChart()`](https://ej2.syncfusion.com/reac ### Chart Customization -Chart feature allows you to view and insert a chart in a spreadsheet, and you can change the height and width of the chart by resizing and moving it to another position. +The chart feature allows you to insert and manage charts in a spreadsheet with flexible customization options. You can adjust both the size and position of charts to better fit your worksheet layout: + +* **Resize** – Change the height and width of the chart by dragging its edges or corners. +* **Reposition** – Move the chart to a different location in the worksheet using drag-and-drop. -* You can change the height and width of the chart by resizing. +These customization options make it easy to organize charts alongside your data for clearer visualization and presentation. -* You can change the position of the chart by drag and drop. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -185,8 +197,14 @@ Chart feature allows you to view and insert a chart in a spreadsheet, and you ca {% previewsample "/document-processing/code-snippet/spreadsheet/react/chart-cs1" %} #### Customization of line chart markers +You can customize line chart markers to improve their appearance and readability. By using the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#actionbegin) event, you can modify properties such as: + +* **Shape** – Change the marker shape (e.g., circle, square, diamond). +* **Size** – Adjust the marker size for better visibility. +* **Fill Color** – Apply a custom fill color to highlight data points. +* **Border** – Customize the border style and color for distinction. -Using the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction. +In the following example, the marker appearance (shape and size) is modified while creating the line chart through UI interaction, demonstrating how flexible customization can enhance chart visualization. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md b/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md new file mode 100644 index 0000000000..9c2062a081 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md @@ -0,0 +1,201 @@ +--- +layout: post +title: Images and illustrations in React Spreadsheet component | Syncfusion +description: Learn here how to insert, position, resize, select, and delete images in the Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Images and Illustrations + +## Overview + +Syncfusion React Spreadsheet component allows you to insert images directly into worksheet cells to enhance visual presentation and provide additional context alongside data. Images such as logos, screenshots, diagrams, or illustrations can be placed within a sheet, positioned as needed, resized, selected, or removed. + +Images can be controlled using the [allowImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowimage) property, which is enabled by default. + +--- + +## How-To + +### Insert and position images + +In the Syncfusion React Spreadsheet component, images can be inserted into a worksheet and placed in a specific cell. The target cell determines where the image initially appears, and the image is rendered as an overlay on top of the grid. + +Images are inserted programmatically using the [insertImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertimage) method. This method allows you to define the image source along with its initial width and height, and specify the cell address where the image should be placed. + +Once an image is inserted, it can be repositioned by selecting and dragging it to another location within the worksheet. The image remains independent of cell values and does not interfere with data editing, sorting, or filtering operations. You can also insert multiple images at once by passing multiple image configurations to the method. + +The following code example shows how to insert an image in spreadsheet: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/insert-image-cs1" %} + +### Resize images + +After inserting an image into the spreadsheet, you can resize it to fit the layout or align it with surrounding content. + +**Resize via UI:** + +1. **Click the image** to select it (selection handles appear around it). +2. **Drag a middle edge handle** to resize horizontally or vertically. Click the image itself to move. +3. **Release** to apply the new size or position. + +**Resize programmatically:** + +The Spreadsheet provides the [setImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#setimage) method to update image properties, including width and height. Pass the image ID and the new dimensions to resize an image programmatically. + +### Select and deselect images + +You can select images in the spreadsheet either by clicking them in the UI or programmatically using methods. + +**Select an image via UI:** + +1. **Click the image** in the worksheet to select it +2. Resize handles and a selection border appear around the image + +**Select an image programmatically:** + +The [selectImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#selectimage) method allows you to programmatically select an image in the active sheet. Pass the image ID to select a specific image, or use the cell address where the image is located. + +**Deselect an image programmatically:** + +The [deselectImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deselectimage) method removes the current image selection. Call this method to deselect any selected image without specifying an image ID. + +Selected overlays receive the `.e-ss-overlay-active` class and show eight resize handles; selection can be controlled by `selectImage` (by id or address) and cleared with `deselectImage`. + +### Delete images + +Images added to a worksheet can be removed either through user interaction or programmatically. + +**Delete via UI:** + +To remove an image from the worksheet: + +1. **Click the image** to select it +2. **Press Delete** or **Backspace** to remove it immediately + +**Alternative UI method:** + +- **Select the image** and choose **Clear All** or **Clear Contents** from the ribbon to clear the selection and all embedded objects including the image + +**Delete programmatically:** + +The Spreadsheet component provides the [deleteImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deleteimage) method. This method removes an image based on its unique identifier and the cell address where it is placed. + +Pass the image ID to remove a specific image. This approach is useful when you track image IDs at insertion time and want to remove them later without relying on user selection. + +Calling `deleteImage()` removes the image from the runtime model and the DOM overlay. + +The following code example shows how to delete an image by ID in spreadsheet: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/delete-image-cs1" %} + +--- + +### Image Customization + +Image feature allows you to view and insert an image in a spreadsheet, and you can change the height and width of the image by resizing and moving it to another position. + +#### Height and Width + +* You can change the height and width of the image by resizing. +* Use the `height` and `width` property in the `insertImage()` method programmatically. + +#### Top and Left + +* You can change the position of the image by drag and drop. +* Use the `top` and `left` property in the `insertImage()` method programmatically. + +## API Reference + +### Methods + +#### insertImage() + +Inserts one or more images into the specified cell or range. + +**Syntax:** +```javascript +insertImage(images, range) +``` + +**Parameters:** +- `images` — Array of image objects. Each image object contains: `src`, `id`, `width`, `height`, `top`, `left`. +- `range` — Optional target cell address or range (for example, `'D3'`). If omitted, the active selection is used. + +**See:** [insertImage API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertimage) + +#### selectImage() +Selects an image in the active worksheet. + +**Syntax:** +```javascript +selectImage(imageId) +``` + +**Parameters:** +- `imageId` — The unique identifier of the image to select + +**See:** [selectImage API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#selectimage) + +#### deselectImage() +Removes selection from the currently selected image. + +**Syntax:** +```javascript +deselectImage() +``` + +**See:** [deselectImage API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deselectimage) + +#### deleteImage() +Removes an image from the worksheet by its ID and cell address. + +**Syntax:** +```javascript +deleteImage(imageId, address) +``` + +**Parameters:** +- `imageId` — The unique identifier of the image to delete +- `address` — The cell address where the image is located + +**See:** [deleteImage API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deleteimage) + +### Properties + +#### allowImage +Enables or disables image functionality in the Spreadsheet. + +**Type:** `boolean` +**Default:** `true` + +**See:** [allowImage API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowimage) + +## Limitations of Image + +* Corner resizing option is not available in the image element. + +## See Also +* [Charts](./charts-and-visualizations.md) +* [Formatting](./formatting) +* [Rows and columns](./rows-and-columns) diff --git a/Document-Processing/Excel/Spreadsheet/React/link.md b/Document-Processing/Excel/Spreadsheet/React/link.md index cc96406e78..636bff1440 100644 --- a/Document-Processing/Excel/Spreadsheet/React/link.md +++ b/Document-Processing/Excel/Spreadsheet/React/link.md @@ -6,10 +6,9 @@ control: Link platform: document-processing documentation: ug --- - # Link in React Spreadsheet component -Hyperlink is used to navigate to web links or cell reference within the sheet or to other sheets in Spreadsheet. You can use the [`allowHyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowhyperlink) property to enable or disable hyperlink functionality. +Hyperlink is used to navigate to web links or cell reference within the sheet or to other sheets in Spreadsheet. You can use the [`allowHyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowhyperlink) property to enable or disable hyperlink functionality. > * The default value for `allowHyperlink` property is `true`. @@ -20,32 +19,37 @@ You can insert a hyperlink in a worksheet cell for quick access to related infor **User Interface**: In the active spreadsheet, click the cell where you want to create a hyperlink. Insert hyperlink can be done by any of the following ways: -* Select the INSERT tab in the Ribbon toolbar and choose the `Link` item. -* Right-click the cell and then click Hyperlink item in the context menu, or you can press Ctrl+K. -* Use the [`addHyperlink()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addhyperlink) method programmatically. +* Select the **INSERT** tab in the Ribbon toolbar and choose the `Link` item. +* Right-click the cell and then click Hyperlink item in the context menu, or you can press `Ctrl + K`. +* Use the [`addHyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#addhyperlink) method programmatically. ## Edit Hyperlink -You can change an existing hyperlink in your workbook by changing its destination or the text that is used to represent it. +You can update an existing hyperlink in your workbook by changing either: + +* **Destination Link** – Modify the link target (web address, cell reference, or sheet). +* **Display Text** – Change the text shown in the cell that represents the hyperlink. + **User Interface**: In the active spreadsheet, Select the cell that contains the hyperlink that you want to change. Editing the hyperlink while opening the dialog can be done by any one of the following ways: -* Select the INSERT tab in the Ribbon toolbar and choose the `Link` item. +* Select the **INSERT** tab in the Ribbon toolbar and choose the `Link` item. * Right-click the cell and then click Edit Hyperlink item in the context menu, or you can press Ctrl+K. In the Edit Link dialog box, make the changes that you want, and click UPDATE. ## Remove Hyperlink -Performing this operation remove a single hyperlink without losing the display text. +You can remove a hyperlink from a cell without losing the display text. +This operation clears only the link itself, leaving the text in the cell unchanged. **User Interface**: In the active spreadsheet, click the cell where you want to remove a hyperlink. remove hyperlink can be done by any of the following ways: * Right-click the cell and then click Remove Hyperlink item in the context menu. -* Use the [`removeHyperlink()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#removehyperlink) method programmatically. +* Use the [`removeHyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#removehyperlink) method programmatically. ## How to change target attribute diff --git a/Document-Processing/Excel/Spreadsheet/React/notes.md b/Document-Processing/Excel/Spreadsheet/React/notes.md index 333ea55f9b..684864fe21 100644 --- a/Document-Processing/Excel/Spreadsheet/React/notes.md +++ b/Document-Processing/Excel/Spreadsheet/React/notes.md @@ -12,7 +12,8 @@ documentation: ug The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [enableNotes](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#enablenotes) property, which defaults to **true**. -When opening the Excel document with notes in the Spreadsheet, they will be displayed in the control. The cells containing notes will be indicated with a red colored triangle at the top-right corner. Hovering the mouse over these cells will display the content of the notes. +* When opening an Excel document with notes, they are displayed in the Spreadsheet control. +* Cells containing notes are marked with a small red triangle in the top-right corner. Hovering over these cells shows the note content. ![Adding, editing, and deleting a note in Spreadsheet](./images/spreadsheet_add_edit_delete_note.gif) @@ -64,31 +65,28 @@ You can remove notes from cells using the following ways: The note will be removed from the cell, and the red triangle indicator will be removed. -## Navigating between notes +## Navigating Between Notes The Syncfusion Spreadsheet provides intuitive navigation to quickly move between cells containing notes in your worksheet. These options are accessible through the **Notes** dropdown in the **Review** tab. ![Navigating between notes in Spreadsheet](./images/spreadsheet_next_previous_note.gif) ### Previous Note - To navigate to the previous note: - -* In the **Review** tab, open the **Notes** dropdown and select **Previous Note**. -* The Spreadsheet will automatically select the previous note in the current worksheet, searching leftward and then upward. -* If no prior note exists in the sheet, the search continues to the previous worksheet in order. -* If the workbook contains no notes, the selection remains on the current cell. +* Go to the **Review** tab, open the **Notes** dropdown, and select **Previous Note**. +* The Spreadsheet will highlight the previous note in the current worksheet, searching leftward and then upward. +* If no earlier note exists in the sheet, the search continues in the previous worksheet. +* If the workbook has no notes, the selection stays on the current cell. ### Next Note - To navigate to the next note: +* Go to the **Review** tab, open the **Notes** dropdown, and select **Next Note**. +* The Spreadsheet will highlight the next note in the current worksheet, searching rightward and then downward. +* If no later note exists in the sheet, the search continues in the next worksheet. +* If the workbook has no notes, the selection stays on the current cell. -* In the **Review** tab, open the **Notes** dropdown and select **Next Note**. -* The Spreadsheet will automatically select the next note in the current worksheet, searching rightward and then downward. -* If no subsequent note exists in the sheet, the search continues to the next worksheet in order. -* If the workbook contains no notes, the selection remains on the current cell. - -This functionality streamlines the process of reviewing notes across worksheets, ensuring efficient traversal and discovery. +This navigation feature streamlines reviewing by letting you jump directly between notes across worksheets. +It ensures efficient traversal, so you don’t miss any feedback or comments while working through your document. ## Show/Hide Note @@ -122,15 +120,28 @@ This functionality enhances workflow efficiency by providing flexible control ov ![Show/Hide notes in Spreadsheet](./images/spreadsheet_show_hide_note.gif) -## Saving the document with notes +## Saving the Document with Notes -The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as Microsoft Excel (.xlsx) and Microsoft Excel 97-2003 (.xls). +You can save and export Spreadsheet data along with notes into an Excel document. +To do this, go to **File > Save As** in the ribbon menu. -> When exporting the Spreadsheet to file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf), the notes will not be available. +Notes are preserved when exporting to: +* **Microsoft Excel (.xlsx)** +* **Microsoft Excel 97–2003 (.xls)** + +Notes are **not** included when exporting to: +* **Comma Separated Values (.csv)** +* **Excel Macro-Enabled Workbook (.xlsm)** +* **Excel Binary Workbook (.xlsb)** +* **PDF Document (.pdf)** ## Disabling notes -To disable the note functionality, you need to set the [enableNotes](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#enablenotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work. +To disable the note functionality, you need to set the [enableNotes](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#enablenotes) property to **false**. + +* Notes in the document will not be displayed when opened in the Spreadsheet when `enableNotes` set to `false`. +* The **Add Note** option will be removed from the context menu. +* Keyboard shortcuts related to notes will no longer work. ![Spreadsheet with notes feature disabled](./images/spreadsheet_notes_disable.png) @@ -147,9 +158,14 @@ In the below example, the note functionality is disabled in the Spreadsheet. {% previewsample "/document-processing/code-snippet/spreadsheet/react/note-cs2" %} -## Integrating notes during initial loading and using cell data binding +## Integrating Notes During Initial Loading and Using Cell Data Binding + +You can add notes to cells initially when the Spreadsheet loads by using **cell data binding**. +This is done through the `notes` property in the cell settings. -The notes can be added initially when the Spreadsheet loads using cell data binding. You need to use the `notes` property in the cell settings to add notes to the Spreadsheet. +* Define the `notes` property inside the cell configuration. +* When the Spreadsheet initializes, the notes will automatically appear in the specified cells. +* Each cell can have its own note content bound through the model. In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, display all notes at once using **Show All Notes** and see how notes are added using the `updateCell` method in the `created` event. diff --git a/Document-Processing/Excel/Spreadsheet/React/number-formatting.md b/Document-Processing/Excel/Spreadsheet/React/number-formatting.md new file mode 100644 index 0000000000..c45e266e10 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/number-formatting.md @@ -0,0 +1,169 @@ +--- +layout: post +title: Number Formatting in React Spreadsheet component | Syncfusion +description: Learn here all about Number formatting in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formatting +platform: document-processing +documentation: ug +--- + +# Number Formatting in React Spreadsheet component + +Number formatting defines the type of data displayed in the Spreadsheet. You can enable or disable the number formatting using the [`allowNumberFormatting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allownumberformatting) property. The Spreadsheet supports the following number formatting types: + +| Types | Format Code | Format ID | +|---------|---------|---------| +| General(default) | NA | 0 | +| Number | `0.00` | 2 | +| Currency | `$#,##0.00` | NA | +| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 | +| ShortDate | `m/d/yyyy` | 14 | +| LongDate | `dddd, mmmm dd, yyyy` | NA | +| Time | `h:mm:ss AM/PM` | NA | +| Percentage | `0.00%` | 10 | +| Fraction | `# ?/?` | 12 | +| Scientific |`0.00E+00` | 11 | +| Text | `@` | 49 | + +Number formatting can be applied in following ways, +* Using the [format](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#format) property in `cell`, you can set the desired format to each cell at initial load. +* Using the [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method, you can set the number format to a cell or range of cells. +* Selecting the number format option from ribbon toolbar. + +## Custom Number Formatting + +Spreadsheet supports custom number formats to display your data as numbers, dates, times, percentages, and currency values. If the pre-defined number formats do not meet your needs, you can set your own custom formats using custom number formats dialog or [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method. + +The different types of custom number format populated in the custom number format dialog are, + +| Type | Format Code | Format ID | +|-------|---------|---------| +| General(default) | NA | 0 | +| Number | `0` | 1 | +| Number | `0.00` | 2 | +| Number | `#,##0` | 3 | +| Number | `#,##0.00` | 4 | +| Number | `#,##0_);(#,##0)` | 37 | +| Number | `#,##0_);[Red](#,##0)` | 38 | +| Number | `#,##0.00_);(#,##0.00)` | 39 | +| Number | `#,##0.00_);[Red](#,##0.00)` | 40 | +| Currency | `$#,##0_);($#,##0)` | 5 | +| Currency | `$#,##0_);[Red]($#,##0)` | 6 | +| Currency | `$#,##0.00_);($#,##0.00)` | 7 | +| Currency | `$#,##0.00_);[Red]($#,##0.00)` | 8 | +| Percentage | `0%` | 9 | +| Percentage | `0.00%` | 10 | +| Scientific |`0.00E+00` | 11 | +| Scientific |`##0.0E+0` | 48 | +| Fraction | `# ?/?` | 12 | +| Fraction | `# ??/??` | 13 | +| ShortDate | `m/d/yyyy` | 14 | +| Custom | `d-mmm-yy` | 15 | +| Custom | `d-mmm` | 16 | +| Custom | `mmm-yy` | 17 | +| Custom | `h:mm AM/PM` | 18 | +| Custom | `h:mm:ss AM/PM` | 19 | +| Custom | `h:mm` | 20 | +| Custom | `h:mm:ss` | 21 | +| Custom | `m/d/yyyy h:mm` | 22 | +| Custom | `mm:ss` | 45 | +| Custom | `mm:ss.0` | 47 | +| Text | `@` | 49 | +| Custom | `[h]:mm:ss` | 46 | +| Accounting | `_($* #,##0_);_($* (#,##0);_($* "-"_);_(@_)` | 42 | +| Accounting | `_(* #,##0_);_(* (#,##0);_(* "-"_);_(@_)` | 41 | +| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | 44 | +| Accounting | `_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)` | 43 | + +Custom Number formatting can be applied in following ways, +* Using the [`numberFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#numberformat) method, you can set your own custom number format to a cell or range of cells. +* Selecting the custom number format option from custom number formats dialog or type your own format in dialog input and then click apply button. It will apply the custom format for selected cells. + +The following code example shows the number formatting in cell data. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/numberformat-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/numberformat-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "/document-processing/code-snippet/spreadsheet/react/numberformat-cs1" %} + +## Configure Culture-specific Custom format + +Earlier, the custom format dialog always showed formats using English settings (group separator, decimal separator, and currency symbol were not updated based on the applied culture). Starting from version **27.1.\***, the dialog now displays formats according to the applied culture. You can select a culture-based number format or enter your own format using the culture-specific decimal separator, group separator, and currency symbol. After that, click **Apply** to apply the culture-specific custom format to the selected cells. + +The Spreadsheet supports customizing formats in the dialog using the `configureLocalizedFormat` method. In this method, you pass a collection of default number format IDs along with their corresponding format codes. The dialog will then display the customized formats. You can refer to the [default number format IDs](https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.spreadsheet.numberingformat?view=openxml-2.8.1) from the Excel built-in number format reference. + +Compared to Excel, the date, time, currency, and accounting formats vary across different cultures. For example, when an Excel file with the date format `'m/d/yyyy'` is imported in the `en-US` culture, the spreadsheet displays the date in that format. However, when the same file is imported in the German culture, the date format changes to `'dd.MM.yyyy'`, which is the default for that region. The default number format ID for the date is 14. To customize the date format based on the culture, you should map the default number format ID to the appropriate culture-specific format code, like this: `{ id: 14, code: 'dd.MM.yyyy' }` in the `configureLocalizedFormat` method. + +> The format code should use the default decimal separator (.) and group separator (,). + +The code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German` culture. + +```js +import { configureLocalizedFormat } from '@syncfusion/ej2-react-spreadsheet'; + +const deLocaleFormats = [ + { id: 14, code: 'dd.MM.yyyy' }, + { id: 15, code: 'dd. MMM yy' }, + { id: 16, code: 'dd. MMM' }, + { id: 17, code: 'MMM yy' }, + { id: 20, code: 'hh:mm' }, + { id: 21, code: 'hh:mm:ss' }, + { id: 22, code: 'dd.MM.yyyy hh:mm' }, + { id: 37, code: '#,##0;-#,##0' }, + { id: 38, code: '#,##0;[Red]-#,##0' }, + { id: 39, code: '#,##0.00;-#,##0.00' }, + { id: 40, code: '#,##0.00;[Red]-#,##0.00' }, + { id: 5, code: '#,##0 "€";-#,##0 "€"' }, + { id: 6, code: '#,##0 "€";[Red]-#,##0 "€"' }, + { id: 7, code: '#,##0.00 "€";-#,##0.00 "€"' }, + { id: 8, code: '#,##0.00 "€";[Red]-#,##0.00 "€"' }, + { id: 41, code: '_-* #,##0_-;-* #,##0_-;_-* "-"_-;_-@_-' }, + { id: 42, code: '_-* #,##0 "€"_-;-* #,##0 "€"_-;_-* "-" "€"_-;_-@_-' }, + { id: 43, code: '_-* #,##0.00_-;-* #,##0.00_-;_-* "-"??_-;_-@_-' }, + { id: 44, code: '_-* #,##0.00 "€"_-;-* #,##0.00 "€"_-;_-* "-"?? "€"_-;_-@_-' } +]; + +// Mapping culture-based number formats for the "de" culture: The "spreadsheetRef.current" parameter is an instance of the spreadsheet component, and the "deLocaleFormats" parameter is an array containing format codes and their corresponding format IDs for the "de" culture. +configureLocalizedFormat(spreadsheetRef.current, deLocaleFormats); +``` + +The following code example demonstrates how to configure culture-based formats for different cultures in the spreadsheet. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/globalization-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/globalization-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/globalization-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/globalization-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/globalization-cs1" %} + +## Note + +You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to learn how to present and manipulate data. + +## See Also + +* [Text & Cell Formatting](./text-cell-formatting) +* [Conditional Formatting](./conditional-formatting) +* [Cell Range](./cell-range) diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index d07bb64302..75406fa5b3 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md @@ -9,11 +9,51 @@ documentation: ug # Open Excel Files in Syncfusion React Spreadsheet -The React Spreadsheet component uses a server‑assisted workflow to import Excel files accurately and efficiently. When a user uploads an Excel file, the component sends the file to the server for parsing, ensuring smooth performance because the heavy processing workload is handled on the server side. +The Syncfusion React Spreadsheet component uses a server-assisted workflow to open Excel files efficiently and accurately. When a user uploads an Excel file, the file is sent to a server endpoint for processing. This keeps the browser fast and responsive, as all heavy parsing and conversion are handled on the server. -On the server, the [`Syncfusion.EJ2.Spreadsheet library`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview), reads the Excel file and extracts all relevant details, including data, styles, formulas, formatting, and sheet structure. The server then converts this information into a Spreadsheet‑compatible JSON workbook. +On the server, the [`Syncfusion.EJ2.Spreadsheet`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) library is used to process the uploaded Excel file. This library is built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview), which itself is implemented using **.NET Frameworks**. The server extracts all data, styles, formulas, formatting, and sheet structure, then converts everything into a Spreadsheet-compatible JSON format. This JSON is sent back to the client, where the React Spreadsheet component renders the workbook in the browser, preserving the original Excel layout and content. -Once processing is complete, the JSON workbook is returned to the client, where the React Spreadsheet component renders it in the browser. This workflow preserves the original Excel layout and ensures the imported content appears with full fidelity. +In the code samples and demos, you may see **Syncfusion-hosted service URLs** used for the `openUrl` and `saveUrl` properties. These URLs point to Syncfusion’s own WebAPI services (built with **ASP.NET Core**) that handle opening and saving Excel files. These hosted URLs are provided only for demonstration and evaluation purposes: + +**Hosted Syncfusion Service URLs** +``` +openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open' +saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +``` + +For your own development and production, you must set up your own web service for open/save operations. This ensures your data remains private, secure, and fully under your control. Using your own service also allows you to customize processing, apply business logic, and comply with your organization’s security requirements. + +**Server Configuration** + +Below is an example of a server-side `Open` endpoint using ASP.NET Core WebAPI, which is the same approach used for building the hosted Syncfusion URLs. This endpoint receives the uploaded Excel file, processes it with the Syncfusion Spreadsheet library, and returns the workbook JSON to the client: + +```csharp +// Open action +[HttpPost] +[Route("Open")] +public IActionResult Open([FromForm] IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + if (openRequest.Files && openRequest.Files.Count > 0) { + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); + } + return BadRequest("No file uploaded."); +} +``` + +> **Note:** For details on how to set up your own web service for open/save operations, refer to the [web service](./web-services/webservice-overview) section of this documentation. + +**Install Required Dependencies** + +For spreadsheet open and save operations, install the following NuGet packages based on your server platform: + +| Platform | Assembly | NuGet Package | +|---------------|------------------------------------------|---------------| +| ASP.NET Core | Syncfusion.EJ2.Spreadsheet.AspNet.Core
Syncfusion.EJ2.AspNet.Core
Syncfusion.XlsIORenderer.Net.Core | [Syncfusion.EJ2.Spreadsheet.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core)
[Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core)
[Syncfusion.XlsIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.XlsIORenderer.Net.Core) | +| ASP.NET MVC5 | Syncfusion.XlsIO.AspNet.Mvc5
Syncfusion.ExcelToPdfConverter.AspNet.Mvc5
Syncfusion.Pdf.AspNet.Mvc5
Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5
Syncfusion.EJ2.MVC5 | [Syncfusion.XlsIO.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.XlsIO.AspNet.Mvc5)
[Syncfusion.ExcelToPdfConverter.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.ExcelToPdfConverter.AspNet.Mvc5)
[Syncfusion.Pdf.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.Pdf.AspNet.Mvc5/)
[Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5)
[Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) | + +For more details, see the [dependencies section on nuget.org](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core#dependencies-body-tab). To enable opening Excel files, set the [`allowOpen`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowopen) property to **true** and specify the service url using the [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) property. The control will send the uploaded file to this endpoint, where it is processed and returned as JSON for the Spreadsheet to render. @@ -428,7 +468,7 @@ public IActionResult Open(IFormCollection openRequest) } ``` -### Open large Excel files with chunk response processing +### Open Large Excel Files with Chunk Response Processing When opening large Excel files with many features and data, the server response can become very large. This might cause memory issues or connection problems during data transmission. The `Chunk Response Processing` feature solves this by dividing the server response into smaller parts, called chunks, and sending them to the client in parallel. The client receives these chunks and combines them to load the Excel data smoothly into the spreadsheet. @@ -445,26 +485,26 @@ import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; const App = () => { - const spreadsheetRef = React.useRef(null); - const openSettings = { - // Specifies the size (in bytes) of each chunk for the server response when opening a document. - chunkSize: 1000000, - // Specifies the number of retry attempts for a failed server request when returning the opened file responses in chunks. - // This ensures reliable handling of temporary network or server disruptions during the chunked response process. - retryCount: 3, - // Specifies the delay (in milliseconds) before retrying a failed server request when returning the opened file responses in chunks. - // This ensures controlled retries in case of temporary network or server disruptions during the chunked response process. - retryAfterDelay: 500 - } + const spreadsheetRef = React.useRef(null); + const openSettings = { + // Specifies the size (in bytes) of each chunk for the server response when opening a document. + chunkSize: 1000000, + // Specifies the number of retry attempts for a failed server request when returning the opened file responses in chunks. + // This ensures reliable handling of temporary network or server disruptions during the chunked response process. + retryCount: 3, + // Specifies the delay (in milliseconds) before retrying a failed server request when returning the opened file responses in chunks. + // This ensures controlled retries in case of temporary network or server disruptions during the chunked response process. + retryAfterDelay: 500 + } - const openUrl = 'https://localhost:{{port_number}}/Home/Open'; + const openUrl = 'https://localhost:{{port_number}}/Home/Open'; - return ( -
- - -
- ); + return ( +
+ + +
+ ); } export default App; @@ -533,44 +573,4 @@ public IActionResult Open(IFormCollection openRequest) > This feature is only applicable when importing an Excel file and not when loading JSON data or binding cell data. -![External workbook confirmation dialog](./images/external-reference-dialog-alert.png) - -## Server configuration - -In the Spreadsheet component, Excel import processing is handled on the `server‑side`. Therefore, to enable Excel importing in your application, you need to configure a server using any of the following web service technologies: - -* WebAPI -* WCF Service -* ASP.NET MVC Controller Action - -The following code example demonstrates how to configure the server using a `WebAPI` service. - -```csharp - - [Route("api/[controller]")] - public class SpreadsheetController : Controller - { - //To open Excel file - [AcceptVerbs("Post")] - [HttpPost] - [EnableCors("AllowAllOrigins")] - [Route("Open")] - public IActionResult Open(IFormCollection openRequest) - { - OpenRequest open = new OpenRequest(); - open.File = openRequest.Files[0]; - return Content(Workbook.Open(open)); - } - } -``` - -## Server dependencies - -Open helper functions are shipped in the Syncfusion.EJ2.Spreadsheet package, which is available in Essential Studio® and [`nuget.org`](https://www.nuget.org/). Following list of dependencies required for Spreadsheet open and save operations. - -* Syncfusion.EJ2 -* Syncfusion.EJ2.Spreadsheet -* Syncfusion.Compression.Base -* Syncfusion.XlsIO.Base - -And also refer [this](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save#server-dependencies) for more information. +![External workbook confirmation dialog](./images/external-reference-dialog-alert.png) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/protect-sheet.md b/Document-Processing/Excel/Spreadsheet/React/protect-sheet.md index 3abf9eb815..4d3b840757 100644 --- a/Document-Processing/Excel/Spreadsheet/React/protect-sheet.md +++ b/Document-Processing/Excel/Spreadsheet/React/protect-sheet.md @@ -9,11 +9,15 @@ documentation: ug # Protect sheet in React Spreadsheet component -Sheet protection helps you to prevent the users from modifying the data in the spreadsheet. +Sheet protection allows you to prevent users from modifying data in the Spreadsheet. +When a sheet is protected, editing actions such as typing, formatting, or deleting content are restricted, ensuring that important data remains secure. + +You can enable protection by using the [`protectSheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#protectsheet) method. +This locks the sheet and restricts user actions based on the protection settings you configure. ## Protect Sheet -Protect sheet feature helps you to prevent the unknown users from accidentally changing, editing, moving, or deleting data in a spreadsheet. And you can also protect the sheet with password. You can use the [`isProtected`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#isprotected) property to enable or disable the Protecting functionality. +Protect sheet feature helps you to prevent the unknown users from accidentally changing, editing, moving, or deleting data in a spreadsheet. And you can also protect the sheet with password. You can use the [`isProtected`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#isprotected) property to enable or disable the Protecting functionality. > * The default value for `isProtected` property is `false`. @@ -40,7 +44,7 @@ In the active Spreadsheet, the sheet protection can be done by any of the follow * Select the Protect Sheet item in the Ribbon toolbar under the Data Tab, and then select your desired options. * Right-click the sheet tab, select the Protect Sheet item in the context menu, and then select your desired options. -* Use the [`protectSheet()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#protectsheet) method programmatically. +* Use the [`protectSheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#protectsheet) method programmatically. The following example shows `Protect Sheet` functionality in the Spreadsheet control. @@ -67,7 +71,8 @@ The following example shows `Protect Sheet` functionality in the Spreadsheet con ## Unprotect Sheet -Unprotect sheet is used to enable all the functionalities that are already disabled in a protected spreadsheet. +The **Unprotect Sheet** feature restores all functionalities that were disabled in a protected spreadsheet. +Once a sheet is unprotected, users can edit, format, insert, delete, and move data without restrictions. **User Interface**: @@ -75,11 +80,11 @@ In the active Spreadsheet, the sheet Unprotection can be done by any of the foll * Select the `Unprotect Sheet` item in the Ribbon toolbar under the Data Tab. * Right-click the sheet tab, select the `Unprotect Sheet` item in the context menu. -* Use the [`unprotectSheet()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#unprotectsheet) method programmatically. +* Use the [`unprotectSheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#unprotectsheet) method programmatically. ## Unlock the particular cells in the protected sheet -In protected spreadsheet, to make some particular cell or range of cells are editable, you can use [`lockCells()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#lockcells) method, with the parameter `range` and `isLocked` property as false. +In protected spreadsheet, to make some particular cell or range of cells are editable, you can use [`lockCells`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#lockcells) method, with the parameter `range` and `isLocked` property as false. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -100,9 +105,9 @@ In protected spreadsheet, to make some particular cell or range of cells are edi ## Make cells read-only without protecting worksheet -Previously, you could make cells read-only by protecting the entire sheet using the [protectSheet](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#protectsheet) method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the [lockCells](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#lockcells) method, passing the `range` parameter and setting the `isLocked` property to **false**. +Previously, you could make cells read-only by protecting the entire sheet using the [protectSheet](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#protectsheet) method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the [lockCells](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#lockcells) method, passing the `range` parameter and setting the `isLocked` property to **false**. -Now, you can make an entire row, an entire column, or a specific range of cells read-only using the [setRangeReadOnly](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#setrangereadonly) method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table: +Now, you can make an entire row, an entire column, or a specific range of cells read-only using the [setRangeReadOnly](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setrangereadonly) method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table: | Parameter | Description | |-----|------| @@ -169,7 +174,7 @@ The following example demonstrates how to make rows, columns, and cells read-onl ## Protect Workbook -Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. You can use the [`password`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#password) property to protect workbook with password. You can use the [`isProtected`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#isprotected) property to protect or unprotect the workbook without the password. +Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. You can use the [`password`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#password) property to protect workbook with password. You can use the [`isProtected`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#isprotected) property to protect or unprotect the workbook without the password. > The default value for `isProtected` property is `false`. @@ -177,7 +182,7 @@ Protect workbook feature helps you to protect the workbook so that users cannot In the active Spreadsheet, you can protect the worksheet by selecting the Data tab in the Ribbon toolbar and choosing the `Protect Workbook` item. Then, enter the password and confirm it and click on OK. -The following example shows `Protect Workbook` by using the [`isProtected`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#isprotected) property in the Spreadsheet control. +The following example shows `Protect Workbook` by using the [`isProtected`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#isprotected) property in the Spreadsheet control. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -196,7 +201,7 @@ The following example shows `Protect Workbook` by using the [`isProtected`](http {% previewsample "/document-processing/code-snippet/spreadsheet/react/local-data-binding-cs3" %} -The following example shows `Protect Workbook` by using the [`password`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#password) property in the Spreadsheet control. To unprotect the workbook, click the unprotect workbook button in the data tab and provide the password as syncfusion® in the dialog box. +The following example shows `Protect Workbook` by using the [`password`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#password) property in the Spreadsheet control. To unprotect the workbook, click the unprotect workbook button in the data tab and provide the password as syncfusion® in the dialog box. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -217,11 +222,11 @@ The following example shows `Protect Workbook` by using the [`password`](https:/ ## Unprotect Workbook -Unprotect Workbook is used to enable the insert, delete, rename, move, copy, hide or unhide sheets feature in the spreadsheet. +The **Unprotect Workbook** feature restores full access to workbook-level operations such as inserting, deleting, renaming, moving, copying, hiding and unhiding sheets that were restricted when the workbook was protected. **User Interface**: -In the active Spreadsheet, the workbook Unprotection can be done in any of the following ways: +In the active Spreadsheet, the workbook can be unprotected in any of the following ways: * Select the `Unprotect Workbook` item in the Ribbon toolbar under the Data Tab and provide the valid password in the dialog box. diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index 8d88ab29e2..cb10114a34 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md @@ -9,11 +9,51 @@ documentation: ug # Save Excel Files in Syncfusion React Spreadsheet -When exporting an Excel file from the React Spreadsheet component, the process is handled through a streamlined server‑side workflow. The Spreadsheet content displayed in the browser is first serialized into a structured JSON workbook. This JSON includes all essential details—such as data, formulas, formatting, styles, and sheet configuration. +The Syncfusion React Spreadsheet component uses a server-assisted workflow to save Excel files efficiently and accurately. When a user saves an Excel file, the Spreadsheet content displayed in the browser is first serialized into a structured JSON workbook. This JSON includes all essential details—such as data, formulas, formatting, styles, and sheet configuration. -Once generated, this JSON workbook is sent to the server, where the [`Syncfusion.EJ2.Spreadsheet library`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) uses [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview) to convert the JSON data into a fully formatted Excel file. During this process, the JSON workbook is parsed and its contents are mapped to an XlsIO Workbook instance, ensuring that all data, styles, formulas, and other Spreadsheet features are accurately preserved. +The JSON workbook is then sent to a server endpoint for processing. On the server, the [`Syncfusion.EJ2.Spreadsheet`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) library is used to convert the JSON data into a fully formatted Excel file. This library is built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview), which itself is implemented using **.NET Frameworks**. The server parses the JSON, maps its contents to an XlsIO Workbook instance, and ensures that all data, styles, formulas, and other Spreadsheet features are accurately preserved. -Since the server is responsible for generating the final Excel file, the total export time can vary depending on the workbook’s complexity. Factors such as the level of formatting, styles and the use of advanced features like formulas or conditional formatting can influence processing time. After the file is successfully generated, it is sent back to the client for download. +Since the server is responsible for generating the final Excel file, the total export time can vary depending on the workbook’s complexity. Factors such as the level of formatting, styles, and the use of advanced features like formulas or conditional formatting can influence processing time. After the file is successfully generated, it is sent back to the client for download. + +In the code samples and demos, you may see **Syncfusion-hosted service URLs** used for the `saveUrl` property. These URLs point to Syncfusion’s own WebAPI services (built with **ASP.NET Core**) that handle saving Excel files. These hosted URLs are provided only for demonstration and evaluation purposes: + +**Hosted Syncfusion Service URLs:** +``` +openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open' +saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +``` + +For your own development and production, you must set up your own web service for save operations. This ensures your data remains private, secure, and fully under your control. Using your own service also allows you to customize processing, apply business logic, and comply with your organization’s security requirements. + +**Server Configuration** + +Below is an example of a server-side `Save` endpoint using ASP.NET Core WebAPI, which is the same approach used for building the hosted Syncfusion URLs. This endpoint receives the Spreadsheet data as JSON, processes it with the Syncfusion Spreadsheet library, and returns the generated Excel file to the client: + +```csharp +// Save action +[HttpPost] +[Route("Save")] +public IActionResult Save([FromForm] SaveSettings saveSettings) +{ + if(saveSettings && saveSettings.JSONData) { + return Workbook.Save(saveSettings); + } + return BadRequest("saveSettings or JSONData was not available."); +} +``` + +> **Note:** For details on how to set up your own web service for open/save operations, refer to the [web service](./web-services/webservice-overview) section of this documentation. + +**Install Required Dependencies** + +For spreadsheet open and save operations, install the following NuGet packages based on your server platform: + +| Platform | Assembly | NuGet Package | +|---------------|------------------------------------------|---------------| +| ASP.NET Core | Syncfusion.EJ2.Spreadsheet.AspNet.Core
Syncfusion.EJ2.AspNet.Core
Syncfusion.XlsIORenderer.Net.Core | [Syncfusion.EJ2.Spreadsheet.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core)
[Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core)
[Syncfusion.XlsIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.XlsIORenderer.Net.Core) | +| ASP.NET MVC5 | Syncfusion.XlsIO.AspNet.Mvc5
Syncfusion.ExcelToPdfConverter.AspNet.Mvc5
Syncfusion.Pdf.AspNet.Mvc5
Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5
Syncfusion.EJ2.MVC5 | [Syncfusion.XlsIO.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.XlsIO.AspNet.Mvc5)
[Syncfusion.ExcelToPdfConverter.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.ExcelToPdfConverter.AspNet.Mvc5)
[Syncfusion.Pdf.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.Pdf.AspNet.Mvc5/)
[Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5)
[Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) | + +For more details, see the [dependencies section on nuget.org](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core#dependencies-body-tab). To enable saving Excel files, set the [`allowSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowsave) property to **true** and specify the service URL using the [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) property. When a save action is triggered, the control sends the spreadsheet model to this endpoint, where it is processed and returned as a downloadable Excel file. @@ -442,40 +482,3 @@ The possible values are: {% endtabs %} {% previewsample "/document-processing/code-snippet/spreadsheet/react/open-save-cs8" %} - - -## Server configuration - -In the Spreadsheet component, Excel export processing is handled on the `server‑side`. Therefore, to enable exporting in your application, you need to configure a server using any of the following web service technologies: - -* WebAPI -* WCF Service -* ASP.NET MVC Controller Action - -The following code snippet shows how to configure the server using a `WebAPI` service: - -```csharp -[Route("api/[controller]")] -public class SpreadsheetController : Controller -{ - // To save as Excel file - [AcceptVerbs("Post")] - [HttpPost] - [EnableCors("AllowAllOrigins")] - [Route("Save")] - public IActionResult Save([FromForm] SaveSettings saveSettings) - { - return Workbook.Save(saveSettings); - } -} -``` - -## Server dependencies - -Save helper functions are included in the `Syncfusion.EJ2.Spreadsheet` package, which is available in Essential Studio® and on [`nuget.org`](https://www.nuget.org). -The following dependencies are required for Spreadsheet save operations: - -* Syncfusion.EJ2 -* Syncfusion.EJ2.Spreadsheet -* Syncfusion.Compression.Base -* Syncfusion.XlsIO.Base diff --git a/Document-Processing/Excel/Spreadsheet/React/searching.md b/Document-Processing/Excel/Spreadsheet/React/searching.md index 33af8f3ced..e871b3e976 100644 --- a/Document-Processing/Excel/Spreadsheet/React/searching.md +++ b/Document-Processing/Excel/Spreadsheet/React/searching.md @@ -30,7 +30,7 @@ Find can be done by any of the following ways: > * `Match case`: To find the matched value with case sensitive. > * `Match exact cell contents`: To find the exact matched cell value with entire match cases. -* Using [`find()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#find) method to perform find operation. +* Using [`find`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#find) method to perform find operation. ## Replace @@ -43,8 +43,8 @@ Replace can be done by any of the following ways: * Using `Ctrl + H` key to open the Find and Replace dialog. * Using Replace button to change the found value in sheet or workbook. * Using ReplaceAll button to change all the found value's in sheet or workbook. -* Using [`replace()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#replace) method to perform replace operation by passing the argument `args.replaceby` as `replace`. -* Using [`replace()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#replace) method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`. +* Using [`replace`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#replace) method to perform replace operation by passing the argument `args.replaceby` as `replace`. +* Using [`replace`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#replace) method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`. ## Go to @@ -53,7 +53,7 @@ Go to is used to navigate to a specific cell address in the sheet or workbook. **User Interface**: * Using `Ctrl + G` key to open the Go To dialog. -* Using [`goTo()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#goto) method to perform Go To operation. +* Using [`goTo`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#goto) method to perform Go To operation. In the following sample, searching can be done by following ways: diff --git a/Document-Processing/Excel/Spreadsheet/React/selection.md b/Document-Processing/Excel/Spreadsheet/React/selection.md index 98e1eae436..4dc2b75d29 100644 --- a/Document-Processing/Excel/Spreadsheet/React/selection.md +++ b/Document-Processing/Excel/Spreadsheet/React/selection.md @@ -9,19 +9,23 @@ documentation: ug # Selection in React Spreadsheet component -Selection provides interactive support to highlight the cell, row, or column that you select. Selection can be done through Mouse, Touch, or Keyboard interaction. To enable selection, set `mode` as `Single` / `Multiple` in [`selectionSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#selectionsettings). If you set `mode` to `None`, it disables the UI selection. +Selection provides interactive support to highlight the cell, row, or column that you select. Selection can be done through Mouse, Touch, or Keyboard interaction. -> * The default value for `mode` in `selectionSettings` is `Multiple`. +To configure selection, use the [`selectionSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#selectionsettings) property: +* `mode = "Single"` → allows selecting only one cell, row, or column at a time. +* `mode = "Multiple"` → allows selecting multiple cells, rows, or columns at once. +* `mode = "None"` → disables UI selection completely. -You have the following options in Selection, +> The default value for `mode` is `Multiple`. -* Cell selection -* Row selection -* Column selection +You can perform: +* Cell selection – highlight individual cells. +* Row selection – highlight entire rows. +* Column selection – highlight entire columns. ## Cell selection -Cell selection is used to select a single or multiple cells. It can be performed using the [`selectRange`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#selectrange) method. +Cell selection is used to select a single or multiple cells. It can be performed using the [`selectRange`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#selectrange) method. **User Interface**: @@ -97,7 +101,7 @@ The following sample shows the column selection in the spreadsheet, here selecti ## Get selected cell values -You can select single or multiple cells, rows, or columns using mouse and keyboard interactions. Additionally, you can also programmatically perform selection using the [selectRange](https://helpej2.syncfusion.com/react/documentation/api/spreadsheet/#selectrange) method. This selection behavior is controlled based on the [selectionSettings](https://helpej2.syncfusion.com/react/documentation/api/spreadsheet/#selectionsettings) property. Now, retrieving the selected cell values as a collection is achievable using the [getData](https://helpej2.syncfusion.com/react/documentation/api/spreadsheet/#getdata) method. +You can select single or multiple cells, rows, or columns using mouse and keyboard interactions. Additionally, you can also programmatically perform selection using the [selectRange](https://helpej2.syncfusion.com/react/documentation/api/spreadsheet#selectrange) method. This selection behavior is controlled based on the [selectionSettings](https://helpej2.syncfusion.com/react/documentation/api/spreadsheet#selectionsettings) property. Now, retrieving the selected cell values as a collection is achievable using the [getData](https://helpej2.syncfusion.com/react/documentation/api/spreadsheet#getdata) method. Below is a code example demonstrating how to retrieve the selected cell values as a collection programmatically: @@ -120,7 +124,7 @@ Below is a code example demonstrating how to retrieve the selected cell values a ## Remove selection -The following sample shows, how to remove the selection in the spreadsheet. Here changing the `mode` as `None` in [`selectionSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#selectionsettings) to disable's the UI selection. +The following sample shows, how to remove the selection in the spreadsheet. Here changing the `mode` as `None` in [`selectionSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#selectionsettings) to disable's the UI selection. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md b/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md index b9fe429ad9..e3c2c49e81 100644 --- a/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md +++ b/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md @@ -115,7 +115,7 @@ kubectl get svc spreadsheet-server-service **Step 5:** Configure the React client -Start by following the steps provided in this [link](../getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. Once the Service reports an external address (e.g., a1b2c3d4e5f6-1234567890.us-east-1.elb.amazonaws.com), update the [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) properties of your React Spreadsheet component: +Start by following the steps provided in this [link](../getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. Once the Service reports an external address (e.g., a1b2c3d4e5f6-1234567890.us-east-1.elb.amazonaws.com), update the [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) properties of your React Spreadsheet component: ```js diff --git a/Document-Processing/Excel/Spreadsheet/React/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md b/Document-Processing/Excel/Spreadsheet/React/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md index 19391af422..1c50b61223 100644 --- a/Document-Processing/Excel/Spreadsheet/React/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md +++ b/Document-Processing/Excel/Spreadsheet/React/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md @@ -52,6 +52,6 @@ https://XXXXXXXXXX.azurewebsites.net openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open" saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save ``` -Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started) +Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md) For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/sort.md b/Document-Processing/Excel/Spreadsheet/React/sort.md index 631a4728d1..5e8310970b 100644 --- a/Document-Processing/Excel/Spreadsheet/React/sort.md +++ b/Document-Processing/Excel/Spreadsheet/React/sort.md @@ -15,25 +15,23 @@ Sorting helps arranging the data to a specific order in a selected range of cell By default, the `sort` module is injected internally into Spreadsheet to perform sorting. -## Sort by cell value +## Sort by Cell value -In the active Spreadsheet, select a range of cells to sort by cell value. The range sort can be done by any of the following ways: -* Select the sort item in the Ribbon toolbar and choose the ascending or descending item. -* Right-click the sheet, select the sort item in the context menu and choose the ascending/descending item. -* Use the [`sort()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sort) method programmatically. +In the active Spreadsheet, you can sort a selected range of cells by their values. Sorting can be done in following ways: -The cell values can be sorted in the following orders: -* Ascending -* Descending - -> * Ascending is the default order for sorting. +* **Ribbon Toolbar** – Select the sort option under the Ribbon toolbar and choose ascending or descending. +* **Context Menu** – Right-click the sheet, select the sort option, and choose ascending or descending. +* **Programmatically** – Use the [`sort`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sort) method. -The `sort()` method with empty arguments will sort the selected range by active cell’s column as sort column in ascending order. +The cell values can be sorted in the following orders: +* **Ascending** – Default order for sorting. +* **Descending** – Reverse order. +When the `sort` method is called with empty arguments, the selected range is sorted by the active cell’s column in ascending order. > * The [`beforeSort`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#beforesort) event will be triggered before sorting the specified range. > * The [`sortComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sortcomplete) event will be triggered after the sort action is completed successfully. -The following code example shows `sort` functionality in the Spreadsheet control. +The following code example demonstrates the `sort` functionality in the Spreadsheet control. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -54,7 +52,7 @@ The following code example shows `sort` functionality in the Spreadsheet control ## Data contains header -You can specify whether the selected range of cells contains header. To specify, you need to set the [`containsHeader`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#containsheader) property to `true` and pass it as `sortOption` arguments of the sort() method. +You can specify whether the selected range of cells contains header. To specify, you need to set the [`containsHeader`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#containsheader) property to `true` and pass it as `sortOption` arguments of the sort method. > * If the `containsHeader` property is not set and active cell column’s first cell value type is differed from the second cell value type, the first row data in the range are marked as column headers. @@ -70,12 +68,12 @@ You can also enable or disable this property using `beforeSort` event arguments, In the custom sort dialog, the `Data contains header` checkbox is checked on load. Thus, the default value for `containsHeader` is `true` in custom sort dialog. -## Case sensitive sort +## Case Sensitive sort -The default sort functionality of Spreadsheet is a case insensitive sorting. When you want to perform sorting with case sensitive, you need to set the [`caseSensitive`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#casesensitive) property to `true` and pass it as `sortOption` arguments of the sort() method. - -Case sensitive sorting is applicable only for cells with alphabets. In ascending order sorting with case sensitive enabled, the cells with lower case text will be placed above the cells with upper case text. +By default, sorting in the Spreadsheet is **case insensitive**. To perform sorting with case sensitivity, set the [`caseSensitive`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#casesensitive) property to `true` and pass it as part of the `sortOption` arguments in the `sort` method. +* Case sensitive sorting applies only to cells containing alphabets. +* In ascending order with case sensitivity enabled, cells with lowercase text appear above cells with uppercase text. > * The default value for the `caseSensitive` property is `false`. You can also enable or disable this property using `beforeSort` event arguments, @@ -93,21 +91,26 @@ In the custom sort dialog, the `Case sensitive` checkbox is unchecked on load as When you want to perform sorting on multiple columns, it can be done by any of the following ways: * Select the `Custom sort…` menu item from the Ribbon toolbar item or context menu item. -* Use the `sort()` method programmatically by providing sort criteria. +* Use the `sort` method programmatically by providing sort criteria. > * The current sorting functionality supports sorting based on cell values only. -### Custom sort dialog +### Custom Sort Dialog -The custom sort dialog helps sorting multiple columns in the selected range by utilizing the rich UI. This dialog will be appeared while choosing the `Custom sort…` from the Ribbon item or context menu item. By default, sort criteria with the first column name from the selected range will be appeared in the dialog on initial load and it cannot be removed. +The custom sort dialog allows sorting multiple columns in a selected range using a rich UI. This dialog appears when you choose `Custom sort…` from the Ribbon or context menu. + +* By default, the dialog shows sort criteria with the first column name from the selected range. This initial criterion cannot be removed. +* You can add more criteria using the `Add Column` button at the bottom of the dialog. Each criterion can have its own sort order. +* Newly added criteria can be removed using the `delete` icon next to each item. -You can add multiple criteria using the `Add Column` button at the bottom of the dialog. Thus, multiple columns can be specified with different sort order. The newly added sort criteria items can be removed using the `delete` icons at the end of each items. +* **Data contains header** – Refer to the [Data contains header](./sort#data-contains-header) topic for details about the checkbox. +* **Case sensitive** – Refer to the [Case sensitive sort](./sort#case-sensitive-sort) topic for details about the checkbox. -You can refer to the [`Data contains header`](./sort#data-contains-header) topic to learn more about `Data contains header` checkbox. To learn more about `Case sensitive` checkbox, you can refer to [`Case sensitive sort`](./sort#case-sensitive-sort) topic. +This dialog makes it easy to sort complex datasets by multiple columns with clear, customizable options. ### Passing sort criteria manually -The multi-column sorting can also be performed manually by passing sort options to the `sort()` method programmatically. The `sortOption` have the following arguments: +The multi-column sorting can also be performed manually by passing sort options to the `sort` method programmatically. The `sortOption` have the following arguments: * [`sortDescriptors`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sortdescriptors) – Sort criteria collection that holds the collection of field name, sort order, and [`sortComparer`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sortcomparer). * `containsHeader` – Boolean argument that specifies whether the range has headers in it. * `caseSensitive` – Boolean argument that specifies whether the range needs to consider case. @@ -143,10 +146,14 @@ By customizing sort comparer, you can define the sort action as desired. For custom sort comparer example, refer to the [`Sort a range by custom list`] below. ### Sort a range by custom list - You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using `custom sort comparer`. -In the following demo, the `Trustworthiness` column is sorted based on the custom lists `Perfect`, `Sufficient`, and `Insufficient`. +For example, in the demo below, the `Trustworthiness`column is sorted according to the custom list values: +* `Perfect` +* `Sufficient` +* `Insufficient` + +This approach lets you control the order of sorting beyond the default ascending or descending options, making it easier to arrange data according to personalized or domain-specific criteria. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/template.md b/Document-Processing/Excel/Spreadsheet/React/template.md index eb51ae2b8d..ec2a4e92be 100644 --- a/Document-Processing/Excel/Spreadsheet/React/template.md +++ b/Document-Processing/Excel/Spreadsheet/React/template.md @@ -9,7 +9,20 @@ documentation: ug # Template in React Spreadsheet component -Cell Template is used for adding HTML elements into Spreadsheet. You can add the cell template in spreadsheet by using the `template` property and specify the address using the `address` property inside the `ranges` property. You can customize the Html elements similar to Syncfusion® components (TextBox, DropDownList, RadioButton, MultiSelect, DatePicker etc) by using the `beforeCellRender` event. In this demo, Cell template is applied to `C2:C9` and instantiated with Html input components like TextBox, RadioButton, TextArea. You need to bind the events to perform any operations through HTML elements or Syncfusion® components. Here, we have added `change` event in to the MultiSelect control, and we have updated the selected data into the spreadsheet cell through that change event. +Cell templates allow you to embed HTML elements and Syncfusion® components directly into spreadsheet cells. This enables rich, interactive data entry experiences beyond standard cell values. + +## Key Features + +- **HTML Elements** – You can add TextBox, RadioButton, TextArea, and other HTML controls to cells for enhanced user input options +- **Syncfusion Components** – You can integrate DropDownList, MultiSelect, DatePicker, and other Syncfusion controls for advanced data entry +- **Event Binding** – You can attach event handlers to perform operations on user interaction and update spreadsheet data +- **Custom Rendering** – You can use the `beforeCellRender` event for advanced customization and dynamic template modifications + +## Cell Templates + +Define a cell template using the `template` property and specify the target range with the `address` property within the `ranges` configuration. This associates your template with specific cells in the spreadsheet. + +The `beforeCellRender` event fires before template rendering, allowing you to customize HTML elements and Syncfusion components dynamically based on cell address, data, or application state. The following sample describes the above behavior. diff --git a/Document-Processing/Excel/Spreadsheet/React/text-cell-formatting.md b/Document-Processing/Excel/Spreadsheet/React/text-cell-formatting.md new file mode 100644 index 0000000000..9074723347 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/text-cell-formatting.md @@ -0,0 +1,145 @@ +--- +layout: post +title: Text & Cell Formatting in React Spreadsheet component | Syncfusion +description: Learn here all about Text and cell formatting in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formatting +platform: document-processing +documentation: ug +--- + +# Cell Styling and Text Formatting + +Text and cell formatting improves the appearance of your spreadsheet and helps highlight specific cells or ranges. You can apply formats such as font size, font family, font color, text alignment, borders, and more. Use the [`allowCellFormatting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowcellformatting) property to enable or disable text and cell formatting in the Spreadsheet. + +You can set formats in the following ways: +* Use the [style](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#style) property to apply formats to each cell during the initial load. +* Use the [`cellFormat`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cellformat) method to apply formats to a cell or range of cells dynamically. +* Apply formatting directly by clicking the desired format option from the ribbon toolbar. + +## Fonts + +The Syncfusion React Spreadsheet component provides comprehensive font formatting options to customize text appearance in cells. These options help improve readability and establish a clear visual hierarchy in your data. + +The Spreadsheet supports the following font formatting options: + +| Format | Description | +|--------|-------------| +| [`fontFamily`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#fontfamily) | Specifies the typeface of the text (e.g., Arial, Calibri, Times New Roman, Verdana). | +| [`fontSize`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#fontsize) | Specifies the size of the text in points (e.g., 10pt, 12pt, 14pt). | +| [`fontWeight`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#fontweight) | Specifies the thickness of the text. Supports values such as normal, bold, and numeric weights (e.g., 100–900) to control the emphasis level of the text. | +| [`fontStyle`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#fontstyle) | Specifies the style of the text. Supports values such as normal, italic, and oblique to adjust the appearance and emphasis of the content. | +| [`textDecoration`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#textdecoration) | Specifies decorative styling applied to the text. Supports values such as underline, overline, and line-through (strikethrough) to highlight, cross out, or distinguish content within a cell. | +| [`color`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#color) | Specifies the color of the text. | + +## Text Alignment + +You can align text in cells using the following options: + +| Alignment Type | Options | Description | +|----------------|---------|-------------| +| [`textAlign`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/textalign) | Left, Center, Right | Aligns text horizontally from left to right within the cell. | +| [verticalAlign](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/verticalalign) | Top, Middle, Bottom | Aligns text from top to bottom within the cell. | + +## Indents + +Indentation helps enhance the visual appearance of text in cells by adding space before the text content. You can apply cell text indentation using the [`textIndent`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#textindent) property. + +## Fill Color + +Fill color (background color) is used to highlight cells or ranges of cells across the workbook. You can apply background colors to cells using the [`backgroundColor`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#backgroundcolor) property. + +The following code example shows the style formatting in text and cells of the spreadsheet. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/cellformat-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/cellformat-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/cellformat-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/cellformat-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/cellformat-cs1" %} + +## Borders + +The Syncfusion React Spreadsheet component allows you to apply borders to a cell or a range of cells. Borders help you separate sections, highlight data, or format tables clearly in your worksheet. You can apply borders in different styles, sizes, and colors based on your needs. + +### Border Types + +The Spreadsheet supports many types of borders. Each type adds a border to a specific side or area of the selected cells: + +| Types | Actions | +|-------|---------| +| **Top Border** | Specifies the top border of a cell or range of cells.| +| **Left Border** | Specifies the left border of a cell or range of cells.| +| **Right Border** | Specifies the right border of a cell or range of cells.| +| **Bottom Border** | Specifies the bottom border of a cell or range of cells.| +| **No Border** | Used to clear the border from a cell or range of cells.| +| **All Border** | Specifies all border of a cell or range of cells.| +| **Horizontal Border** | Specifies the top and bottom border of a cell or range of cells.| +| **Vertical Border** | Specifies the left and right border of a cell or range of cells.| +| **Outside Border** | Specifies the outside border of a range of cells.| +| **Inside Border** | Specifies the inside border of a range of cells.| + +### Customize Border Colors and Styles + +You can also change how the border looks by adjusting its size and style. The Spreadsheet supports the following options: + +| Types | Actions | +|-------|---------| +| **Thin** | Specifies the `1px` border size (default).| +| **Medium** | Specifies the `2px` border size.| +| **Thick** | Specifies the `3px` border size.| +| **Solid** | Used to create the `solid` border (default).| +| **Dashed** | Used to create the `dashed` border.| +| **Dotted** | Used to create the `dotted` border.| +| **Double** | Used to create the `double` border.| + +Borders can be applied in the following ways, + +- Using the `border`, `borderLeft`, `borderRight`, `borderBottom` properties, you can set the desired border to each cell at initial load. The [border](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#border) property is part of [CellStyleModel](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel) and is applied via the cell's `style` object. +- Using the [setBorder](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#setborder) method, you can set various border options to a cell or range of cells. +- Selecting the border options from the ribbon toolbar. + +The following code sample shows how to apply different typed border, colors and styles in the Spreadsheet. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/border-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/border-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/border-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/border-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/border-cs1" %} + +## Limitations of Formatting + +The following features are not supported in Formatting: + +* Insert row/column between the formatting applied cells. +* Formatting support for row/column. + +## Note + +You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for feature highlights. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to learn how to present and manipulate data. + +## See Also + +* [Number Formatting](./number-formatting) +* [Conditional Formatting](./conditional-formatting) +* [Cell Range](./cell-range) diff --git a/Document-Processing/Excel/Spreadsheet/React/ui-customization.md b/Document-Processing/Excel/Spreadsheet/React/ui-customization.md index 37dfb9a0ec..a1ec7ba3d3 100644 --- a/Document-Processing/Excel/Spreadsheet/React/ui-customization.md +++ b/Document-Processing/Excel/Spreadsheet/React/ui-customization.md @@ -88,4 +88,17 @@ The following code sample shows how to enable or disable a ribbon tab and toolba {% endhighlight %} {% endtabs %} -{% previewsample "/document-processing/code-snippet/spreadsheet/react/enable-or-disable-ribbon-items-cs1" %} \ No newline at end of file +{% previewsample "/document-processing/code-snippet/spreadsheet/react/enable-or-disable-ribbon-items-cs1" %} + +## Note + +You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to knows how to present and manipulate data. + +## See Also + +* [Worksheet](./worksheet) +* [Rows and columns](./rows-and-columns) +* [Cell templates](./user-interface-customization/custom-cell-templates) +* [Context menu customization](./user-interface-customization/customize-context-menu) +* [File menu customization](./user-interface-customization/customize-filemenu) +* [Theming-and-styling](./user-interface-customization/theming-and-styling) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/undo-redo.md b/Document-Processing/Excel/Spreadsheet/React/undo-redo.md index f1be15396e..7abbf5f514 100644 --- a/Document-Processing/Excel/Spreadsheet/React/undo-redo.md +++ b/Document-Processing/Excel/Spreadsheet/React/undo-redo.md @@ -9,31 +9,52 @@ documentation: ug # Undo redo in React Spreadsheet component -`Undo` option helps you to undone the last action performed and `Redo` option helps you to do the same action which is reverted in the Spreadsheet. You can use the [`allowUndoRedo`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowundoredo) property to enable or disable undo redo functionality in spreadsheet. +The Undo and Redo functionality allows you to reverse or restore actions performed in the Spreadsheet. `Undo` reverses the last action you performed, while `Redo` restores an action that was previously undone. This feature is essential for efficient data entry and editing, allowing users to experiment with changes without lose of work. + +You can enable or disable undo redo functionality using the [`allowUndoRedo`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowundoredo) property. > * The default value for `allowUndoRedo` property is `true`. By default, the `UndoRedo` module is injected internally into Spreadsheet to perform undo redo. +## Supported Operations in Undo/Redo + +The following operations are automatically recorded and can be undone/redone: + +| Operation | Explanation | +|-----------|------------| +| `Cell Edits` | • Restores values, formulas, and formatting to previous state
• Preserves cell dependencies and references
• Reverts wrapping and hyperlink changes | +| `Copy/Paste` | • Undoes pasted content including ranges, images, and shapes
• Restores original cell state before paste
• Maintains external metadata and clipboard history | +| `Insert/Delete` | • Restores deleted rows, columns, or sheets
• Re-applies or removes insertions
• Automatically updates all affected references | +| `Hide/Show` | • Toggles visibility state back to previous condition
• Restores hidden/visible row or column layout | +| `Resize` | • Reverts row height and column width to original dimensions
• Restores layout and visual alignment | +| `Merge/Unmerge` | • Restores merged cell state or unmerges previously merged cells
• Preserves cell content and formatting | +| `Autofill` | • Reverts generated data series to original cells
• Restores conditional formatting variants | +| `Sort` | • Restores original row order after sort
• Maintains data integrity for multi-row sorts
• Preserves cell references and dependencies | +| `Notes/Comments` | • Removes added notes or restores deleted comments
• Reverts comment edits to previous text | +| `Conditional Formatting` | • Removes applied rules or restores deleted rules
• Reverts condition modifications | +| `Data Validation` | • Removes validation rules or restores deleted rules
• Reverts validation criteria changes | +| `Charts & Images` | • Removes inserted charts or images
• Restores deleted charts or images
• Reverts anchor position and properties | + ## Undo It reverses the last action you performed with Spreadsheet. Undo can be done by any of the following ways: -* Select the undo item from HOME tab in Ribbon toolbar. +* Select the undo item from **HOME** tab in Ribbon toolbar. * Use `Ctrl + Z` keyboard shortcut to perform the undo. -* Use the [`undo`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#undo) method programmatically. +* Use the [`undo`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#undo) method programmatically. ## Redo It reverses the last undo action you performed with Spreadsheet. Redo can be done by any of the following ways: -* Select the redo item from HOME tab in Ribbon toolbar. +* Select the redo item from **HOME** tab in Ribbon toolbar. * Use `Ctrl + Y` keyboard shortcut to perform the redo. -* Use the [`redo`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#redo) method programmatically. +* Use the [`redo`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#redo) method programmatically. ## Update custom actions in UndoRedo collection -You can update your own custom actions in UndoRedo collection, by using the [`updateUndoRedoCollection`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#updateundoredocollection) method. And also customize the undo redo operations of your custom action by using `actionComplete` event. +You can update your own custom actions in UndoRedo collection, by using the [`updateUndoRedoCollection`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#updateundoredocollection) method. And also customize the undo redo operations of your custom action by using `actionComplete` event. The following code example shows `How to update and customize your own actions for undo redo` functionality in the Spreadsheet control. diff --git a/Document-Processing/Excel/Spreadsheet/React/worksheet.md b/Document-Processing/Excel/Spreadsheet/React/worksheet.md index 85419436f3..8db1994eb9 100644 --- a/Document-Processing/Excel/Spreadsheet/React/worksheet.md +++ b/Document-Processing/Excel/Spreadsheet/React/worksheet.md @@ -9,7 +9,15 @@ documentation: ug # Worksheet in React Spreadsheet component -Worksheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. +A **Worksheet** is a collection of cells organized in rows and columns. It allows you to store, format, and manipulate data efficiently within the Spreadsheet. Each worksheet provides a structured grid where you can enter values, apply formulas, and customize formatting to manage your data. + +Worksheets are part of the **Spreadsheet component**, and you can configure them using the [`sheets`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sheets) property. This property lets you define multiple worksheets, each with its own settings such as rows, columns, data, and formatting options. + +By using worksheets, you can: +* Organize data into separate tabs for better clarity. +* Apply different formatting styles to each sheet. +* Manage formulas and calculations independently across sheets. +* Import or export data while maintaining sheet-level configurations. ## Add sheet @@ -38,7 +46,7 @@ The following code example shows the insert sheet operation in spreadsheet. {% previewsample "/document-processing/code-snippet/spreadsheet/react/insert-sheet-cs1" %} -### Insert a sheet programmatically and make it active sheet +### Insert a sheet programmatically and make it active sheet A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using [insertSheet](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertsheet) method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the [goTo](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#goto) method. @@ -57,10 +65,11 @@ The following code example shows how to insert a sheet programmatically and make ## Delete sheet -The Spreadsheet has support for removing an existing worksheet. You can dynamically delete the existing sheet by the following way, +The Spreadsheet supports removing an existing worksheet. You can delete a sheet in the following ways: -* Right-click on the sheet tab, and then select `Delete` option from context menu. -* Using [`delete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#delete ) method to delete the sheets. +* Right-click on the sheet tab, and then select the **Delete** option from the context menu. +* Use the [`delete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#delete) method to remove sheets programmatically. +* Note: You cannot delete a worksheet if only one sheet exists in the workbook. ## Rename sheet @@ -80,7 +89,7 @@ By default, the row and column headers are visible in worksheets. You can dynami Gridlines act as a border like appearance of cells. They are used to distinguish cells on the worksheet. You can dynamically show or hide gridlines by using one of the following ways, * Switch to `View` tab, and then select `Hide Gridlines` option to hide the gridlines in worksheet. -* Set `showGridLines` property in `sheets` as `true` or `false` to show or hide the gridlines at initial load. By default, the `showGridLines` property is enabled in each worksheet. +* Set `showGridLines` property in `sheets` as `true` or `false` to show or hide the gridlines at initial load. By default, the [showGridLines](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sheet#showgridlines) property is enabled in each worksheet. The following code example shows the headers and gridlines operation in spreadsheet. @@ -132,6 +141,34 @@ The following code example shows the three types of sheet visibility state. {% previewsample "/document-processing/code-snippet/spreadsheet/react/sheet-visiblity-cs1" %} +## Duplicate sheet + +The Spreadsheet component allows you to create a copy of an existing worksheet along with its data, formatting, and configurations. Duplicating a sheet is useful when you want to reuse the same structure or data without manually recreating it. + +While duplicating the worksheet, a new worksheet is created as an exact copy of the selected sheet and is placed next to it. The duplicated sheet will automatically be assigned a unique name to avoid conflicts with existing sheet names. + +You can duplicate a worksheet in the following way, + +* Right-click on the sheet tab, and then select the `Duplicate` option from the context menu. + +* Duplicate a sheet programmatically using the [duplicateSheet](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#duplicatesheet) method; it copies the specified worksheet (including data, formatting and settings) and places the copy next to the original so you can reuse or edit it without affecting the source. + +![Duplicate sheet](./images/spreadsheet-duplicate.png) + +## Move sheet + +The Spreadsheet component provides options to rearrange worksheets by moving them to the left or right within the sheet tab panel. This helps you organize worksheets in the required order. + +You can move a worksheet using the following way, + +* Right-click on the sheet tab, and then select either `Move Left`(moves the sheet one position to the left) or `Move Right`(moves the sheet one position to the right) option from the context menu. + +* Move sheets programmatically using the [moveSheet](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#movesheet) method, which moves a worksheet from one position to another based on the position passed in the method and updates the sheet tab order. + +![Move sheet tabs](./images/spreadsheet-move-tab.png) + +>**Note:** The Move Left and Move Right options are enabled only when there are two or more worksheets available in the Spreadsheet. These options are automatically disabled when the selected sheet is already at the first or last position. + ## Note You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to knows how to present and manipulate data. diff --git a/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.jsx new file mode 100644 index 0000000000..d7116ddd1a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.jsx @@ -0,0 +1,71 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { CellStyleModel } from '@syncfusion/ej2-react-spreadsheet'; +import { data } from './datasource'; + +function App() { + const spreadsheetRef = React.useRef(null); + const headerStyle = { fontFamily: 'Axettac Demo', verticalAlign: 'middle', textAlign: 'center', fontSize: '18pt', fontWeight: 'bold', color: '#279377', border: '2px solid #e0e0e0' }; + + const onCreated = () => { + const spreadsheet = spreadsheetRef.current; + if (!spreadsheet) return; + // Apply various borders programmatically to demonstrate types + // Top border for first column header cells + spreadsheet.setBorder({ border: '2px dashed #0078d4' }, 'A1', 'Top'); + // Left and Right borders for header row + spreadsheet.setBorder({ border: '1px solid #333' }, 'A3:D12'); + spreadsheet.setBorder({ borderRight: '1px dotted #d14' }, 'E3:E12'); + // Horizontal borders on a block + spreadsheet.setBorder({ border: '1px solid #040404' }, 'A5:E12', 'Horizontal'); + // Vertical borders on a block + spreadsheet.setBorder({ border: '1px solid #888' }, 'B3:B12', 'Vertical'); + // Outside border for a range + spreadsheet.setBorder({ border: '2px solid #000' }, 'B3:B12', 'Outer'); + // Inside borders for a range + spreadsheet.setBorder({ border: '1px dotted #6a1b9a' }, 'E4:E12', 'Inside'); + }; + + // Define sheet model with per-cell border styles + const sheets = [ + { + showGridLines: true, + rows: [ + { height: 40, cells: [{ colSpan: 5, value: 'Order Summary', style: headerStyle }] }, + { + index: 1, + cells: [ + { index: 0, style: { borderLeft: '1px double #0a0', borderBottom: '1px double #0a0' } }, + { index: 1, style: { borderBottom: '1px double #0a0' } }, + { index: 2, style: { borderBottom: '1px double #0a0' } }, + { index: 3, style: { borderBottom: '1px double #0a0' } }, + { index: 4, style: { borderBottom: '1px double #0a0', borderRight: '1px double #0a0' } } + ] + } + ], + ranges: [ + { dataSource: data, startCell: 'A2' } + ], + columns: [ + { width: 100 }, + { width: 200 }, + { width: 110 }, + { width: 140 }, + { width: 90 } + ] + } + ]; + + return ( +
+ + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.tsx new file mode 100644 index 0000000000..2103c32b2b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/app.tsx @@ -0,0 +1,71 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { CellStyleModel } from '@syncfusion/ej2-react-spreadsheet'; +import { data } from './datasource'; + +function App(): React.ReactElement { + const spreadsheetRef = React.useRef(null); + const headerStyle: CellStyleModel = { fontFamily: 'Axettac Demo', verticalAlign: 'middle', textAlign: 'center', fontSize: '18pt', fontWeight: 'bold', color: '#279377', border: '2px solid #e0e0e0' }; + + const onCreated = (): void => { + const spreadsheet = spreadsheetRef.current; + if (!spreadsheet) return; + // Apply various borders programmatically to demonstrate types + // Top border for first column header cells + spreadsheet.setBorder({ border: '2px dashed #0078d4' }, 'A1', 'Top'); + // Left and Right borders for header row + spreadsheet.setBorder({ border: '1px solid #333' }, 'A3:D12'); + spreadsheet.setBorder({ borderRight: '1px dotted #d14' }, 'E3:E12'); + // Horizontal borders on a block + spreadsheet.setBorder({ border: '1px solid #040404' }, 'A5:E12', 'Horizontal'); + // Vertical borders on a block + spreadsheet.setBorder({ border: '1px solid #888' }, 'B3:B12', 'Vertical'); + // Outside border for a range + spreadsheet.setBorder({ border: '2px solid #000' }, 'B3:B12', 'Outer'); + // Inside borders for a range + spreadsheet.setBorder({ border: '1px dotted #6a1b9a' }, 'E4:E12', 'Inside'); + }; + + // Define sheet model with per-cell border styles + const sheets = [ + { + showGridLines: true, + rows: [ + { height: 40, cells: [{ colSpan: 5, value: 'Order Summary', style: headerStyle }] }, + { + index: 1, + cells: [ + { index: 0, style: { borderLeft: '1px double #0a0', borderBottom: '1px double #0a0' } }, + { index: 1, style: { borderBottom: '1px double #0a0' } }, + { index: 2, style: { borderBottom: '1px double #0a0' } }, + { index: 3, style: { borderBottom: '1px double #0a0' } }, + { index: 4, style: { borderBottom: '1px double #0a0', borderRight: '1px double #0a0' } } + ] + } + ], + ranges: [ + { dataSource: data, startCell: 'A2' } + ], + columns: [ + { width: 100 }, + { width: 200 }, + { width: 110 }, + { width: 140 }, + { width: 90 } + ] + } + ]; + + return ( +
+ + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/datasource.jsx new file mode 100644 index 0000000000..ab5edc57dd --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/datasource.jsx @@ -0,0 +1,15 @@ +/** + * Cell formatting data source + */ +export let data = [ + { 'Order Id': 'SF1001', 'Product': 'Laptop Backpack (Blue)', 'Ordered Date': '02/14/2014', 'Ordered By': 'Rahul Sharma', 'Shipment': 'Delivered' }, + { 'Order Id': 'SF1002', 'Product': 'Oppo F1 S mobile back cover', 'Ordered Date': '06/11/2014', 'Ordered By': 'Adi Pathak', 'Shipment': 'Delivered' }, + { 'Order Id': 'SF1003', 'Product': 'Tupperware 4 bottle set', 'Ordered Date': '07/27/2014', 'Ordered By': 'Himani Arora', 'Shipment': 'Pending' }, + { 'Order Id': 'SF1004', 'Product': 'Tupperware Lunch box', 'Ordered Date': '11/21/2014', 'Ordered By': 'Samuel Samson', 'Shipment': 'Shipped' }, + { 'Order Id': 'SF1005', 'Product': 'Panosonic Hair Dryer', 'Ordered Date': '06/23/2014', 'Ordered By': 'Neha', 'Shipment': 'Cancelled' }, + { 'Order Id': 'SF1006', 'Product': 'Philips LED 2 bulb set', 'Ordered Date': '07/22/2014', 'Ordered By': 'Christine J', 'Shipment': 'Pending' }, + { 'Order Id': 'SF1007', 'Product': 'Moto G4 plus headphone', 'Ordered Date': '02/04/2014', 'Ordered By': 'Shiv Nagar', 'Shipment': 'Delivered' }, + { 'Order Id': 'SF1008', 'Product': 'Lakme Eyeliner Pencil', 'Ordered Date': '11/30/2014', 'Ordered By': 'Cherry', 'Shipment': 'Shipped' }, + { 'Order Id': 'SF1009', 'Product': 'Listerine mouthwash', 'Ordered Date': '07/09/2014', 'Ordered By': 'Siddartha Mishra', 'Shipment': 'Pending' }, + { 'Order Id': 'SF1010', 'Product': 'Protinex original', 'Ordered Date': '10/31/2014', 'Ordered By': 'Ravi Chugh', 'Shipment': 'Delivered' }, +]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/datasource.tsx new file mode 100644 index 0000000000..e3dd57d4b2 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/app/datasource.tsx @@ -0,0 +1,15 @@ +/** + * Cell formatting data source + */ +export let data: Object[] = [ + { 'Order Id': 'SF1001', 'Product': 'Laptop Backpack (Blue)', 'Ordered Date': '02/14/2014', 'Ordered By': 'Rahul Sharma', 'Shipment': 'Delivered' }, + { 'Order Id': 'SF1002', 'Product': 'Oppo F1 S mobile back cover', 'Ordered Date': '06/11/2014', 'Ordered By': 'Adi Pathak', 'Shipment': 'Delivered' }, + { 'Order Id': 'SF1003', 'Product': 'Tupperware 4 bottle set', 'Ordered Date': '07/27/2014', 'Ordered By': 'Himani Arora', 'Shipment': 'Pending' }, + { 'Order Id': 'SF1004', 'Product': 'Tupperware Lunch box', 'Ordered Date': '11/21/2014', 'Ordered By': 'Samuel Samson', 'Shipment': 'Shipped' }, + { 'Order Id': 'SF1005', 'Product': 'Panosonic Hair Dryer', 'Ordered Date': '06/23/2014', 'Ordered By': 'Neha', 'Shipment': 'Cancelled' }, + { 'Order Id': 'SF1006', 'Product': 'Philips LED 2 bulb set', 'Ordered Date': '07/22/2014', 'Ordered By': 'Christine J', 'Shipment': 'Pending' }, + { 'Order Id': 'SF1007', 'Product': 'Moto G4 plus headphone', 'Ordered Date': '02/04/2014', 'Ordered By': 'Shiv Nagar', 'Shipment': 'Delivered' }, + { 'Order Id': 'SF1008', 'Product': 'Lakme Eyeliner Pencil', 'Ordered Date': '11/30/2014', 'Ordered By': 'Cherry', 'Shipment': 'Shipped' }, + { 'Order Id': 'SF1009', 'Product': 'Listerine mouthwash', 'Ordered Date': '07/09/2014', 'Ordered By': 'Siddartha Mishra', 'Shipment': 'Pending' }, + { 'Order Id': 'SF1010', 'Product': 'Protinex original', 'Ordered Date': '10/31/2014', 'Ordered By': 'Ravi Chugh', 'Shipment': 'Delivered' }, +]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/border-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/index.html new file mode 100644 index 0000000000..8b6e016434 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/border-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/systemjs.config.js new file mode 100644 index 0000000000..9290509c4a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/border-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx new file mode 100644 index 0000000000..dd5a71bec1 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet'; + +import { chartData } from './datasource'; + +function App() { + const spreadsheetRef = React.useRef(null); + + const handleCreated = () => { + const spreadsheet = spreadsheetRef.current; + + // Insert a Column chart based on A1:B6 + spreadsheet.insertChart([{ + type: 'Column', // Column | Bar | Line | Pie | Doughnut | Area | Scatter ... + range: 'A1:B6', + top: 120, left: 20, height: 300, width: 500 + }]); + }; + + const removeById = () => { + const spreadsheet = spreadsheetRef.current; + spreadsheet.deleteChart('e_spreadsheet_chart_5'); // removes the chart with id "salesChart" + }; + + const removeActive = () => { + const spreadsheet = spreadsheetRef.current; + spreadsheet.deleteChart(); // no id → removes the currently selected chart + }; + + return ( +
+ + + + + + + + + + + + + + + + + + + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx new file mode 100644 index 0000000000..940a4ba0cc --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet'; + +import { chartData } from './datasource'; + +function App(): React.ReactElement { + const spreadsheetRef = React.useRef(null); + + const handleCreated = () => { + const spreadsheet = spreadsheetRef.current; + + // Insert a Column chart based on A1:B6 + spreadsheet.insertChart([{ + type: 'Column', // Column | Bar | Line | Pie | Doughnut | Area | Scatter ... + range: 'A1:B6', + top: 120, left: 20, height: 300, width: 500 + }]); + }; + + const removeById = () => { + const spreadsheet = spreadsheetRef.current!; + spreadsheet.deleteChart('e_spreadsheet_chart_5'); // removes the chart with id "salesChart" + }; + + const removeActive = () => { + const spreadsheet = spreadsheetRef.current!; + spreadsheet.deleteChart(); // no id → removes the currently selected chart + }; + + return ( +
+ + + + + + + + + + + + + + + + + + + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx new file mode 100644 index 0000000000..74cb625c1a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx @@ -0,0 +1,11 @@ +/** + * Chart data source + */ +export let chartData = [ + { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 }, + { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 }, + { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 }, + { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 }, + { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 } +]; + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx new file mode 100644 index 0000000000..49b42afcee --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx @@ -0,0 +1,11 @@ +/** + * Chart data source + */ +export let chartData: Object[] = [ + { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 }, + { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 }, + { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 }, + { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 }, + { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 } +]; + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/systemjs.config.js new file mode 100644 index 0000000000..ed680b54d8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx new file mode 100644 index 0000000000..6cc676e484 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; + +function App() { + const spreadsheetRef = React.useRef(null); + + const onCreated = () => { + // Insert an image to demonstrate deletion + spreadsheetRef.current.insertImage( + [ + { + src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png', + width: 320, + height: 220 + } + ], + 'A1' + ); + }; + + const onDeleteById = () => { + // Delete a known image by its overlay id and anchor cell. + spreadsheetRef.current.deleteImage('spreadsheet_1821633465_0_overlay_picture__5', 'A3'); + }; + + + return ( +
+ + + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx new file mode 100644 index 0000000000..3adaa160db --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; + +function App(): React.ReactElement { + const spreadsheetRef = React.useRef(null); + + const onCreated = (): void => { + // Insert an image to demonstrate deletion + spreadsheetRef.current.insertImage( + [ + { + src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png', + width: 320, + height: 220 + } + ], + 'A1' + ); + }; + + const onDeleteById = (): void => { + // Delete a known image by its overlay id and anchor cell. + spreadsheetRef.current.deleteImage('spreadsheet_1821633465_0_overlay_picture__5', 'A3'); + }; + + + return ( +
+ + + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/systemjs.config.js new file mode 100644 index 0000000000..ed680b54d8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx new file mode 100644 index 0000000000..3cdf655f86 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet'; +import { chartData } from './datasource'; + +function App() { + const spreadsheetRef = React.useRef(null); + + const handleCreated = () => { + const spreadsheet = spreadsheetRef.current; + + // Insert a Column chart based on A1:B6 + spreadsheet.insertChart([{ + type: 'Column', // Column | Bar | Line | Pie | Doughnut | Area | Scatter ... + range: 'A1:B6', + top: 120, left: 20, height: 300, width: 500 + }]); + spreadsheet.insertChart([{ + type: 'Pie', + range: 'A1:B6', + top: 120, left: 500, height: 300, width: 500 + }]); + spreadsheet.insertChart([{ + type: 'Area', + range: 'A1:B6', + top: 120, left: 1000, height: 300, width: 500 + }]); + }; + + return ( +
+ + + + + + + + + + + + + + + + + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx new file mode 100644 index 0000000000..5130a7e9b0 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet'; +import { chartData } from './datasource'; + +function App(): React.ReactElement { + const spreadsheetRef = React.useRef(null); + + const handleCreated = () => { + const spreadsheet = spreadsheetRef.current; + + // Insert a Column chart based on A1:B6 + spreadsheet.insertChart([{ + type: 'Column', // Column | Bar | Line | Pie | Doughnut | Area | Scatter ... + range: 'A1:B6', + top: 120, left: 20, height: 300, width: 500 + }]); + spreadsheet.insertChart([{ + type: 'Pie', + range: 'A1:B6', + top: 120, left: 500, height: 300, width: 500 + }]); + spreadsheet.insertChart([{ + type: 'Area', + range: 'A1:B6', + top: 120, left: 1000, height: 300, width: 500 + }]); + }; + + return ( +
+ + + + + + + + + + + + + + + + + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx new file mode 100644 index 0000000000..74cb625c1a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx @@ -0,0 +1,11 @@ +/** + * Chart data source + */ +export let chartData = [ + { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 }, + { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 }, + { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 }, + { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 }, + { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 } +]; + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx new file mode 100644 index 0000000000..49b42afcee --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx @@ -0,0 +1,11 @@ +/** + * Chart data source + */ +export let chartData: Object[] = [ + { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 }, + { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 }, + { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 }, + { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 }, + { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 } +]; + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/systemjs.config.js new file mode 100644 index 0000000000..ed680b54d8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx new file mode 100644 index 0000000000..db39e28a18 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; + +function App() { + const spreadsheetRef = React.useRef(null); + + const onCreated = () => { + // Insert a single image anchored at A1 with initial size + spreadsheetRef.current.insertImage( + [ + { + src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png', + width: 480, + height: 250 + } + ], + 'A1' + ); + }; + + return ( +
+ + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx new file mode 100644 index 0000000000..6971ed36e4 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; + +function App(): React.ReactElement { + const spreadsheetRef = React.useRef(null); + + const onCreated = (): void => { + // Insert a single image anchored at A1 with initial size + spreadsheetRef.current.insertImage( + [ + { + src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png', + width: 480, + height: 250 + } + ], + 'A1' + ); + }; + + return ( +
+ + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/systemjs.config.js new file mode 100644 index 0000000000..ed680b54d8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx new file mode 100644 index 0000000000..a38cdf8ccf --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations'; + +function App() { + +const SpreadsheetTabContent = () => { + return ( +
+
+ +
+
+ ); + }; + + return ( +
+
+

Spreadsheet in tab

+
+ +
+ + + ( +
+

Overview

+

Put general dashboard content here.

+
+ )} + /> + + ( +
+

Settings

+

Any settings or forms can go here.

+
+ )} + /> + + +
+
+ ); +}; + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx new file mode 100644 index 0000000000..e066f51ba9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations'; + +function App(): React.ReactElement { + +const SpreadsheetTabContent: any = () => { + return ( +
+
+ +
+
+ ); + }; + + return ( +
+
+

Spreadsheet in tab

+
+ +
+ + + ( +
+

Overview

+

Put general dashboard content here.

+
+ )} + /> + + ( +
+

Settings

+

Any settings or forms can go here.

+
+ )} + /> + + +
+
+ ); +}; + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js new file mode 100644 index 0000000000..2d4e880b4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx new file mode 100644 index 0000000000..49973c8192 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { useRef, useCallback } from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { DialogComponent } from '@syncfusion/ej2-react-popups'; + +function App() { + +const dialogRef = useRef(null); +const spreadsheetRef = useRef(null); +const openDialog = () => { + dialogRef.current.show(); +}; +const closeDialog = () => { + dialogRef.current.hide(); +}; +const onDialogOpen = useCallback(() => { + setTimeout(() => { + // Use resize method to recompute layout after panel becomes visible + spreadsheetRef.current.resize(); + }, 0); +}, []); + +return ( +
+
+

Spreadsheet inside Dialog

+
+ +
+
+ (dialogRef.current = dlg)} + isModal={true} + visible={false} + header="Spreadsheet" + showCloseIcon={true} + minHeight="80vh" + width="80vw" + height="80vh" + allowDragging={true} + closeOnEscape={true} + target={document.body} + overlayClick={closeDialog} + open={onDialogOpen} + > + + +
+); + +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx new file mode 100644 index 0000000000..9543892ea9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { useRef, useCallback } from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { DialogComponent } from '@syncfusion/ej2-react-popups'; + +function App(): React.ReactElement { + +const dialogRef = useRef(null); +const spreadsheetRef = useRef(null); +const openDialog = () => { + dialogRef.current.show(); +}; +const closeDialog = () => { + dialogRef.current.hide(); +}; +const onDialogOpen = useCallback(() => { + setTimeout(() => { + // Use resize method to recompute layout after panel becomes visible + spreadsheetRef.current.resize(); + }, 0); +}, []); + +return ( +
+
+

Spreadsheet inside Dialog

+
+ +
+
+ (dialogRef.current = dlg)} + isModal={true} + visible={false} + header="Spreadsheet" + showCloseIcon={true} + minHeight="80vh" + width="80vw" + height="80vh" + allowDragging={true} + closeOnEscape={true} + target={document.body as any} + overlayClick={closeDialog} + open={onDialogOpen} + > + + +
+); + +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js new file mode 100644 index 0000000000..88acf0b406 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx new file mode 100644 index 0000000000..a47f1354a6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { useCallback, useRef } from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations'; + +function App() { + const spreadsheetRef = useRef(null); + const onExpanded = useCallback((args) => { + setTimeout(() => { + // Use resize method to recompute layout after panel becomes visible + spreadsheetRef.current.resize(); + }, 0); + }, []); + + const spreadsheetContent = () => ( +
+ (spreadsheetRef.current = spreadsheet)} + id="spreadsheetInAccordion" + height="100%" + width="100%" + /> +
+ ); + + return ( +
+
+

Spreadsheet inside an Accordion

+
+
+ + + ( +
+

Overview

+

Place any introductory content here.

+
+ )} + /> + + ( +
+

Settings

+

Your forms and other controls here.

+
+ )} + /> + + +
+
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx new file mode 100644 index 0000000000..005eeffbac --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { useCallback, useRef } from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective, ExpandEventArgs } from '@syncfusion/ej2-react-navigations'; + +function App(): React.ReactElement { + const spreadsheetRef = useRef(null); + const onExpanded = useCallback((args: ExpandEventArgs) => { + setTimeout(() => { + // Use resize method to recompute layout after panel becomes visible + spreadsheetRef.current.resize(); + }, 0); + }, []); + + const spreadsheetContent = () => ( +
+ (spreadsheetRef.current = spreadsheet)} + id="spreadsheetInAccordion" + height="100%" + width="100%" + /> +
+ ); + + return ( +
+
+

Spreadsheet inside an Accordion

+
+
+ + + ( +
+

Overview

+

Place any introductory content here.

+
+ )} + /> + + ( +
+

Settings

+

Your forms and other controls here.

+
+ )} + /> + + +
+
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js new file mode 100644 index 0000000000..2d4e880b4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file From 4f39d865be23b97a7e6222859c03727a80085202 Mon Sep 17 00:00:00 2001 From: MOHANRAJSF4991 Date: Thu, 21 May 2026 17:56:16 +0530 Subject: [PATCH 2/9] 1027337: moved change into hotfix react UG --- .../React/images/spreadsheet-duplicate.png | Bin 0 -> 29575 bytes .../React/images/spreadsheet-move-tab.png | Bin 0 -> 16929 bytes .../Excel/Spreadsheet/React/ribbon.md | 56 ------------------ 3 files changed, 56 deletions(-) create mode 100644 Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-duplicate.png create mode 100644 Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-move-tab.png delete mode 100644 Document-Processing/Excel/Spreadsheet/React/ribbon.md diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-duplicate.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet-duplicate.png new file mode 100644 index 0000000000000000000000000000000000000000..ac119ef8811ca34f91c80c3fbcdf45b941eafb5d GIT binary patch literal 29575 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

60H;D@zmH$_pFh1uv` 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%0Ax z?s%odD|R@RWsMieN7Ptkbloh*<~o;~cmK{!!%zBNK#CbN3FOgA^lak}Lm-B9b#AgA zPmZa|-X}8fbm+WVne38+LbYpdOt+0c+Hqr<(uN;*#bd2GBzrd<-ZN1VTP6O$-*~TI zT?^kb)CrRe^WR2w+>ZKABYxDxQFc5O@e7`_XMxCoHqSPT)9I_6IZ_6^G!w=j3xdc5 zJKRPPFnSOr;_N;oh`iAcPyy10?}s!GhIeK_FM9C&k|NP;gt0FYbugjD!a5%=a^L!g z2x3B_vrJFH>MOwQldGAop}q5+isn%ppk=5k@^YJ-1`dAx(sV`5Djd&6Mh?nScd*)b&w1)^rT^K%98Ut zIqWg(DN|r}UVvEAqyYVzk)-(w8zs7qZYP4?cj9v@{ajZhNiVt#p`Dg^YP# z{zG!RMue|6P(EiD$F%|d0utm^0R&0S=GY~v>hSiJeB6V=purbGA|$f=dAij&tT{=* z)jh}iwz2hzxNLKipC_l9WDk_j&!Z#hd3-8`M;@u@)6Yqc`tBrXL!B$Yijr8D`!C|#I-*uD0x2N@0@VUhCWrk7YhcZpdJn37uJ)m z3jCCUE;~cbn(>FkV{pX+KM8du-a}gYe}B-2XGq^J=WmwbN%&I=foBh1Q~|+q|rytdw4^~X! z&TU?%wD#w!Lq9-84d`G<*h~Y3?TsA{iWC#+Dii<$#oqoX6Ws~CT)XB=ISt-jI{>{Y zJB%Lx{$XdbB%o!~^j!$@F%V^4N?{>KlLurlVud@^t*)mw_aad8rCJyg#oWz%IMZWz z@R-Jy1Ywlx0_4v!p`rwB6s>P`{WtG*_$@U==qtE zI^u7l{)gg);bI9gKlI~SqHP4wdtisXQRa@_a93K$8|YQ&^8uLUBq(e(jn%$>>l54! z5vn3tvhaQh`A=E#&Y#WKL1lHH4l{NrG6aKS*3chX6lzp>x!m?$WeujSE0-N*e!g+; TlR9)&9igpmpjM=E^U41QvKN(f literal 0 HcmV?d00001 diff --git a/Document-Processing/Excel/Spreadsheet/React/ribbon.md b/Document-Processing/Excel/Spreadsheet/React/ribbon.md deleted file mode 100644 index a8dcf14d3f..0000000000 --- a/Document-Processing/Excel/Spreadsheet/React/ribbon.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -layout: post -title: Ribbon in React Spreadsheet component | Syncfusion -description: Learn here all about Ribbon in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. -control: Ribbon -platform: document-processing -documentation: ug ---- - -# Ribbon in React Spreadsheet component - -It helps to organize a spreadsheet’s features into a series of tabs. By clicking the expand or collapse icon, you can expand or collapse the ribbon toolbar dynamically. - -## Ribbon Customization - -You can customize the ribbon using the following methods, - -| Method | Action | -|-------|---------| -| [`hideRibbonTabs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hideribbontabs) | Used to show or hide the existing ribbon tabs. | -| [`enableRibbonTabs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enableribbontabs) | Used to enable or disable the existing ribbon tabs. | -| [`addRibbonTabs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addribbontabs) | Used to add custom ribbon tabs. | -| [`hideToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hidetoolbaritems) | Used to show or hide the existing ribbon toolbar items. | -| [`enableToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enabletoolbaritems) | Used to enable or disable the specified toolbar items. | -| [`addToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addtoolbaritems) | Used to add the custom items in ribbon toolbar. | -| [`hideFileMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hidefilemenuitems) | Used to show or hide the ribbon file menu items. | -| [`enableFileMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enablefilemenuitems) | Used to enable or disable file menu items. | -| [`addFileMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addfilemenuitems) | Used to add custom file menu items. | - -The following code example shows the usage of ribbon customization. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/ribbon-cs1/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/ribbon-cs1/app/app.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/spreadsheet/react/ribbon-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/spreadsheet/react/ribbon-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "/document-processing/code-snippet/spreadsheet/react/ribbon-cs1" %} - -## Note - -You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to knows how to present and manipulate data. - -## See Also - -* [Worksheet](./worksheet) -* [Rows and columns](./rows-and-columns) From bad4efc54b11b3283ae402aecb7423a6d39cd4f6 Mon Sep 17 00:00:00 2001 From: MOHANRAJSF4991 Date: Thu, 21 May 2026 18:24:17 +0530 Subject: [PATCH 3/9] 1027337: updated the toc file based on dev for move dev to hotfix --- Document-Processing-toc.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index d6e00e49b6..9fd4f91835 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5570,7 +5570,13 @@

  • Context Menu
  • Formulas
  • Data Validation
    • -
  • Formatting
    • +
  • Formatting + +
  • Illustrations
  • Rows and Columns
  • Sorting
    • @@ -5584,7 +5590,6 @@
  • Protection
  • Find and Replace
  • Undo and Redo
    • -
  • Ribbon
  • Print
  • Performance Best Practices
  • Globalization
    • @@ -5592,6 +5597,8 @@
  • Keyboard Shortcuts
  • Freeze Panes
  • Templates
    • +
  • Charts and Visualizations
    • +
  • Images and Illustrations
  • User Interface Customization
  • Mobile Responsiveness
    • From 8955966d521f973ea3c164d7e9f51b09ec255940 Mon Sep 17 00:00:00 2001 From: Babu <119495690+babu-periyasamy@users.noreply.github.com> Date: Fri, 22 May 2026 00:55:21 +0530 Subject: [PATCH 4/9] 1027337: Fix link to getting started document in deployment guide --- .../deploy-spreadsheet-server-to-aws-eks-using-docker.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md b/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md index e3c2c49e81..29e1aac6ea 100644 --- a/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md +++ b/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md @@ -115,7 +115,7 @@ kubectl get svc spreadsheet-server-service **Step 5:** Configure the React client -Start by following the steps provided in this [link](../getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. Once the Service reports an external address (e.g., a1b2c3d4e5f6-1234567890.us-east-1.elb.amazonaws.com), update the [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) properties of your React Spreadsheet component: +Start by following the steps provided in this [link](../getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. Once the Service reports an external address (e.g., a1b2c3d4e5f6-1234567890.us-east-1.elb.amazonaws.com), update the [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) properties of your React Spreadsheet component: ```js @@ -138,4 +138,4 @@ For more information on deploying Spreadsheet docker image in Amazon EKS kindly ## See Also * [Docker Image Overview in React Spreadsheet](./spreadsheet-server-docker-image-overview) * [Publish Spreadsheet Server to Azure App Service using Visual Studio](./publish-spreadsheet-server-to-azure-using-visual-studio) -* [Deploy Spreadsheet Docker to Azure App Service using Azure CLI](./deploy-spreadsheet-docker-to-azure-using-azure-cli) \ No newline at end of file +* [Deploy Spreadsheet Docker to Azure App Service using Azure CLI](./deploy-spreadsheet-docker-to-azure-using-azure-cli) From d2a92b11955bc400c3eff534711f25262812a479 Mon Sep 17 00:00:00 2001 From: Babu <119495690+babu-periyasamy@users.noreply.github.com> Date: Fri, 22 May 2026 00:56:35 +0530 Subject: [PATCH 5/9] 1027337: Fix link to getting started page in documentation --- ...publish-spreadsheet-server-to-azure-using-visual-studio.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md b/Document-Processing/Excel/Spreadsheet/React/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md index 1c50b61223..ce6559add7 100644 --- a/Document-Processing/Excel/Spreadsheet/React/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md +++ b/Document-Processing/Excel/Spreadsheet/React/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md @@ -52,6 +52,6 @@ https://XXXXXXXXXX.azurewebsites.net openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open" saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save ``` -Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md) +Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started) -For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file +For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. From 1896ee048c0010501d2550423fb0ee9755d520a6 Mon Sep 17 00:00:00 2001 From: Babu Periyasamy Date: Fri, 22 May 2026 01:21:32 +0530 Subject: [PATCH 6/9] 1027337: Addressed some corrections. --- Document-Processing-toc.html | 11 +- .../React/charts-and-visualizations.md | 2 +- .../Excel/Spreadsheet/React/formatting.md | 2 +- .../Excel/Spreadsheet/React/illustrations.md | 243 ------------------ .../React/images-and-illustrations.md | 2 +- 5 files changed, 8 insertions(+), 252 deletions(-) delete mode 100644 Document-Processing/Excel/Spreadsheet/React/illustrations.md diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 9fd4f91835..644e033efa 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5574,10 +5574,11 @@ - -
  • Illustrations
    • + +
  • Images and Illustrations
    • +
  • Charts and Visualizations
  • Rows and Columns
  • Sorting
  • Filtering
    • @@ -5596,9 +5597,7 @@
  • Accessibility
  • Keyboard Shortcuts
  • Freeze Panes
    • -
  • Templates
    • -
  • Charts and Visualizations
    • -
  • Images and Illustrations
    • +
  • Templates
  • User Interface Customization
    • Create Custom Cell Templates
      • diff --git a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md index 87fc187316..d38ca11802 100644 --- a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md +++ b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md @@ -271,6 +271,6 @@ The following features have some limitations in the Chart: * Corner resizing option in chart element. ## See Also -* [Images](./images-and-illustrations.md) +* [Images](./images-and-illustrations) * [Formatting](./formatting) * [Rows and columns](./rows-and-columns) diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting.md index f6260e64bf..a9d2bc11bb 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting.md @@ -29,4 +29,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet- - [Hyperlink](./link) - [Sorting](./sort) - [Filtering](./filter) -- [`Ribbon customization`](./ribbon#ribbon-customization) +- [`Ribbon customization`](./ui-customization) diff --git a/Document-Processing/Excel/Spreadsheet/React/illustrations.md b/Document-Processing/Excel/Spreadsheet/React/illustrations.md deleted file mode 100644 index e5d75e4694..0000000000 --- a/Document-Processing/Excel/Spreadsheet/React/illustrations.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -layout: post -title: Illustrations in React Spreadsheet component | Syncfusion -description: Learn here all about Illustrations in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. -control: Illustrations -platform: document-processing -documentation: ug ---- - -# Illustrations in React Spreadsheet component - -Illustrations allow you to insert images, shapes, and graphic objects into the Essential® JS 2 Spreadsheet. This feature helps to enhance the visual presentation of your worksheet by embedding graphical elements alongside your data. - -## Image - -Adding images to a spreadsheet can enhance the visual appeal and help to convey information more clearly. - ->* The default value for the `allowImage` property is `true`. - -### Insert Image - -You can insert an image by using one of the following ways: - -* Select the **Insert** tab in the Ribbon toolbar, and then choose the **Image** option. -* Use the `insertImage` method programmatically. - -The available parameters in the `insertImage` method are, - -| Parameter | Type | Description | -|-----|------|----| -| images | `ImageModel` | Specifies the options to insert image in spreadsheet. | -| range(optional) | `string` | Specifies the range in spreadsheet. | - -The available arguments in `ImageModel` are: - -| Property | Description | -|----------|-------------| -| [src](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#src) | Specifies the image source. | -| [id](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#id) | Specifies the image element id. | -| [height](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#height) | Specifies the height of the image. | -| [width](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#width) | Specifies the width of the image. | -| [top](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#top) | Specifies the top position of the image. | -| [left](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#left) | Specifies the left side of the image. | ->* In a spreadsheet, you can add many types of image files, including IMAGE, JPG, PNG, GIF, and JPEG formats. - -### Delete Image - -* To delete an image, select the image and press the **Delete** key. -* You can also use the `deleteImage` method programmatically. - -The available parameters in the `deleteImage` method are: - -| Parameter | Type | Description | -|-----|------|----| -| id | `string` | Specifies the id of the image element to be deleted. | -| range(optional) | `string` | Specifies the range in spreadsheet. | - -### Image Customization - -The image feature allows you to view and insert an image in a spreadsheet. You can customize the image by resizing it to change the height and width, and by moving it to another position within the worksheet. - -#### Height and Width - -* You can change the height and width of the image by resizing. -* Use the `height` and `width` property in the `insertImage` method programmatically. - -#### Top and Left - -* You can change the position of the image by drag and drop. -* Use the `top` and `left` property in the `insertImage` method programmatically. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/image-cs1/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/image-cs1/app/app.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/spreadsheet/react/image-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/spreadsheet/react/image-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "/document-processing/code-snippet/spreadsheet/react/image-cs1" %} - -### Limitations of Image - -The following features have some limitations in Image: - -* Corner resizing option in the image element. -* Copy and paste the external image. - -## Chart - -A chart is a graphical representation of data, that organizes and represents a set of numerical or qualitative data. It mostly displays the selected range of data in terms of `x`-axis and `y`-axis. You can use the [`allowChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowchart) property to enable or disable the chart functionality. - ->* The default value for the [`allowChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowchart) property is `true`. - -### Types of chart - -The following types of charts are available in the Spreadsheet. - ->* Column Chart ->* Bar Chart ->* Area Chart ->* Line Chart ->* Pie Chart ->* Scatter Chart - -### Insert Chart - -You can insert a chart by using one of the following ways, - -* Select the chart icon in the Ribbon toolbar under the **Insert** tab. -* Use the [`insertChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertchart) method programmatically. - -The available parameter in the [`insertChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertchart) method is, - -| Parameter | Type | Description | -|-----|------|----| -| chart | `ChartModel` | Specifies the options to insert a chart in the spreadsheet. | - -The available arguments in the `ChartModel` are: - -| Property | Type | Description | -|----------|------|-------------| -| [id](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#id) | `string` | Specifies the chart element id. | -| [type](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#type) | `ChartType` | Specifies the type of chart. | -| [theme](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#theme) | `ChartTheme` | Specifies the theme of the chart. | -| [range](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#range) | `string` | Specifies the selected or specified data range for the chart. | -| [isSeriesInRows](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#isseriesinrows) | `boolean` | Specifies whether series are organized in rows (true) or columns (false). | -| [title](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#title) | `string` | Specifies the title of the chart. | -| [width](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#width) | `number` | Specifies the width of the chart. | -| [height](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#height) | `number` | Specifies the height of the chart. | -| [dataLabelSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#datalabelsettings) | `DataLabelSettingsModel` | Specifies the data label settings for the series. | -| [markerSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#markersettings) | `MarkerSettingsModel` | Specifies the marker settings for the series (applicable to line charts). | -| [legendSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#legendsettings) | `LegendSettingsModel` | Specifies options for customizing the chart legend. | -| [primaryXAxis](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#primaryxaxis) | `AxisModel` | Specifies options to configure the horizontal axis. | -| [primaryYAxis](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel#primaryyaxis) | `AxisModel` | Specifies options to configure the vertical axis. | - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/chart-cs2/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/chart-cs2/app/app.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/spreadsheet/react/chart-cs2/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/spreadsheet/react/chart-cs2/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "/document-processing/code-snippet/spreadsheet/react/chart-cs2" %} - -### Delete Chart - -* To delete a chart, simply select the chart and press the **Delete** key. -* You can also use the [`deleteChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#deletechart) method programmatically. - -The available parameter in the [`deleteChart`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#deletechart) method is, - -| Parameter | Type | Description | -|-----|------|----| -| id | `string` | Specifies the id of the chart element to be deleted. | - -### Chart Customization - -The chart feature allows you to insert and manage charts in a spreadsheet with flexible customization options. You can adjust both the size and position of charts to better fit your worksheet layout: - -* **Resize** – Change the height and width of the chart by dragging its edges or corners. -* **Reposition** – Move the chart to a different location in the worksheet using drag-and-drop. - -These customization options make it easy to organize charts alongside your data for clearer visualization and presentation. - - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/chart-cs1/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/chart-cs1/app/app.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/spreadsheet/react/chart-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/spreadsheet/react/chart-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "/document-processing/code-snippet/spreadsheet/react/chart-cs1" %} - -#### Customization of line chart markers -You can customize line chart markers to improve their appearance and readability. By using the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#actionbegin) event, you can modify properties such as: - -* **Shape** – Change the marker shape (e.g., circle, square, diamond). -* **Size** – Adjust the marker size for better visibility. -* **Fill Color** – Apply a custom fill color to highlight data points. -* **Border** – Customize the border style and color for distinction. - -In the following example, the marker appearance (shape and size) is modified while creating the line chart through UI interaction, demonstrating how flexible customization can enhance chart visualization. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/chart-cs3/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/chart-cs3/app/app.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/spreadsheet/react/chart-cs3/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/spreadsheet/react/chart-cs3/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "/document-processing/code-snippet/spreadsheet/react/chart-cs3" %} - -### Limitations of Chart - -The following features have some limitations in the Chart: - -* Insert row/delete row between the chart data source will not reflect the chart. -* Copy/paste into the chart data source will not reflect the chart. -* Corner resizing option in chart element. - -## Note - -You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to knows how to present and manipulate data. - -## See Also - -* [Formatting](./formatting) -* [Rows and columns](./rows-and-columns) -* [Hyperlink](./link) -* [Sorting](./sort) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md b/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md index 9c2062a081..1cf80b06ff 100644 --- a/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md +++ b/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md @@ -196,6 +196,6 @@ Enables or disables image functionality in the Spreadsheet. * Corner resizing option is not available in the image element. ## See Also -* [Charts](./charts-and-visualizations.md) +* [Charts](./charts-and-visualizations) * [Formatting](./formatting) * [Rows and columns](./rows-and-columns) From aa1ee50d875400c490975f74153d1f5ecaf90626 Mon Sep 17 00:00:00 2001 From: Babu Periyasamy Date: Fri, 22 May 2026 01:23:33 +0530 Subject: [PATCH 7/9] 1027337: Content modified. --- .../Excel/Spreadsheet/React/how-to/existing-react-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md index 3b2123440f..81c44d516d 100644 --- a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md @@ -32,7 +32,7 @@ The following sample shows how to render the Spreadsheet inside the Tab componen {% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1" %} -### Use spreadsheet inside Dialog +### Use Spreadsheet inside Dialog If the Spreadsheet is placed inside a dialog (for example, a Syncfusion Dialog), render or initialize the Spreadsheet only within the dialog’s open event. The parent container must be visible in the DOM for the Spreadsheet to correctly measure and compute its layout. From e4da8ed4ca1cfeed99a2dae3bbc1ed4dc5e0076d Mon Sep 17 00:00:00 2001 From: Babu Periyasamy Date: Fri, 22 May 2026 01:27:54 +0530 Subject: [PATCH 8/9] 1027337: Content modified. --- Document-Processing/Excel/Spreadsheet/React/formatting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting.md index a9d2bc11bb..cec0a991fd 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting.md @@ -29,4 +29,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet- - [Hyperlink](./link) - [Sorting](./sort) - [Filtering](./filter) -- [`Ribbon customization`](./ui-customization) +- [Ribbon customization](./ui-customization) From fb35ee0921fa8b7823bf9d3b31ff04001c300f86 Mon Sep 17 00:00:00 2001 From: Babu Periyasamy Date: Fri, 22 May 2026 01:42:21 +0530 Subject: [PATCH 9/9] 1027337: File reference updated. --- .../deploy-spreadsheet-docker-to-azure-using-azure-cli.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md b/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md index 1ca888caed..0295ef68a9 100644 --- a/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md +++ b/Document-Processing/Excel/Spreadsheet/React/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md @@ -86,6 +86,6 @@ Once deployed, your app will be live at https://XXXXXXXXXX.azurewebsites.net. openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open" saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save ``` -Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md) +Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started) For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file