diff --git a/Document-Processing/Excel/Spreadsheet/React/accessibility.md b/Document-Processing/Excel/Spreadsheet/React/accessibility.md index 586eb3bb1..46986dcc2 100644 --- a/Document-Processing/Excel/Spreadsheet/React/accessibility.md +++ b/Document-Processing/Excel/Spreadsheet/React/accessibility.md @@ -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 3720d6feb..4e0ff9cee 100644 --- a/Document-Processing/Excel/Spreadsheet/React/cell-range.md +++ b/Document-Processing/Excel/Spreadsheet/React/cell-range.md @@ -15,13 +15,13 @@ To get start quickly with Cell Range, you can check on this video: {% youtube "https://www.youtube.com/watch?v=izgXkfzUMBQ" %} -## Wrap text +## Wrap Text in Cells Wrap text allows you to display large content as multiple lines in a single cell. By default, the wrap text support is enabled. Use the [`allowWrap`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowwrap) property to enable or disable the wrap text support in spreadsheet. Wrap text can be applied or removed to a cell or range of cells in the following ways, -* Using the `wrap` property in `cell`, you can enable or disable wrap text to a cell at initial load. +* Using the [wrap](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#wrap) property in `cell`, you can enable or disable wrap text to a cell at initial load. * Select or deselect wrap button from ribbon toolbar to apply or remove the wrap text to the selected range. * Using the [`wrap`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#wrap) method, you can apply or remove the wrap text once the component is loaded. @@ -51,13 +51,13 @@ The following features have some limitations in wrap text: * Sorting with wrap text applied data. * Merge with wrap text -## Merge cells +## Merge and Span Cells Merge cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, top-left most cell data will be the data for the merged cell. By default, the merge cells option is enabled. Use [`allowMerge`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowmerge) property to enable or disable the merge cells option in spreadsheet. You can merge the range of cells in the following ways, -* Set the `rowSpan` and `colSpan` property in `cell` to merge the number of cells at initial load. +* Set the [rowSpan](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#rowspan) and [colSpan](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#colspan) property in `cell` to merge the number of cells at initial load. * Select the range of cells and apply merge by selecting the desired option from ribbon toolbar. * Use [`merge`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#merge) method to merge the range of cells, once the component is loaded. @@ -98,12 +98,12 @@ The following features have some limitations in Merge: ## Auto Fill -Auto Fill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use `allowAutoFill` property to enable/disable the auto fill support. You can also use `showFillOptions` property to enable/disable the fill option and `fillType` property to change the default auto fill option which is available in `autoFillSettings`. +Auto Fill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use [allowAutoFill](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowautofill) property to enable/disable the auto fill support. You can also use [showFillOptions](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/autofillsettings#showfilloptions) property to enable/disable the fill option and [fillType](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/autofillsettings#filltype) property to change the default auto fill option which is available in [autoFillSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofillsettings). 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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method programmatically. The available parameters in `autoFill()` method are, @@ -121,14 +121,14 @@ In Auto Fill we have following options, * Fill Formatting Only * Fill Without Formatting ->* The default auto fill option is “FillSeries” which can be referred from `fillType` property. +>* The default auto fill option is “FillSeries” which can be referred from [fillType](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/autofillsettings#filltype) property. ### Copy Cells To copy the selected cell content to the adjacent cells. You can do this by one of the following ways, * Using fill handle to select the adjacent cell range and “Copy Cells” option in “AutoFillOptions” menu to fill the adjacent cells. -* Using “CopyCells” as fill type in `autoFill` method to fill the adjacent cells. +* Using “CopyCells” as fill type in [autoFill](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method to fill the adjacent cells. ### Fill Series @@ -137,7 +137,7 @@ To fill the series of numbers, characters, or dates based on selected cell conte You can do this by one of the following ways, * Using fill handle to select the adjacent cell range and “Fill Series” option in “AutoFillOptions” menu to fill the adjacent cells. -* Using “FillSeries” as fill type in `autoFill` method to fill the adjacent cells. +* Using “FillSeries” as fill type in [autoFill](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method to fill the adjacent cells. ### Fill Formatting Only @@ -146,7 +146,7 @@ To fill the cell style and number formatting based on the selected cell content You can do this by one of the following ways, * Using fill handle to select the adjacent cell range and “Fill Formatting Only” option in “AutoFillOptions” menu to fill the adjacent cells. -* Using “FillFormattingOnly” as fill type in `autoFill` method to fill the adjacent cells. +* Using “FillFormattingOnly” as fill type in [autoFill](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method to fill the adjacent cells. ### Fill Without Formatting @@ -155,9 +155,9 @@ To fill series of numbers, characters, or dates based on the selected cells to t You can do this by one of the following ways, * Using fill handle to select the adjacent cell range and “Fill Without Formatting” option in “AutoFillOptions” menu to fill the adjacent cells. -* Using “FillWithoutFormatting” as fill type in `autoFill` method to fill the adjacent cells. +* Using “FillWithoutFormatting” as fill type in [autoFill](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofill) method to fill the adjacent cells. -In the following sample, you can enable/disable the fill option on the button click event by using the `showFillOptions` property in `autoFillSettings`. +In the following sample, you can enable/disable the fill option on the button click event by using the [showFillOptions](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/autofillsettings#showfilloptions) property in [autoFillSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#autofillsettings). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -183,16 +183,16 @@ The following features have some limitations in Autofill: * Flash Fill option in Autofill feature. * Fill with Conditional Formatting applied cells. -## Clear +## Clearing Cell Data and Formatting 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. -### Apply Clear Feature +### Apply Cell 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. +* 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, @@ -224,9 +224,21 @@ Clear the cell contents and formats in the Spreadsheet document by using the [cl {% previewsample "/document-processing/code-snippet/spreadsheet/react/clear-cs1" %} +## Quick Lookup + +- `allowWrap` - enables or disables wrap‑text support globally for the spreadsheet. +- `wrap(range, isWrap)` - applies or removes wrap text for the specified cell or range after the sheet is loaded. +- `allowDataValidation` - turns data‑validation features on or off for the spreadsheet. +- `addDataValidation(rule, range)` - applies a data‑validation rule to the given range (list, number, text length, date, etc.). +- `removeDataValidation(range)` - removes validation rules from the selected cell but keeps existing values. +- `addInvalidHighlight(range)` - highlights all cells that contain values violating their validation rules. +- `removeInvalidHighlight(range)` - clears the highlight applied to invalid cells without removing the rules. +- `allowAutoFill` - enables or disables the Auto Fill feature and fill‑handle interaction. +- `autoFill(fillRange, dataRange, direction, fillType)` - fills a target range by copying, generating series, or applying styles based on the source range. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/clipboard.md b/Document-Processing/Excel/Spreadsheet/React/clipboard.md index dc24e7f00..5b750da09 100644 --- a/Document-Processing/Excel/Spreadsheet/React/clipboard.md +++ b/Document-Processing/Excel/Spreadsheet/React/clipboard.md @@ -7,13 +7,13 @@ platform: document-processing documentation: ug --- -# Clipboard in React Spreadsheet component +# Clipboard actions in React Spreadsheet component -The Spreadsheet provides support for the clipboard operations (cut, copy, and paste). Clipboard operations can be enabled or disabled by setting the [`enableClipboard`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enableclipboard) property in Spreadsheet. +The Spreadsheet provides support for the clipboard operations (cut, copy, and paste). Clipboard operations can be enabled or disabled by setting the [`enableClipboard`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#enableclipboard) property in Spreadsheet. -> By default, the `enableClipboard` property is true. +> By default, the `enableClipboard` property is `true`. -## Cut +## Cut Operation It is used to cut the data from selected range of cells, rows or columns in a spreadsheet and make it available in the clipboard. @@ -24,9 +24,9 @@ Cut can be done in one of the following ways. * Using Cut button in the Ribbon’s HOME tab to perform cut operation. * Using Cut option in the Context Menu. * Using `Ctrl + X` | `Command + X` keyboard shortcut. -* Using the [`cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#cut) method. +* Using the [`cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cut) method. -## Copy +## Copy Operation It is used to copy the data from selected range of cells, rows or columns in a spreadsheet and make it available in the clipboard. @@ -37,9 +37,9 @@ Copy can be done in one of the following ways. * Using Copy button in the Ribbon’s HOME tab to perform copy operation. * Using Copy option in the Context Menu. * Using `Ctrl + C` | `Command + C` keyboard shortcut. -* Using the [`copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#copy) method. +* Using the [`copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#copy) method. -## Paste +## Paste Operation It is used to paste the clipboard data to the selected range, rows or columns. You have the following options in Paste, @@ -55,7 +55,7 @@ Paste can be done in one of the following ways. * Using Paste button in the Ribbon’s HOME tab to perform paste operation. * Using Paste option in the Context Menu. * Using `Ctrl + V` | `Command + V` keyboard shortcut. -* Using the [`paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) method. +* Using the [`paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) method. > If you use the Keyboard shortcut key for cut (`Ctrl + X`) / copy (`Ctrl + C`) from other sources, you should use `Ctrl + V` shortcut while pasting into the spreadsheet. @@ -78,7 +78,7 @@ Paste can be done in one of the following ways. ## Prevent the paste functionality -The following example shows, how to prevent the paste action in spreadsheet. In [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#actionbegin) event, you can set `cancel` argument as false in paste request type. +The following example shows, how to prevent the paste action in spreadsheet. In [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#actionbegin) event, you can set `cancel` argument as false in paste request type. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -97,7 +97,7 @@ The following example shows, how to prevent the paste action in spreadsheet. In {% previewsample "/document-processing/code-snippet/spreadsheet/react/clipboard-cs2" %} -## Limitations +## Limitations of Clipboard actions * External clipboard is not fully supported while copying data from another source and pasting into a spreadsheet, it only works with basic supports (Values, Number, cell, and Text formatting). * If you copy =SUM(A2,B2) and paste, the formula reference will change depending on the pasted cell address but we don't have support for nested formula(formula reference will be same). @@ -106,4 +106,4 @@ The following example shows, how to prevent the paste action in spreadsheet. In ## 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. \ No newline at end of file +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 know how to present and manipulate data. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/comment.md b/Document-Processing/Excel/Spreadsheet/React/comment.md index 90cc3ce02..526275407 100644 --- a/Document-Processing/Excel/Spreadsheet/React/comment.md +++ b/Document-Processing/Excel/Spreadsheet/React/comment.md @@ -15,7 +15,7 @@ Cells with comment display a small comment indicator; hover to preview the comme ![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 user identity. To tag new comments and replies with an author name, set the [author](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#author) property when initializing the Spreadsheet. ```ts import * as React from 'react'; @@ -32,7 +32,7 @@ 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` property is not set, "Guest User" will be displayed as the author for comment and replies by default. ## Adding a comment You can add a **comment** to a cell in several ways: @@ -40,7 +40,7 @@ You can add a **comment** to a cell in several ways: * **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. + * 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 via code-behind during initial load by associating 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. @@ -128,7 +128,7 @@ The **"Comments" review pane** provides a centralized view of all comments in th You can show or hide the "Comments" review pane using: * **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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#showcommentspane) property to true when initializing the Spreadsheet. By default, this property is **false**. ![Show comments in Spreadsheet](./images/spreadsheet_show_comments.gif) @@ -170,7 +170,7 @@ You can bind **comment thread** to cells at initial load by providing a `comment - **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. +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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#showcommentspane) property, and comments are added using [updateCell](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#updatecell) method in the `created` event. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/context-menu.md b/Document-Processing/Excel/Spreadsheet/React/context-menu.md index aeb1b1bb3..03c9a0ba8 100644 --- a/Document-Processing/Excel/Spreadsheet/React/context-menu.md +++ b/Document-Processing/Excel/Spreadsheet/React/context-menu.md @@ -9,7 +9,7 @@ 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. +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 default value for the `enableContextMenu` property is `true`. @@ -19,13 +19,13 @@ Please find the table below for default context menu items and their actions. | Context Menu items | Action | |-------|---------| -| [`Cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#cut) | Cut the selected cells data to the clipboard, you can select a cell where you want to move the data. | -| [`Copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#copy) | Copy the selected cells data to the clipboard, so that you can paste it to somewhere else. | -| [`Paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | Paste the data from clipboard to spreadsheet. | -| [`Paste Special`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from
clipboard to spreadsheet. | -| [`Filter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#filter) | Perform filtering to the selected cells based on an active cell’s value. | -| [`Sort`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#sort) | Perform sorting to the selected range of cells by ascending or descending. | -| [`Hyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hyperlink) | Create a link in the spreadsheet to navigate to web links or cell reference within the sheet or other sheets
in the Spreadsheet. | +| [`Cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cut) | Cut the selected cells data to the clipboard, you can select a cell where you want to move the data. | +| [`Copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#copy) | Copy the selected cells data to the clipboard, so that you can paste it to somewhere else. | +| [`Paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) | Paste the data from clipboard to spreadsheet. | +| [`Paste Special`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from
clipboard to spreadsheet. | +| [`Filter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#filter) | Perform filtering to the selected cells based on an active cell’s value. | +| [`Sort`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sort) | Perform sorting to the selected range of cells by ascending or descending. | +| [`Hyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hyperlink) | Create a link in the spreadsheet to navigate to web links or cell reference within the sheet or other sheets
in the Spreadsheet. | ## Context Menu Items in Row Header / Column Header @@ -33,14 +33,14 @@ Please find the table below for default context menu items and their actions. | Context Menu items | Action | |-------|---------| -| [`Cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#cut) | Cut the selected row/column header data to the clipboard, you can select a cell where you want to move the data. | -| [`Copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#copy) | Copy the selected row/column header data to the clipboard, so that you can paste it to somewhere else. | -| [`Paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | Paste the data from clipboard to spreadsheet. | -| [`Paste Special`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from
clipboard to spreadsheet. | -| [`Insert Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertrow) / [`Insert Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertcolumn) | Insert new rows or columns into the worksheet. | -| [`Delete Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#delete) / [`Delete Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#delete) | Delete existing rows or columns from the worksheet. | -| [`Hide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hiderow) / [`Hide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hidecolumn) | Hide the rows or columns. | -| [`UnHide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hiderow) / [`UnHide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hidecolumn) | Show the hidden rows or columns. | +| [`Cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cut) | Cut the selected row/column header data to the clipboard, you can select a cell where you want to move the data. | +| [`Copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#copy) | Copy the selected row/column header data to the clipboard, so that you can paste it to somewhere else. | +| [`Paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) | Paste the data from clipboard to spreadsheet. | +| [`Paste Special`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) | `Values` - Paste the data values from clipboard to spreadsheet. `Formats` - Paste the data formats from
clipboard to spreadsheet. | +| [`Insert Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertrow) / [`Insert Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertcolumn) | Insert new rows or columns into the worksheet. | +| [`Delete Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#delete) / [`Delete Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#delete) | Delete existing rows or columns from the worksheet. | +| [`Hide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hiderow) / [`Hide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hidecolumn) | Hide the rows or columns. | +| [`UnHide Rows`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hiderow) / [`UnHide Columns`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hidecolumn) | Show the hidden rows or columns. | ## Context Menu Items in Pager @@ -51,10 +51,10 @@ Please find the table below for default context menu items and their actions. | `Insert` | Insert a new worksheet in front of an existing worksheet in the spreadsheet. | | `Delete` | Delete the selected worksheet from the spreadsheet. | | `Rename` | Rename the selected worksheet. | -| [`Protect Sheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#protectsheet) | Prevent unwanted changes from others by limiting their ability to edit. | -| [`Hide`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#hide) |Hide the selected worksheet. | +| [`Protect Sheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#protectsheet) | Prevent unwanted changes from others by limiting their ability to edit. | +| [`Hide`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#hide) |Hide the selected worksheet. | -## Context Menu Customization +## Customizing Context Menu You can perform the following context menu customization options in the spreadsheet @@ -62,9 +62,9 @@ You can perform the following context menu customization options in the spreadsh * Remove Context Menu Items * Enable/Disable Context Menu Items -### Add Context Menu Items +### Add Custom Context Menu Items -You can add the custom items in context menu using the [`addContextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#addcontextmenuitems) in `contextmenuBeforeOpen` event +You can add the custom items in context menu using the [`addContextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#addcontextmenuitems) in [contextmenuBeforeOpen](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#contextmenubeforeopen) event In this demo, Custom Item is added after the Paste item in the context menu. @@ -81,7 +81,7 @@ In this demo, Custom Item is added after the Paste item in the context menu. ### Remove Context Menu Items -You can remove the items in context menu using the [`removeContextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#removecontextmenuitems) in `contextmenuBeforeOpen` event +You can remove the items in context menu using the [`removeContextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#removecontextmenuitems) in [contextmenuBeforeOpen](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#contextmenubeforeopen) event In this demo, Insert Column item has been removed from the row/column header context menu. @@ -98,7 +98,7 @@ In this demo, Insert Column item has been removed from the row/column header con ### Enable/Disable Context Menu Items -You can enable/disable the items in context menu using the [`enableContextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enablecontextmenuitems) in `contextmenuBeforeOpen` event +You can enable/disable the items in context menu using the [`enableContextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#enablecontextmenuitems) in [contextmenuBeforeOpen](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#contextmenubeforeopen) event In this demo, Rename item is disabled in the pager context menu. @@ -115,7 +115,7 @@ In this demo, Rename item is disabled in the pager context menu. ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/data-binding.md b/Document-Processing/Excel/Spreadsheet/React/data-binding.md index 3af4fa346..0ba23316f 100644 --- a/Document-Processing/Excel/Spreadsheet/React/data-binding.md +++ b/Document-Processing/Excel/Spreadsheet/React/data-binding.md @@ -17,7 +17,7 @@ To get start quickly with Data Binding, you can check on this video: > To bind data to a cell, use `cell data binding` support. -## Local data +## Bind local data in Spreadsheet To bind local data to the Spreadsheet, you can assign a JavaScript object array to the `dataSource` property. @@ -44,7 +44,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, 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. > You can customize the mapping of column data only in the local data binding support. @@ -61,7 +61,7 @@ The following code example demonstrates how to customize the mapping of column d {% previewsample "/document-processing/code-snippet/spreadsheet/react/field-mapping-cs1" %} -## Remote data +## Remote data Binding To bind remote data to the Spreadsheet control, assign service data as an instance of [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started) to the `dataSource` property. To interact with remote data source, provide the service endpoint `url`. @@ -107,9 +107,9 @@ Refer to the following code example for remote data binding. {% previewsample "/document-processing/code-snippet/spreadsheet/react/remote-data-binding-cs2" %} -### Web API +### Bind with Web API -You can use WebApiAdaptor to bind spreadsheet with Web API created using OData endpoint. +You can use `WebApiAdaptor` to bind the spreadsheet with a Web API created using an OData endpoint. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -130,7 +130,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. +The Spreadsheet control can bind the data to individual cell in a sheet using the [value](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#value) property. Refer to the following code example for cell data binding. @@ -155,19 +155,19 @@ Refer to the following code example for cell data binding. ## Dynamic data binding and Datasource change event -You can dynamically change the datasource of the spreadsheet by changing the `dataSource` property of the `range` object of the `sheet`. The `dataSourceChanged` event handler will be triggered when editing, inserting, and deleting a row in the datasource range. This event will be triggered with a parameter named `action` which indicates the `edit`, `add` and `delete` actions for the respective ones. +You can dynamically change the datasource of the spreadsheet by changing the `dataSource` property of the `range` object of the `sheet`. The [dataSourceChanged](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#datasourcechanged) event handler will be triggered when editing, inserting, and deleting a row in the datasource range. This event will be triggered with a parameter named `action` which indicates the `edit`, `add` and `delete` actions for the respective ones. The following table defines the arguments of the `dataSourceChanged` event. | Property | Type | Description | |-----|-----|-------| -| action | string | Indicates the type of action such as `edit`, `add`, and `delete` performed in the datasource range. | -| data | object[] | Modified data for `edit` action; New data for `add` action; Deleted data for `delete` action. | -| rangeIndex | number | Specifies the range index of the datasource. | -| sheetIndex | number | Specifies the sheet index of the datasource. | +| [action](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/datasourcechangedeventargs#action) | string | Indicates the type of action such as `edit`, `add`, and `delete` performed in the datasource range. | +| [data](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/datasourcechangedeventargs#data) | object[] | Modified data for `edit` action; New data for `add` action; Deleted data for `delete` action. | +| [rangeIndex](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/datasourcechangedeventargs#rangeindex) | number | Specifies the range index of the datasource. | +| [sheetIndex](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/datasourcechangedeventargs#sheetindex) | number | Specifies the sheet index of the datasource. | > For `add` action, the value for all the fields will be `null` in the data. In the case that you do not want the primary key field to be null which needs to be updated in the backend service, you can use `edit` action after updating the primary key field to update in the backend service.

-> For inserting a row at the end of the datasource range, you should insert a row below at the end of the range to trigger the `dataSourceChanged` event with action `add`. +> For inserting a row at the end of the datasource range, you should insert a row below at the end of the range to trigger the [dataSourceChanged](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#datasourcechanged) event with action `add`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -188,11 +188,11 @@ 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 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. -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. +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. -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" %} @@ -210,10 +210,17 @@ The following code example demonstrates how to dynamically update data using the {% endtabs %} {% previewsample "/document-processing/code-snippet/spreadsheet/react/dynamic-data-binding-cs2" %} +## Quick Lookup +- dataSource` — bind local array, DataManager, OData, or WebAPI data to a sheet range. +- `fieldsOrder` — customize column-to-field mapping (local data only). +- `dataSource={}` — primary way to bind data into a sheet range. +- `dataSourceChanged` event — fires on edit/add/delete inside data‑bound ranges. +- `updateRange(newData)` — dynamically update bulk data in a specific range. + ## 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://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/default) 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/default) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/data-validation.md b/Document-Processing/Excel/Spreadsheet/React/data-validation.md index ef58cc13c..d8e366101 100644 --- a/Document-Processing/Excel/Spreadsheet/React/data-validation.md +++ b/Document-Processing/Excel/Spreadsheet/React/data-validation.md @@ -21,7 +21,7 @@ You can apply data validation to restrict the type of data or the values that us You can apply data validation by using one of the following ways, * 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. +* Use the [`addDataValidation`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#adddatavalidation) method programmatically. ## Clear Validation @@ -30,7 +30,7 @@ Clear validation feature is used to remove data validations from the specified r You can clear data validation rule by one of the following ways, * 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. +* Use the [`removeDataValidation`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#removedatavalidation) method programmatically. ## Highlight Invalid Data @@ -39,7 +39,7 @@ Highlight invalid data feature is used to highlight the previously entered inval You can highlight an invalid data by using one of the following ways, * 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. +* Use the [`addInvalidHighlight`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#addinvalidhighlight) method programmatically. ## Clear Highlighted Invalid Data @@ -48,7 +48,7 @@ Clear highlight feature is used to remove the highlight from invalid cells. You can clear the highlighted invalid data by using the following ways, * 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. +* Use the [`removeInvalidHighlight`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#removeinvalidhighlight) method programmatically. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -74,7 +74,7 @@ When this rule is applied, the Spreadsheet evaluates the entered value against t 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. +* 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. 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/editing.md b/Document-Processing/Excel/Spreadsheet/React/editing.md index 7a11ac80f..b0966ec4d 100644 --- a/Document-Processing/Excel/Spreadsheet/React/editing.md +++ b/Document-Processing/Excel/Spreadsheet/React/editing.md @@ -9,13 +9,13 @@ documentation: ug # Editing in React Spreadsheet component -You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowediting) property to enable or disable the editing feature. +You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowediting) property to enable or disable the editing feature. To get start quickly with Editing, you can check on this video: {% youtube "https://www.youtube.com/watch?v=o3hsPhqaZzY" %} -## Edit cell +## Editing a cell You can start editing by one of the following ways, @@ -23,24 +23,24 @@ You can start editing by one of the following ways, * Press `F2` key to edit the active cell. * Use formula bar to perform editing. * Use `BACKSPACE` or `SPACE` key to clear the cell content and start the edit mode. -* Using the [`startEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#startedit) method. +* Using the [`startEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#startedit) method. -## Save cell +## Save Cell changes If the cell is in editable state, you can save the edited cell by one of the following ways, * Perform mouse click on any other cell rather than the current editing cell. * Press `Enter` or `Tab` keys to save the edited cell content. -* Using the [`endEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#endedit) method. +* Using the [`endEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#endedit) method. ## Cancel editing To cancel the editing without saving the changes, you can use one of the following ways, * Press `ESCAPE` key, this will remove the editable state and update the unchanged cell content. -* Using the [`closeEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#closeedit) method. +* Using the [`closeEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#closeedit) method. -The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#closeedit) method in spreadsheet. +The following sample shows how to prevent cell editing. The `E` column prevents editing by using the cancel argument as true in the [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#celledit) event. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/events.md b/Document-Processing/Excel/Spreadsheet/React/events.md index 6279bab1c..137e46c8b 100644 --- a/Document-Processing/Excel/Spreadsheet/React/events.md +++ b/Document-Processing/Excel/Spreadsheet/React/events.md @@ -15,9 +15,9 @@ The Spreadsheet component triggers events for creation, data binding, selection, The `actionBegin` and `actionComplete` events are the primary action events in the Spreadsheet. -The `actionBegin` event triggers when any action begins in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type, prevent specific actions from executing, and apply custom logic at the initiation of an action. +The [actionBegin](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) event triggers when any action begins in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type, prevent specific actions from executing, and apply custom logic at the initiation of an action. -The `actionComplete` event triggers when any action completes in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type and apply custom logic after an action has successfully completed. +The [actionComplete](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete) event triggers when any action completes in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type and apply custom logic after an action has successfully completed. You can identify the type of action being triggered by using the `args.action` property during both the action events. diff --git a/Document-Processing/Excel/Spreadsheet/React/filter.md b/Document-Processing/Excel/Spreadsheet/React/filter.md index 9e1e7cd20..b4142a2b4 100644 --- a/Document-Processing/Excel/Spreadsheet/React/filter.md +++ b/Document-Processing/Excel/Spreadsheet/React/filter.md @@ -9,29 +9,29 @@ documentation: ug # Filter in React Spreadsheet component -Filtering helps you to view specific rows in the spreadsheet by hiding the other rows. You can use the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowfiltering) property to enable or disable filtering functionality. +Filtering helps you to view specific rows in the spreadsheet by hiding the other rows. You can use the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowfiltering) property to enable or disable filtering functionality. > * The default value for `allowFiltering` property is `true`. By default, the `Filter` module is injected internally into Spreadsheet to perform filtering. -## Apply filter on UI +## Apply Filters through UI In the active sheet, select a range of cells to filter by value of the cell. The filtering can be done by any of the following ways: * 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. +> * 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. The following code example shows `filter` functionality in the Spreadsheet control. @@ -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 @@ -70,7 +70,7 @@ After filtering, you can clear/reset the filter for a field alone. It can be don * Click filter icon in the column’s header and then choose `Clear Filter` option from the filter dialog. * You can right-click on a filtered column cell and choose `Clear Filter from .` option from the context menu. -* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#clearfilter) method programmatically, to clear the filter in a particular column. +* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#clearfilter) method programmatically, to clear the filter in a particular column. ## Reapply filter @@ -79,14 +79,14 @@ When you want to reapply the filter after some changes happened in the rows. It * You can choose `Reapply` option in ribbon toolbar under `Filter and Sort` to reapply the filtered columns again. * You can right-click on a filtered cell and choose `Reapply` option from the context menu. It reapplies the filters again in the Spreadsheet for all the fields. -## Known error validations +## Filter Validation & Error Messages The following errors have been handled for filtering, * *Out of range validation:* When the selected range is not a used range of the active sheet, it is considered as invalid and the out of range alert with the message `Select a cell or range inside the used range and try again` will be displayed. No filter will be performed if the range is invalid. ## Get data from filtered rows -Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowfiltering) property and [`applyFilter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object. +Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowfiltering) property and [`applyFilter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object. The following code example shows how to get the filtered rows. @@ -107,7 +107,7 @@ The following code example shows how to get the filtered rows. {% previewsample "/document-processing/code-snippet/spreadsheet/react/filter-cs2" %} -## Limitations +## Limitations of Filter The following features have some limitations in Filter: @@ -115,9 +115,19 @@ The following features have some limitations in Filter: * Merge cells with filter. * Copy/cut paste the filter applied cells. +## Quick Lookups + +- `allowFiltering` - property that enables or disables filtering support in the spreadsheet. +- `applyFilter` - method that applies a filter to a selected range or based on specified criteria. +- `clearFilter` - method that clears all applied filters or clears the filter for a specific column. +- `beforeFilter` - event fired before filtering begins, allowing you to modify filter options. +- `filterComplete` - event fired after filtering finishes, useful for post‑filter actions. +- `Ctrl + Shift + L` - quickly apply or remove filters on the selected range. +- `Alt + Up/Down` - open the filter dialog for the active column. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/formatting.md b/Document-Processing/Excel/Spreadsheet/React/formatting.md index 578dbd209..325fe2f13 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/formatting.md @@ -7,7 +7,7 @@ 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 @@ -20,7 +20,7 @@ To get start quickly with Formatting, you can check on this video: ## 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, +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 | |---------|---------|---------| @@ -37,13 +37,13 @@ Number formatting provides a type for your data in the Spreadsheet. Use the [`al | 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. +* 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` method. +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, @@ -87,7 +87,7 @@ The different types of custom number format populated in the custom number forma | 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. +* 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. @@ -109,7 +109,7 @@ The following code example shows the number formatting in cell data. {% previewsample "/document-processing/code-snippet/spreadsheet/react/numberformat-cs1" %} -## Configure culture-based custom format +## Configure Culture-specific 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. @@ -169,11 +169,11 @@ The following code example demonstrates how to configure culture-based formats f {% previewsample "/document-processing/code-snippet/spreadsheet/react/globalization-cs1" %} -## Text and cell formatting +## Cell Styling and Text 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. +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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#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 @@ -182,15 +182,15 @@ Various font formats supported in the spreadsheet are font-family, font-size, bo ### Text Alignment -You can align text in a cell either vertically or horizontally using the `textAlign` and `verticalAlign` property. +You can align text in a cell either vertically or horizontally using the [`textAlign`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/textalign) and [verticalAlign](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/verticalalign) property. ### Indents -To enhance the appearance of text in a cell, you can change the indentation of a cell content using `textIndent` property. +To enhance the appearance of text in a cell, you can change the indentation of a cell content using [textIndent](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#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. +To highlight cell or range of cells from whole workbook you can apply background color for a cell using [backgroundColor](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel#backgroundcolor) property. ### Borders @@ -223,7 +223,7 @@ You can also change the color, size, and style of the border. The size and style 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. +* Using the [setBorder](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#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. @@ -254,7 +254,7 @@ The following features are not supported in Formatting: ## 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. +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`. @@ -263,7 +263,7 @@ Conditional formatting helps you to format a cell or range of cells based on the 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 [`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, @@ -316,7 +316,7 @@ 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 +### Custom Formatting Styles Using the custom format for conditional formatting you can set cell styles like color, background color, font style, font weight, and underline. @@ -324,12 +324,12 @@ 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 +### Clear Conditional 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. +* 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" %} @@ -357,9 +357,26 @@ The following features have some limitations in Conditional Formatting: * Copy and paste the conditional formatting applied cells. * Custom rule support. +## Quick Lookup + +- `allowNumberFormatting` - property to enable or disable number formatting. +- `numberFormat(format, range)` - apply a number format (built‑in or custom) to a cell or range. +- `getFormatFromType(type)` - return the culture‑aware format code for a built‑in type (e.g., `ShortDate`, `Currency`). +- `format` - property to set the number format on a cell at initial load (e.g., `'0.00%'`, `'m/d/yyyy'`). +- `allowCellFormatting` (property) - enable or disable text/cell style formatting. +- `cellFormat(style, range)` - apply text/cell styles (font, alignment, fill, etc.) to a cell or range. +- `setBorder(style, range, borderType?)` - apply borders (Outer, Inner/Horizontal/Vertical, Left/Right/Top/Bottom). +- `allowConditionalFormat` (property) - enable or disable conditional formatting. +- `conditionalFormat(options)` - add a conditional formatting rule (`type`, `range`, optional `value` and `format.style`). +- `clearConditionalFormat(range)` - remove conditional formatting rules (for a range or entire sheet if omitted). +- `sheets[i].conditionalFormats` (model) - define conditional formatting rules in the sheet model at load time. +- `configureLocalizedFormat(sheetReference, cultureFormats)` - map culture‑specific format IDs to codes for the Custom Format dialog. +- `listSeparator` - property to set the culture‑based argument separator used by formulas. + + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/formulas.md b/Document-Processing/Excel/Spreadsheet/React/formulas.md index 414bd6789..b07e53d08 100644 --- a/Document-Processing/Excel/Spreadsheet/React/formulas.md +++ b/Document-Processing/Excel/Spreadsheet/React/formulas.md @@ -11,24 +11,24 @@ documentation: ug Formulas are used for calculating the data in a worksheet. You can refer the cell reference from same sheet or from different sheets. -## Usage +## How to Apply Formulas You can set 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 Argument 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. > 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. -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]**. 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. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -54,7 +54,7 @@ In the example below, the Spreadsheet component is rendered with the `German cul 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). -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 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. The following code example shows an unsupported formula in the spreadsheet. @@ -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. +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. The following code example shows how to use `computeExpression` method in the spreadsheet. @@ -96,17 +96,17 @@ The following code example shows how to use `computeExpression` method in the sp {% previewsample "/document-processing/code-snippet/spreadsheet/react/formula-cs2" %} -## Formula bar +## Using the 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. +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. -## Named Ranges +## Using Named Ranges in Formulas 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, -* 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. +* 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. The following code example shows the usage of named ranges support. @@ -128,20 +128,20 @@ The following code example shows the usage of named ranges support. {% previewsample "/document-processing/code-snippet/spreadsheet/react/defined-name-cs1" %} -## Calculation Mode +## Formula Calculation Modes 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: * `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`. -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 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. -### Automatic Mode +### Automatic Calculation 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. -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`. +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`. The following code example demonstrates how to set the Automatic calculation mode in a Spreadsheet. @@ -162,7 +162,7 @@ The following code example demonstrates how to set the Automatic calculation mod {% previewsample "/document-processing/code-snippet/spreadsheet/react/calculation-cs1" %} -### Manual Mode +### Manual Calculation 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. @@ -190,7 +190,7 @@ The following code example demonstrates how to set the Manual calculation mode i {% previewsample "/document-processing/code-snippet/spreadsheet/react/calculation-cs2" %} -## Supported Formulas +## List of Supported Formulas The following are the list of formulas supported in spreadsheet, @@ -282,7 +282,7 @@ The following are the list of formulas supported in spreadsheet, | 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. | -## Formula Error Dialog +## Handling Formula Errors in Dialog If you enter an invalid formula in a cell, an error dialog with an error message will appear. For instance, a formula with the incorrect number of arguments, a formula without parenthesis, etc. @@ -300,9 +300,22 @@ If you enter an invalid formula in a cell, an error dialog with an error message ![Formula Alert Dialog](./images/formula-alert-dialog.png) +## Quick Lookup + +- `updateCell({ formula }, range)` - set or update a cell’s formula at a specific address. +- `addCustomFunction(handler, name)` - register a user‑defined function for use in formulas. +- `computeExpression(expression)` - evaluate a formula or expression string and return the computed value. +- `listSeparator` - property that specifies the culture‑based argument separator used in formulas. +- `showFormulaBar` - property to enable or disable the formula bar. +- `definedNames` (collection) - define named ranges during initial load. +- `addDefinedName({ name, refersTo, comment })` - create a named range dynamically. +- `removeDefinedName(name, scopeSheetName)` - remove a named range. +- `calculationMode` (property: `'Automatic' | 'Manual'`) - control whether formulas recalculate automatically or only on demand. + + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/freeze-pane.md b/Document-Processing/Excel/Spreadsheet/React/freeze-pane.md index a03f48d83..7a934a559 100644 --- a/Document-Processing/Excel/Spreadsheet/React/freeze-pane.md +++ b/Document-Processing/Excel/Spreadsheet/React/freeze-pane.md @@ -1,28 +1,28 @@ --- layout: post -title: Freeze pane in React Spreadsheet component | Syncfusion +title: Freeze panes in React Spreadsheet component | Syncfusion description: Learn here all about Freeze pane in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. control: Freeze pane platform: document-processing documentation: ug --- -# Freeze pane in React Spreadsheet component +# Freeze panes 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 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. To get start quickly with Freeze Panes in React Spreadsheet, you can check on this video: {% 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 @@ -33,7 +33,7 @@ It allows you to keep a certain number of rows visible while scrolling verticall In the active spreadsheet, select the cell where you want to create frozen rows. Frozen rows can be done in any one of the following ways: * Select the View tab in the Ribbon toolbar and choose the `Freeze Rows` item. -* You can specify the number of frozen rows using the `frozenRows` property inside the `Sheet` property. +* You can specify the number of frozen rows using the [frozenRows](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sheet#frozenrows) property inside the [Sheet](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sheet) property. ## FrozenColumns @@ -44,7 +44,7 @@ It allows you to keep a certain number of columns visible while scrolling horizo 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: * 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. +* You can specify 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. 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. @@ -65,6 +65,18 @@ In this demo, the frozenColumns is set as ‘2’, and the frozenRows is set as {% previewsample "/document-processing/code-snippet/spreadsheet/react/freeze-pane-cs1" %} +## Unfreeze Panes + +Unfreeze Panes allows you to remove previously frozen rows and columns so the worksheet scrolls normally again. You can unfreeze the `active sheet` or a specific `sheet` by index or name. + +**User Interface**: + +In the active Spreadsheet, unfreezing can be done in any of the following ways: + +* Select the **View** tab in the Ribbon toolbar and choose the **Unfreeze Panes** item. +* Use the [unfreezePanes](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#unfreezepanes) method to remove freeze panes on the active sheet, or pass a sheet identifier to target another sheet. + + ## Limitations Here, we have listed out the limitations with Freeze Panes feature. @@ -74,7 +86,7 @@ Here, we have listed out the limitations with Freeze Panes feature. ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/global-local.md b/Document-Processing/Excel/Spreadsheet/React/global-local.md index 26d7cbbfc..549a94e71 100644 --- a/Document-Processing/Excel/Spreadsheet/React/global-local.md +++ b/Document-Processing/Excel/Spreadsheet/React/global-local.md @@ -12,7 +12,7 @@ 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. @@ -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" %} @@ -522,7 +522,7 @@ RTL provides an option to switch the text direction and layout of the Spreadshee ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/illustrations.md b/Document-Processing/Excel/Spreadsheet/React/illustrations.md index 9af8640af..9beaee4e6 100644 --- a/Document-Processing/Excel/Spreadsheet/React/illustrations.md +++ b/Document-Processing/Excel/Spreadsheet/React/illustrations.md @@ -11,43 +11,43 @@ documentation: ug Illustrations help you to insert an image, shapes, and graphic objects in the Essential® JS 2 spreadsheet. -## Image +## Embed Images in Spreadsheet 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`. +>* The default value for the [allowImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowimage) property is `true`. -### Insert Image +### Insert a Image You can insert the 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. +* Use the [insertImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertimage) method programmatically. -The available parameters in `insertImage()` method are, +The available parameters in `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: +The available arguments in [ImageModel](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/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. +* `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. ### Delete Image * If you want to delete the image, just select the image, and then press the Delete key. -* Use the `deleteImage()` method programmatically. +* Use the [deleteImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deleteimage) method programmatically. -The available parameters in `deleteImage()` method are, +The available parameters in `deleteImage` method are, | Parameter | Type | Description | |-----|------|----| @@ -61,12 +61,12 @@ Image feature allows you to view and insert an image in a spreadsheet, and you c #### 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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#height) and [width](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#width) property in the [insertImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#top) and [left](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/imagemodel#left) property in the [insertImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertimage) method programmatically. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -92,11 +92,11 @@ The following features have some limitations in Image: * Corner resizing option in the image element. * Copy and paste the external image. -## Chart +## Integrating Charts in Spreadsheet -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 @@ -109,27 +109,34 @@ The following types of charts are available in the Spreadsheet. >* Pie Chart >* Scatter Chart -### Insert Chart +### Insert a Chart You can insert the 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. +* 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 | |-----|------|----| | 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 available arguments in the [ChartModel](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/chartmodel) are: + +* `id`: Specifies the chart element id. +* `type`: Specifies the type of chart. +* `theme`: Specifies the theme of the chart. +* `range`: Specifies the selected or specified data range for the chart. +* `isSeriesInRows`: Specifies whether series are organized in rows (true) or columns (false). +* `title`: Specifies the title of the chart. +* `width`: Specifies the width of the chart. +* `height`: Specifies the height of the chart. +* `dataLabelSettings`: Specifies the data label settings for the series. +* `markerSettings`: Specifies the marker settings for the series (applicable to line charts). +* `legendSettings`: Specifies options for customizing the chart legend. +* `primaryXAxis`: Specifies options to configure the horizontal axis. +* `primaryYAxis`: Specifies options to configure the vertical axis. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -151,9 +158,9 @@ 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. +* 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 | |-----|------|----| @@ -186,7 +193,7 @@ Chart feature allows you to view and insert a chart in a spreadsheet, and you ca #### 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. +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" %} @@ -215,7 +222,7 @@ The following features have some limitations in the Chart: ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/keyboard-shortcuts.md b/Document-Processing/Excel/Spreadsheet/React/keyboard-shortcuts.md index 566c42298..183136e39 100644 --- a/Document-Processing/Excel/Spreadsheet/React/keyboard-shortcuts.md +++ b/Document-Processing/Excel/Spreadsheet/React/keyboard-shortcuts.md @@ -72,7 +72,7 @@ The keyboard shortcuts supported in the spreadsheet are, ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/link.md b/Document-Processing/Excel/Spreadsheet/React/link.md index cc96406e7..a0827ca1d 100644 --- a/Document-Processing/Excel/Spreadsheet/React/link.md +++ b/Document-Processing/Excel/Spreadsheet/React/link.md @@ -9,7 +9,7 @@ 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`. @@ -22,7 +22,7 @@ You can insert a hyperlink in a worksheet cell for quick access to related infor 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. +* Use the [`addHyperlink`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#addhyperlink) method programmatically. ## Edit Hyperlink @@ -45,11 +45,11 @@ Performing this operation remove a single hyperlink without losing the display t 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 -There is an event named `beforeHyperlinkClick` which triggers only on clicking hyperlink. You can customize where to open the hyperlink by using the `target` property in the arguments of that event. +There is an event named [beforeHyperlinkClick](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforehyperlinkclick) which triggers only on clicking hyperlink. You can customize where to open the hyperlink by using the [target](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforehyperlinkargs#target) property in the arguments of that event. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -62,13 +62,21 @@ There is an event named `beforeHyperlinkClick` which triggers only on clicking h {% previewsample "/document-processing/code-snippet/spreadsheet/react/link-cs1" %} -## Limitations +## Limitations in HyperLink * Inserting hyperlink not supported for multiple ranges. +## Quick Lookup + +- `allowHyperlink` — property that enables or disables hyperlink support in the spreadsheet. +- `addHyperlink(link, address)` — method that inserts a hyperlink into the specified cell using the given options. +- `removeHyperlink(address)` — method that removes a hyperlink from a cell while keeping the display text unchanged. +- `beforeHyperlinkClick` — event fired before a hyperlink opens, allowing customization of the target location. +- `hyperlink` — cell property used to assign a URL or a sheet‑range reference directly to a cell. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/mobile-responsiveness.md b/Document-Processing/Excel/Spreadsheet/React/mobile-responsiveness.md index 10f0778a5..e0f57b527 100644 --- a/Document-Processing/Excel/Spreadsheet/React/mobile-responsiveness.md +++ b/Document-Processing/Excel/Spreadsheet/React/mobile-responsiveness.md @@ -9,8 +9,15 @@ documentation: ug # Mobile responsiveness in React Spreadsheet component -The Spreadsheet control rendered in desktop mode will be adaptive in all mobile devices where the layout gets adjusted based on their parent element’s dimensions to accommodate any resolution. +The Spreadsheet control rendered in desktop mode becomes adaptive on mobile devices where the layout adjusts according to the parent element’s dimensions to accommodate different screen resolutions. -You can see the overflowed items of ribbon header, ribbon content, and sheet tab using touch and swipe action. The right navigation arrow is added at the end of the ribbon content through which the user can navigate towards overflowed items. Once you reached the rightmost end of the ribbon content, the right navigation arrow will change to left navigation arrow through which you can navigate to the left of the ribbon content. +## Adaptive Behavior + +- Ribbon header, ribbon content, and sheet tab overflow are accessible using touch and swipe action. +- A navigation arrow appears at the end of the ribbon content to move to overflowed items. When the rightmost end is reached, the arrow converts to a left navigation arrow to move back. + +## Touch gestures +- Use horizontal swipe gestures to reveal overflowed ribbon items. +- Tap the navigation arrows to jump to the next/previous segment of the ribbon content. ![Spreadsheet Adaptive Mode](./images/spreadsheet_adaptive_mode.gif) diff --git a/Document-Processing/Excel/Spreadsheet/React/notes.md b/Document-Processing/Excel/Spreadsheet/React/notes.md index 333ea55f9..5be646783 100644 --- a/Document-Processing/Excel/Spreadsheet/React/notes.md +++ b/Document-Processing/Excel/Spreadsheet/React/notes.md @@ -10,7 +10,9 @@ documentation: ug # Notes in React Spreadsheet component -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**. +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. + +> * The default value for `enableNotes` property is `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. @@ -37,7 +39,7 @@ In the active worksheet, you can add a note in the following ways: * **Ribbon**: Select the cell, navigate to the **Review** tab, click the **Notes** dropdown, and select **Add Note**. * **Keyboard Shortcut**: Select the cell and press Shift + F2. * **Programmatically**: - * Use the `updateCell` method with the note model to add a note to a specific cell. + * Use the [updateCell](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#updatecell) method with the note model to add a note to a specific cell. * Bind notes via code-behind during initial load by associating the note model with the cell model. A dialog box will open where you can enter the note content. After entering the content, you can either click on other cells or press the Esc button to automatically save the note and close the dialog box. @@ -151,7 +153,7 @@ In the below example, the note functionality is disabled in the Spreadsheet. 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. -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. +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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#updatecell) method in the [created](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#created) event. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -164,9 +166,18 @@ In the below example, you can navigate between notes using **Previous Note** and {% previewsample "/document-processing/code-snippet/spreadsheet/react/note-cs3" %} -## Limitations +## Limitations of notes * When importing the document with notes, the formatting of the content in the notes will not be available. Similarly, while adding notes, we cannot apply formatting to them. * The style and appearance of the dialog box for the notes, including size, color, border, and other elements, cannot be directly changed. * Exporting the workbook along with notes is not supported in file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf). * Notes added outside the used ranges of the worksheet will not be included in the exported document. + +## Quick Lookup + +- `enableNotes` - property that enables or disables the notes feature in the spreadsheet. +- `notes` - cell property used to attach a note during initial load or through data binding. +- `updateCell({ notes }, address)` - method used to add or modify a note programmatically for a specific cell. +- `Shift + F2` - keyboard shortcut used to add or edit a note in the selected cell. +- `Show/Hide Note` and `Show All Notes` - options used to toggle visibility of individual notes or display all notes as sticky notes. + diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index d07bb6430..e3c6a5132 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md @@ -130,7 +130,7 @@ The following code example shows how to import an Excel document using file uplo ### Open Excel files from URL -You can achieve to access the remote Excel file by using the [`created`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#created) event. In this event you can fetch the Excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#open) this file by using Spreadsheet component open method. +You can achieve to access the remote Excel file by using the [`created`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#created) event. In this event you can fetch the Excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#open) this file by using Spreadsheet component open method. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -244,7 +244,7 @@ Before proceeding with the opening process, you should deploy the spreadsheet op After deployment, you will get the AWS service URL for the open and save actions. Before opening the Excel file with this hosted open URL, you need to prevent the default file opening process to avoid getting a corrupted file on the open service end. The spreadsheet component appends the file to the `formData` and sends it to the open service, which causes the file to get corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeOpen`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforeopen) event. After that, you will get the selected file in the `beforeOpen` event argument. Then, convert this file into a base64 string and send it to the open service URL using a fetch request. -On the open service end, convert the base64 string back to a file and pass it as an argument to the workbook `Open` method. The open service will process the file and return the spreadsheet data in JSON format. You will then receive this JSON data in the fetch success callback. Finally, use the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to load this JSON data into the spreadsheet component. +On the open service end, convert the base64 string back to a file and pass it as an argument to the [Workbook Open](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/workbookopen#open) method. The open service will process the file and return the spreadsheet data in JSON format. You will then receive this JSON data in the fetch success callback. Finally, use the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#openfromjson) method to load this JSON data into the spreadsheet component. The following code example shows how to open an Excel file using a hosted web service in AWS Lambda, as mentioned above. @@ -325,7 +325,7 @@ public class OpenOptions ### Open Base64-encoded Excel data -In the Syncfusion® Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#open) method in the spreadsheet. +In the Syncfusion® Spreadsheet component, there is no direct option to open data as a Base64 string. To achieve this, we need to fetch the Base64 string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#open) method in the spreadsheet. The following code example shows how to open the spreadsheet data as base64 string. @@ -369,6 +369,8 @@ Now, you have the option to selectively ignore some features during the opening spreadsheet.openFromJson({ file: file }, { ignoreStyle: true }); ``` +Refer to the [SerializationOptions](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/serializationoptions) for detailed information on all available options. + | Options | Description | | ----- | ----- | | onlyValues | If **true**, only the cell values will be loaded. | @@ -518,7 +520,7 @@ You can add your own custom header to the open action in the Spreadsheet. For pr ### Handle external workbook reference confirmation -When you open an Excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data. +When you open an Excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to `false` during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data. ```csharp public IActionResult Open(IFormCollection openRequest) diff --git a/Document-Processing/Excel/Spreadsheet/React/print.md b/Document-Processing/Excel/Spreadsheet/React/print.md index 737e1d7f7..b3bcb79e5 100644 --- a/Document-Processing/Excel/Spreadsheet/React/print.md +++ b/Document-Processing/Excel/Spreadsheet/React/print.md @@ -9,7 +9,10 @@ documentation: ug # Print in React Spreadsheet component -The printing functionality allows end-users to print all contents, such as tables, charts, images, and formatted contents, available in the active worksheet or entire workbook in the Spreadsheet. You can enable or disable print functionality by using the `allowPrint` property, which defaults to **true**. +The printing functionality allows end-users to print all contents, such as tables, charts, images, and formatted contents, available in the active worksheet or entire workbook in the Spreadsheet. You can enable or disable print functionality by using the [allowPrint](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowprint) property. + +>* The default value for the `allowPrint` property is `true`. + ## Default printing @@ -19,15 +22,15 @@ The active worksheet in the Spreadsheet can be printed by selecting the **File > ## Custom printing -The active worksheet or entire workbook can be printed with customized options using the `print` method. The `print` method takes one parameter, that is, `printOptions`, which can be used for customization. +The active worksheet or entire workbook can be printed with customized options using the [print](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#print) method. The `print` method takes one parameter, that is, [printOptions](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/printoptions), which can be used for customization. The `printOptions` contain three properties, as described below. -* `type` - It specifies whether to print the current sheet or the entire workbook. The value for this property is either **ActiveSheet** or **Workbook**. -* `allowGridLines` - This property specifies whether grid lines should be included in the printing or not. The grid lines will be included in the printed copy when set to **true**. When set to **false**, it will not be available. -* `allowRowColumnHeader` - This property specifies whether row and column headers should be included in the printing or not. The headers will be included in the printed copy when set to **true**. When set to **false**, it will not be available. +* [type](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/printoptions#type) - It specifies whether to print the current sheet or the entire workbook. The value for this property is either `ActiveSheet` or `Workbook`. +* [allowGridLines](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/printoptions#allowgridlines) - This property specifies whether grid lines should be included in the printing or not. The grid lines will be included in the printed copy when set to `true`. When set to `false`, it will not be available. +* [allowRowColumnHeader](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/printoptions#allowrowcolumnheader) - This property specifies whether row and column headers should be included in the printing or not. The headers will be included in the printed copy when set to `true`. When set to `false`, it will not be available. -> When the `print` method is called without any parameters, the default printing will be performed. +> When the [print](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#print) method is called without any parameters, the default printing will be performed. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -42,7 +45,7 @@ The `printOptions` contain three properties, as described below. ## Disable printing -The printing functionality in the Spreadsheet can be disabled by setting the [`allowPrint`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowprint) property to **false**. After disabling, the **"Print"** option will not be available in the **"File"** menu of the ribbon and as a keyboard shortcut. +The printing functionality in the Spreadsheet can be disabled by setting the [`allowPrint`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowprint) property to `false`. After disabling, the `Print` option will not be available in the `File` menu of the ribbon and as a keyboard shortcut. ![Spreadsheet with print option disabled](./images/spreadsheet_print_disable.png) @@ -61,4 +64,9 @@ The printing functionality in the Spreadsheet can be disabled by setting the [`a * When printing the document, changing the page orientation to landscape is not supported in both the `print` method and print preview dialog of the web browser. * The styles provided for the data validation functionality will not be available in the printed copy of the document. -* The content added to the cell templates, such as HTML elements, Syncfusion® controls, and others, will not be available in the printed copy of the document. \ No newline at end of file +* The content added to the cell templates, such as HTML elements, Syncfusion® controls, and others, will not be available in the printed copy of the document. + +## Quick Lookup + +- `allowPrint` - enables or disables Spreadsheet printing (default as `true`). +- `print(printOptions?)` - prints the active sheet or the entire workbook with customizable options. diff --git a/Document-Processing/Excel/Spreadsheet/React/protect-sheet.md b/Document-Processing/Excel/Spreadsheet/React/protect-sheet.md index 3abf9eb81..fbd3fe44c 100644 --- a/Document-Processing/Excel/Spreadsheet/React/protect-sheet.md +++ b/Document-Processing/Excel/Spreadsheet/React/protect-sheet.md @@ -7,24 +7,25 @@ platform: document-processing documentation: ug --- -# Protect sheet in React Spreadsheet component +# Sheet Protection in React Spreadsheet component Sheet protection helps you to prevent the users from modifying the data in the spreadsheet. -## Protect Sheet +## Protect a Worksheet -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 users from accidentally changing, editing, moving, or deleting data in a spreadsheet. And you can also protect a 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`. By default in protected sheet, selecting, formatting, inserting, deleting functionalities are disabled. To enable some of the above said functionalities -the `protectSettings` options are used in a protected spreadsheet. +the [protectSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/protectsettings) options are used in a protected spreadsheet. The available `protectSettings` options in spreadsheet are, | Options | Uses | |-----|------| -| `Select Cells` | Used to perform Cell Selection. | +| `Select Cells` | Allows selecting cells. | +|`Select UnLockedCells`| Allows selection only on unlocked cells. | | `Format Cells` | Used to perform Cell formatting. | | `Format Rows` | Used to perform Row formatting. | | `Format Columns` | Used to perform Column formatting. | @@ -40,7 +41,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. @@ -65,7 +66,7 @@ The following example shows `Protect Sheet` functionality in the Spreadsheet con * Password encryption is not supported -## Unprotect Sheet +## Unprotect a Worksheet Unprotect sheet is used to enable all the functionalities that are already disabled in a protected spreadsheet. @@ -75,11 +76,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 is editable, you can use [`lockCells`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#lockcells) method, with the parameter `range` and [isLocked](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#islocked) property as false. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -100,13 +101,13 @@ 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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#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 | |-----|------| -| `readOnly` | Specifies whether an entire row, an entire column, or a specific range of cells should be set as read-only (**true**) or editable (**false**). |. +| `readOnly` | Specifies whether an entire row, an entire column, or a specific range of cells should be set as read-only (`true`) or editable (`false`). |. | `range` | Specifies the particular range of cells to be set as read-only. | | `sheetIndex` | Specifies the index of the sheet. | @@ -123,7 +124,7 @@ spreadsheet.setRangeReadOnly(true, '3:3', 0) spreadsheet.setRangeReadOnly(true, 'A:A', 0) ``` -You can make the cells read-only in the cell data binding by setting the `isReadOnly` property to **true** for the respective rows, columns, and cells. Please refer to the code snippet below to see how to set cells to read-only in the cell data binding: +You can make the cells read-only in the cell data binding by setting the [isReadOnly](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#isreadonly) property to `true` for the respective rows, columns, and cells. Please refer to the code snippet below to see how to set cells to read-only in the cell data binding: ```ts @@ -167,9 +168,9 @@ The following example demonstrates how to make rows, columns, and cells read-onl {% previewsample "/document-processing/code-snippet/spreadsheet/react/readonly-cs1" %} -## Protect Workbook +## Protect a 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 +178,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 +197,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" %} @@ -215,19 +216,28 @@ The following example shows `Protect Workbook` by using the [`password`](https:/ {% previewsample "/document-processing/code-snippet/spreadsheet/react/local-data-binding-cs4" %} -## Unprotect Workbook +## Unprotect a Workbook Unprotect Workbook is used to enable the insert, delete, rename, move, copy, hide or unhide sheets feature in the spreadsheet. **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. +## Quick Lookup + +- `isProtected` - enables or disables sheet or workbook protection (default: false). +- `protectSheet(sheetIndex, protectSettings, password)` - protect a sheet with optional settings and password. +- `unprotectSheet(sheetIndex, password)` - remove protection from a sheet. +- `lockCells(range, isLocked)` - lock or unlock specific cells inside a protected sheet. +- `setRangeReadOnly(readOnly, range, sheetIndex)` - make rows, columns, or ranges read-only +without enabling sheet protection. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/ribbon.md b/Document-Processing/Excel/Spreadsheet/React/ribbon.md index a8dcf14d3..77a977a1a 100644 --- a/Document-Processing/Excel/Spreadsheet/React/ribbon.md +++ b/Document-Processing/Excel/Spreadsheet/React/ribbon.md @@ -17,15 +17,15 @@ 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. | +| [`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. @@ -46,9 +46,17 @@ The following code example shows the usage of ribbon customization. {% previewsample "/document-processing/code-snippet/spreadsheet/react/ribbon-cs1" %} +## Quick Lookup + +- `hideRibbonTabs(tabTexts[])` — show/hide existing ribbon tabs. +- `enableRibbonTabs(tabTexts[], isEnable)` — enable/disable specific ribbon tabs. +- `addRibbonTabs(tabs, insertBefore)` — add custom tabs (with content items). +- `hideToolbarItems(tabText, itemIndexes|itemIds)` / `enableToolbarItems(tabText, itemIds|indexes, isEnable)` — control items within a tab. +- `hideFileMenuItems(itemTexts|itemIds)` / `enableFileMenuItems(itemTexts|itemIds, isEnable, isUniqueId?)` / `addFileMenuItems(items, targetText, insertAfter)` — control File menu options. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md index 298a75b3e..9ef7430b7 100644 --- a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md +++ b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md @@ -15,11 +15,11 @@ Spreadsheet is a tabular format consisting of rows and columns. The intersection * Delete * Show and Hide -## Insert +## Insert Rows and Columns You can insert rows or columns anywhere in a spreadsheet. Use the [`allowInsert`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowinsert) property to enable or disable the insert option in Spreadsheet. -### Row +### Insert a Row The rows can be inserted in the following ways, @@ -45,7 +45,7 @@ The following code example shows the options for inserting rows in the spreadshe {% previewsample "/document-processing/code-snippet/spreadsheet/react/insert-row-cs1" %} -### Column +### Insert a Column The columns can be inserted in the following ways, @@ -71,7 +71,7 @@ The following code example shows the options for inserting columns in the spread {% previewsample "/document-processing/code-snippet/spreadsheet/react/insert-column-cs1" %} -## Delete +## Delete Rows and Columns Delete support provides an option for deleting the rows and columns in the spreadsheet. Use [`allowDelete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowdelete) property to enable or disable the delete option in Spreadsheet. @@ -108,24 +108,24 @@ The following features have some limitations in Insert/Delete: * Insert row/column between the conditional formatting applied cells. * Insert/delete row/column between the filter applied cells. -## Hide and show +## Hide or show Rows and Columns You can show or hide the rows and columns in the spreadsheet through property binding, method, and context menu. -### Row +### Show or Hide Rows The rows can be hidden or shown through the following ways, -* Using `hidden` property in row, you can hide/show the rows at initial load. -* Using `hideRow` method, you can hide the rows by specifying the start and end row index, set the last argument `hide` as `false` to unhide the hidden rows. +* Using [hidden](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/row#hidden) property in row, you can hide/show the rows at initial load. +* Using [hideRow](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#hiderow) method, you can hide the rows by specifying the start and end row index, set the last argument `hide` as `false` to unhide the hidden rows. * Right-click on the row header and select the desired option from context menu -### Column +### Show or Hide Columns The columns can be hidden or shown through following ways, -* Using `hidden` property in columns, you can hide/show the columns at initial load. -* Using `hideColumn` method, you can hide the columns by specifying the start and end column index, set the last argument `hide` as `false` to unhide the hidden columns. +* Using [hidden](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/column#hidden) property in columns, you can hide/show the columns at initial load. +* Using [hideColumn](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#hidecolumn) method, you can hide the columns by specifying the start and end column index, set the last argument `hide` as `false` to unhide the hidden columns. * Right-click on the column header and select the desired option from context menu The following code example shows the hide/show rows and columns operation in the spreadsheet. @@ -147,11 +147,11 @@ The following code example shows the hide/show rows and columns operation in the {% previewsample "/document-processing/code-snippet/spreadsheet/react/show-hide-cs1" %} -## Size +## Resize Rows and Columns You can change the size of rows and columns in the spreadsheet by using [setRowsHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setrowsheight) and [setColumnsWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setcolumnswidth) methods. -### Row +### Adjust Row Height You can change the height of single or multiple rows by using the [setRowsHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setrowsheight) method. @@ -183,7 +183,7 @@ The following code example shows how to change the height for single/multiple ro {% previewsample "/document-processing/code-snippet/spreadsheet/react/row-height-cs1" %} -### Column +### Adjust Column width You can change the width of single or multiple columns by using the [setColumnsWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setcolumnswidth) method. @@ -232,9 +232,24 @@ The following code example shows how to change the text in the column headers. {% previewsample "/document-processing/code-snippet/spreadsheet/react/column-header-change-cs1" %} +## Quick Lookup + +- `insertRow(index)` - insert a new row at the specified index; optional parameters let you add multiple rows or row models. +- `insertColumn(index)` - insert a new column at the specified index; optional parameters let you add multiple columns or column models. +- `delete(startIndex, endIndex)` - remove a continuous range of rows or columns; you can specify the model type when needed. +- `allowInsert` - property to enable or disable inserting rows or columns in the sheet. +- `allowDelete` - property to enable or disable deleting rows or columns in the sheet. +- `hideRow(startIndex, endIndex, hide)` - hide or show a range of rows by using the hide flag. +- `hideColumn(startIndex, endIndex, hide)` - hide or show a range of columns by using the hide flag. +- `RowModel.hidden` - defines whether a row should start hidden when the sheet loads. +- `ColumnModel.hidden` - defines whether a column should start hidden when the sheet loads. +- `setRowsHeight(height, ranges)` - apply a specific height to one or more row ranges. +- `setColumnsWidth(width, ranges)` - apply a specific width to one or more column ranges. +- `beforeCellRender(args)` - event used to change or customize cell or header content during rendering. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index f8937cbd6..fea47c183 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md @@ -47,13 +47,17 @@ Please find the below table for the [`beforeSave`](https://ej2.syncfusion.com/re | **Parameter** | **Type** | **Description** | | ----- | ----- | ----- | -| url | string | Specifies the save url. | -| fileName | string | Specifies the file name. | -| saveType | SaveType | Specifies the saveType like Xlsx, Xls, Csv and Pdf. | -| customParams | object | Passing the custom parameters from client to server while performing save operation. | -| isFullPost | boolean | It sends the form data from client to server, when set to true. It fetches the data from client to server and returns the data from server to client, when set to false. | -| needBlobData | boolean | You can get the blob data if set to true. | -| cancel | boolean | To prevent the save operations. | +| [url](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#url) | string | Specifies the save url. | +| [fileName](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#filename) | string | Specifies the file name. | +| [saveType](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#savetype) | SaveType | Specifies the saveType like Xlsx, Xls, Csv and Pdf. | +| [customParams](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#customparams) | object | Passing the custom parameters from client to server while performing save operation. | +| [isFullPost](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#isfullpost) | boolean | It sends the form data from client to server, when set to true. It fetches the data from client to server and returns the data from server to client, when set to false. | +| [needBlobData](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#needblobdata) | boolean | You can get the blob data if set to true. | +| [cancel](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#cancel) | boolean | To prevent the save operations. | +| [autoDetectFormat](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#autodetectformat) | boolean | Automatically detects the number format for cells, if enabled. | +| [jsonConfig](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#jsonconfig) | SerializationOptions | Defines the serialization options applied when saving as an Excel file. | +| [pdfLayoutSettings](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforesaveeventargs#pdflayoutsettings) | pdfLayoutSettings | Specifies the layout settings used when saving as a PDF. | + > * Use `Ctrl + S` keyboard shortcut to save the Spreadsheet data as Excel file. @@ -62,7 +66,7 @@ Please find the below table for the [`beforeSave`](https://ej2.syncfusion.com/re ## Save Excel files programmatically -To save Excel files programmatically in the Spreadsheet, you can use the [`save`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#save) method of the Spreadsheet component. Before invoking this method, ensure that the [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) property is properly configured, as it is required for processing and generating the file on the server. +To save Excel files programmatically in the Spreadsheet, you can use the [`save`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#save) method of the Spreadsheet component. Before invoking this method, ensure that the [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#saveurl) property is properly configured, as it is required for processing and generating the file on the server. Please find the below table for the [`save`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#save) method arguments. @@ -335,6 +339,7 @@ Now, you have the option to selectively ignore some features while saving the Sp ```ts spreadsheet.saveAsJson({ onlyValues: true }); ``` +Refer to the [SerializationOptions](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/serializationoptions) for detailed information on all available options. | Options | Description | | ----- | ----- | @@ -350,7 +355,7 @@ spreadsheet.saveAsJson({ onlyValues: true }); | ignoreImage | If **true**, excludes images from the JSON output. | | ignoreNote | If **true**, excludes notes from the JSON output. | -The following code snippet demonstrates how to configure the serialization options and pass them as arguments to the saveAsJson method: +The following code snippet demonstrates how to configure the serialization options and pass them as arguments to the `saveAsJson` method: {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/scrolling.md b/Document-Processing/Excel/Spreadsheet/React/scrolling.md index 814deacad..4ac273dcf 100644 --- a/Document-Processing/Excel/Spreadsheet/React/scrolling.md +++ b/Document-Processing/Excel/Spreadsheet/React/scrolling.md @@ -9,22 +9,22 @@ documentation: ug # Scrolling in React Spreadsheet component -Scrolling helps you to move quickly to different areas of the worksheet. It moves faster if we use horizontal and vertical scroll bars. Scrolling can be enabled by setting the [`allowScrolling`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowscrolling) as true. +Scrolling helps you to move quickly to different areas of the worksheet. It moves faster if we use horizontal and vertical scroll bars. Scrolling can be enabled by setting the [`allowScrolling`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowscrolling) as true. > By default, the `allowScrolling` property is true. -You have the following options in Scrolling by using [`scrollSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#scrollsettings). +You have the following options in Scrolling by using [`scrollSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#scrollsettings). * Finite scrolling. * Virtual scrolling. ## Finite Scrolling -Finite scrolling supports two type of modes in scrolling. You can use the [`isFinite`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/scrollSettings/#isfinite) property in [`scrollSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#scrollsettings) to specify the mode of scrolling. +Finite scrolling supports two type of modes in scrolling. You can use the [`isFinite`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/scrollSettings#isfinite) property in [`scrollSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#scrollsettings) to specify the mode of scrolling. -* Finite - This mode does not create a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/scrollSettings/#isfinite) property as `true`. +* Finite - This mode does not create a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/scrollSettings#isfinite) property as `true`. -* Infinite - This mode creates a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/scrollSettings/#isfinite) property as `false`. +* Infinite - This mode creates a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/scrollSettings#isfinite) property as `false`. > By Default, the `isFinite` property is `false`. @@ -46,7 +46,7 @@ You can scroll through the worksheet using one of the following ways, ## Finite scrolling with defined rows and columns -If you want to perform scrolling with defined rows and columns, you must define `rowCount` and `colCount` in the [`sheets`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#sheets) property and set `isFinite` as true and `enableVirtualization` as false in `scrollSettings`. +If you want to perform scrolling with defined rows and columns, you must define `rowCount` and `colCount` in the [`sheets`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sheets) property and set `isFinite` as true and `enableVirtualization` as false in `scrollSettings`. The following code example shows the finite scrolling with defined rows and columns in the spreadsheet. Here, we used rowCount as 20 and colCount as 20, after reaching the 20th row or 20th column you can't able to scroll. @@ -69,4 +69,4 @@ The following code example shows the finite scrolling with defined rows and colu ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. diff --git a/Document-Processing/Excel/Spreadsheet/React/searching.md b/Document-Processing/Excel/Spreadsheet/React/searching.md index b2304fb26..0d10bdcf1 100644 --- a/Document-Processing/Excel/Spreadsheet/React/searching.md +++ b/Document-Processing/Excel/Spreadsheet/React/searching.md @@ -7,22 +7,22 @@ platform: document-processing documentation: ug --- -# Searching in React Spreadsheet component +# Searching Feature in Syncfusion React Spreadsheet -Find and Replace helps you to search for target text and replace the founded text with alternative text within the sheet or workbook. You can use the [`allowFindAndReplace`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowfindandreplace) property to enable or disable Find and Replace functionality. +Find and Replace helps you to search for target text and replace the found text with alternative text within the sheet or workbook. You can use the [`allowFindAndReplace`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowfindandreplace) property to enable or disable Find and Replace functionality. > * The default value for `allowFindAndReplace` property is `true`. ## Find -Find is used to select the matched contents of a cell within sheet or workbook. It is extremely useful when working with large sets of data source. +Find is used to select the matched contents of a cell within the sheet or workbook. It is extremely useful when working with large sets of data source. **User Interface**: Find can be done by any of the following ways: * Select the Search icon in the Ribbon toolbar or using `Ctrl + F` key to open the Find dialog. -* Using find Next and find Previous buttons to search the given value in workbook. +* Using `Find Next` and `Find Previous` buttons to search the given value in workbook. * Select the option button in Find dialog to open the Find and Replace dialog then select the below properties for enhanced searching. > * `Search within`: To search the target in a sheet (default) or in an entire workbook. @@ -30,11 +30,11 @@ 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 +## Replace & Replace All -Replace is used to change the find contents of a cell within sheet or workbook. Replace All is used to change all the matched contents of a cell within sheet or workbook. +Replace is used to change the matched content in cell within sheet or workbook. Replace All is used to change all the matched contents of a cell within sheet or workbook. **User Interface**: @@ -42,18 +42,18 @@ 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 ReplaceAll button to change all the found values 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`. -## Go to +## Go To Go to is used to navigate to a specific cell address in the sheet or workbook. -**User Interface**: +**Find and Replace Dialog**: * 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: @@ -85,4 +85,4 @@ In the following sample, searching can be done by following ways: ## 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. \ No newline at end of file +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 know how to present and manipulate data. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/selection.md b/Document-Processing/Excel/Spreadsheet/React/selection.md index 98e1eae43..b37098b53 100644 --- a/Document-Processing/Excel/Spreadsheet/React/selection.md +++ b/Document-Processing/Excel/Spreadsheet/React/selection.md @@ -9,7 +9,7 @@ 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. 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. > * The default value for `mode` in `selectionSettings` is `Multiple`. @@ -19,9 +19,9 @@ You have the following options in Selection, * Row selection * Column selection -## Cell selection +## Cell & Range 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**: @@ -42,7 +42,7 @@ You can perform row selection in any of the following ways, * By clicking the row header. * To select multiple rows, select a row header with the left mouse button and drag over to other row headers (or) use the `Shift + arrow` keys to select multiple rows. * To select non-adjacent rows, hold `Ctrl` and select the row header. -* You can also use the `selectRange` method for row selection. +* You can also use the [selectRange](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#selectrange) method for row selection. The following sample shows the row selection in the spreadsheet, here selecting the 5th row using the `selectRange` method. @@ -74,7 +74,7 @@ You can perform column selection in any of the following ways, * By clicking the column header. * To select multiple columns, select a column header with the left mouse button and drag over to other column headers (or) use the `Shift + arrow` keys to select the multiple columns. * To select non-adjacent columns, hold `Ctrl` and select the column header. -* You can also use the `selectRange` method for row selection. +* You can also use the [selectRange](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#selectrange) method for column selection. The following sample shows the column selection in the spreadsheet, here selecting the 3rd column using the `selectRange` method. @@ -97,7 +97,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 +120,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" %} @@ -143,6 +143,17 @@ The following sample shows, how to remove the selection in the spreadsheet. Here * We have a limitation while performing the Select All(`ctrl + A`). You can do this only by clicking the Select All button at the top left corner. +## Quick Lookup + +- `selectionSettings.mode` - Used to enable, disable, or control the selection behavior (None, Single, or Multiple). +- `selectRange(address) `- Programmatically selects a specific cell, range, row, or column using an A1‑style address. +- `getData(range)` - Retrieves all cell values from the selected or specified range as a collection. +- `selectedRange` - Returns the currently selected cell or range in A1 notation. +- `getRangeIndexes(range)` - Converts an A1‑style range (like "A1:C3") into numeric row/column indexes. +- `getRangeAddress(indexes)` - Converts numeric row/column indexes back into an A1‑style address. +- `getSwapRange(range)` - Normalizes a reversed or diagonal selection to ensure proper top‑left to bottom‑right ordering. + + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. diff --git a/Document-Processing/Excel/Spreadsheet/React/sort.md b/Document-Processing/Excel/Spreadsheet/React/sort.md index 8408829f6..173459bb9 100644 --- a/Document-Processing/Excel/Spreadsheet/React/sort.md +++ b/Document-Processing/Excel/Spreadsheet/React/sort.md @@ -9,29 +9,29 @@ documentation: ug # Sort in React Spreadsheet component -Sorting helps arranging the data to a specific order in a selected range of cells. You can use the [`allowSorting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowsorting) property to enable or disable sorting functionality. +Sorting helps arranging the data to a specific order in a selected range of cells. You can use the [`allowSorting`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowsorting) property to enable or disable sorting functionality. > * The default value for `allowSorting` property is `true`. By default, the `sort` module is injected internally into Spreadsheet to perform sorting. -## Sort by cell value +## Sort a Range by Cell Values 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. +* Use the [`sort`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sort) method programmatically. The cell values can be sorted in the following orders: * Ascending * Descending -> * Ascending is the default order for sorting. +> * The default order of sorting is `Ascending` -The `sort()` method with empty arguments will sort the selected range by active cell’s column as sort column in ascending order. +The [sort](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sort) method with empty arguments will sort the selected range by active cell’s column as sort 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 [`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. @@ -54,11 +54,11 @@ 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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sortoptions) arguments of the [sort](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#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. -You can also enable or disable this property using `beforeSort` event arguments, +You can also enable or disable this property using [beforeSort](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#beforesort) event arguments, ```ts @@ -70,15 +70,15 @@ 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 sorting -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. +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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sortoptions) arguments of the [sort](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#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. > * The default value for the `caseSensitive` property is `false`. -You can also enable or disable this property using `beforeSort` event arguments, +You can also enable or disable this property using [beforeSort](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#beforesort) event arguments, ```ts const beforeSort = (args: BeforeSortEventArgs): void => { @@ -87,13 +87,13 @@ You can also enable or disable this property using `beforeSort` event arguments, ``` -In the custom sort dialog, the `Case sensitive` checkbox is unchecked on load as the default value is `false`. +In the custom sort dialog, the [caseSensitive](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sortoptions#casesensitive) checkbox is unchecked on load as the default value is `false`. ## Sort multiple columns 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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sort) method programmatically by providing sort criteria. > * The current sorting functionality supports sorting based on cell values only. @@ -103,17 +103,17 @@ The custom sort dialog helps sorting multiple columns in the selected range by u 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. -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. +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. ### 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: -* [`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). +The multi-column sorting can also be performed manually by passing sort options to the [sort](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sort) method programmatically. The [sortOption](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sortoptions) 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. > * All the arguments are optional. -> * When a `sortDescriptor` is specified without field, the field of the first `sortDescriptor` from the collection will be assigned from active cell’s column name and others will be ignored. Hence, it will act as single column sorting. +> * When a [`sortDescriptors`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sortdescriptors) is specified without field, the field of the first `sortDescriptor` from the collection will be assigned from active cell’s column name and others will be ignored. Hence, it will act as single column sorting. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -134,7 +134,7 @@ The multi-column sorting can also be performed manually by passing sort options ## Custom sort comparer -The [`sortDescriptor`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#sortdescriptor) holds the [`sortComparer`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#sortcomparer) property, which is a function and it is used to customize the sort comparer for specific sort criteria. Each `sortDescriptor` can be customized using the custom sort comparer function. +The [`sortDescriptor`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sortdescriptor) holds the [`sortComparer`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#sortcomparer) property, which is a function and it is used to customize the sort comparer for specific sort criteria. Each `sortDescriptor` can be customized using the custom sort comparer function. By customizing sort comparer, you can define the sort action as desired. @@ -165,7 +165,7 @@ In the following demo, the `Trustworthiness` column is sorted based on the custo {% previewsample "/document-processing/code-snippet/spreadsheet/react/custom-sort-cs1" %} -## Known error validations +## Sort Validation & Error Messages The following errors have been handled for sorting, * *Out of range validation:* When the selected range is not a used range of the active sheet, it is considered as invalid and the out of range alert with the message `Select a cell or range inside the used range and try again` will be displayed. No sort will be performed if the range is invalid. @@ -174,13 +174,22 @@ The following errors have been handled for sorting, * *Duplicate field validation:* When the column names of added sort criteria are repeated more than once in the custom sort dialog, it will become invalid and an error message ` is mentioned more than once. Duplicate columns must be removed` will be displayed on `OK` button click. -## Limitations +## Limitations of Sort * Sorting is not supported with formula contained cells. +## Quick Lookup + +- `allowSorting` - property that enables or disables sorting functionality in the spreadsheet. +- `sort(options)` - method that sorts a selected range using the provided sort options or defaults. +- `beforeSort` - event fired before sorting begins, allowing you to adjust or cancel the sort action. +- `sortComplete` - event fired after sorting completes, useful for handling post‑sort operations. +- `sortOptions` - object that supports `sortDescriptors`, `containsHeader`, and `caseSensitive` to define how sorting should behave. +- `sortDescriptor` - object that defines a single sort rule with `field`, `order`, and an optional `sortComparer` for custom comparison logic. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/template.md b/Document-Processing/Excel/Spreadsheet/React/template.md index eb51ae2b8..d60745752 100644 --- a/Document-Processing/Excel/Spreadsheet/React/template.md +++ b/Document-Processing/Excel/Spreadsheet/React/template.md @@ -9,7 +9,11 @@ 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 Template is used for adding HTML elements into Spreadsheet. You can add the cell template in spreadsheet by using the [template](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rangemodel#template) property and specify the address using the [address](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rangemodel#address) property inside the `ranges` property. + +## Events & data flow + + You can 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. The following sample describes the above behavior. @@ -26,9 +30,13 @@ Sample link: [`Cell template`](https://document.syncfusion.com/demos/spreadsheet {% previewsample "/document-processing/code-snippet/spreadsheet/react/template-cs1" %} +## Template Customization + +You can customize the Html elements similar to Syncfusion® components (TextBox, DropDownList, RadioButton, MultiSelect, DatePicker etc) by using the [beforeCellRender](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#beforecellrender) event. In this demo, Cell template is applied to `C2:C9` and instantiated with Html input components like TextBox, RadioButton, TextArea. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/undo-redo.md b/Document-Processing/Excel/Spreadsheet/React/undo-redo.md index f1be15396..65355b7f2 100644 --- a/Document-Processing/Excel/Spreadsheet/React/undo-redo.md +++ b/Document-Processing/Excel/Spreadsheet/React/undo-redo.md @@ -1,39 +1,39 @@ --- layout: post -title: Undo redo in React Spreadsheet component | Syncfusion +title: Undo & Redo in React Spreadsheet component | Syncfusion description: Learn here all about Undo redo in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. control: Undo redo platform: document-processing documentation: ug --- -# Undo redo in React Spreadsheet component +# 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. +`Undo` option helps you to reverse the last action performed and `Redo` option helps you to reapply the last undone action 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 default value for `allowUndoRedo` property is `true`. By default, the `UndoRedo` module is injected internally into Spreadsheet to perform undo redo. -## Undo +## Undo Action 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. * 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 +## Redo Action 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](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#actioncomplete) event. The following code example shows `How to update and customize your own actions for undo redo` functionality in the Spreadsheet control. @@ -54,9 +54,17 @@ The following code example shows `How to update and customize your own actions f {% previewsample "/document-processing/code-snippet/spreadsheet/react/undo-redo-cs1" %} +## Quick Lookup + +- `allowUndoRedo` - enables or disables undo/redo functionality, default is true. +- `undo` - used to reverses the last action performed. +- `redo` - used to reapply the last undone action. +- `updateUndoRedoCollection(args)` - adds a custom action to the undo/redo history. +- `actionComplete` - event used to handle custom undo/redo behavior. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/React/worksheet.md b/Document-Processing/Excel/Spreadsheet/React/worksheet.md index a6385fdb4..55f22d4bc 100644 --- a/Document-Processing/Excel/Spreadsheet/React/worksheet.md +++ b/Document-Processing/Excel/Spreadsheet/React/worksheet.md @@ -11,13 +11,13 @@ documentation: ug Worksheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. -## Add sheet +## Add a Worksheet You can dynamically add or insert a sheet by one of the following ways, * Click the `Add Sheet` button in the sheet tab. This will add a new empty sheet next to current active sheet. * Right-click on the sheet tab, and then select `Insert` option from the context menu to insert a new empty sheet before the current active sheet. -* Using [`insertSheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertsheet) method, you can insert one or more sheets at your desired index. +* Using [`insertSheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertsheet) method, you can insert one or more sheets at your desired index. The following code example shows the insert sheet operation in spreadsheet. @@ -40,7 +40,7 @@ The following code example shows the insert sheet operation in spreadsheet. ### 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. +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. The following code example shows how to insert a sheet programmatically and make it the active sheet. @@ -55,32 +55,34 @@ The following code example shows how to insert a sheet programmatically and make {% previewsample "/document-processing/code-snippet/spreadsheet/react/insert-sheet-change-active-sheet-cs1" %} -## Delete sheet +## Delete a Worksheet The Spreadsheet has support for removing an existing worksheet. You can dynamically delete the existing sheet by the following way, * 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. +* Using [`delete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#delete ) method to delete the sheets. +* Cannot able to delete worksheet if only one sheet exists. -## Rename sheet +## Rename a Worksheet You can dynamically rename an existing worksheet in the following way, -* Right-click on the sheet tab, and then select `Rename` option from the context menu. +* Right-click on the sheet tab, and then select `Rename` option from the context menu through the user interface. -## Headers + +## Show/Hide Worksheet Headers By default, the row and column headers are visible in worksheets. You can dynamically show or hide worksheet headers by using one of the following ways, * Switch to `View` tab, and then select `Hide Headers` option to hide both the row and column headers. -* Set `showHeaders` property in `sheets` as `true` or `false` to show or hide the headers at initial load. By default, the `showHeaders` property is enabled in each worksheet. +* Set `showHeaders` property in `sheets` as `true` or `false` to show or hide the headers at initial load. By default, the [showHeaders](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sheet#showheaders) property is enabled in each worksheet. -## Gridlines +## Show/Hide Worksheet Gridlines 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. @@ -105,13 +107,13 @@ The following code example shows the headers and gridlines operation in spreadsh Hiding a worksheet can help prevent unauthorized or accidental changes to your file. -There are three visibility state as like Microsoft Excel, +There are three visibility [SheetState](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sheetstate) as like Microsoft Excel, | State | Description | |-------|---------| | `Visible` | You can see the worksheet once the component is loaded. | | `Hidden` | This worksheet is not visible, but you can unhide by selecting the sheet from `List All Sheets` dropdown menu. | -| `VeryHidden` | This worksheet is not visible and cannot be unhidden. Changing the state property to `Visible` is the only way to view this sheet. | +| `VeryHidden` | This worksheet is not visible and cannot be unhidden. Changing the [state](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/sheet#state) property to `Visible` is the only way to view this sheet. | The following code example shows the three types of sheet visibility state. @@ -132,9 +134,16 @@ The following code example shows the three types of sheet visibility state. {% previewsample "/document-processing/code-snippet/spreadsheet/react/sheet-visiblity-cs1" %} +## Quick Lookup + +- `insertSheet(startIndex | sheetModel, endIndex)` - add one or more sheets. +- `delete(sheetName|sheetIndex)` - remove sheet(s). +- `goTo(address) `- focus/start cell to make a sheet active. +- Visibility: Visible | Hidden | VeryHidden - set via `sheets[i].state` or the sheet tab UI. + ## 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 its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to know how to present and manipulate data. ## See Also