diff --git a/Document-Processing/Excel/Spreadsheet/Vue/accessibility.md b/Document-Processing/Excel/Spreadsheet/Vue/accessibility.md index d1ba95e6ee..5db13df695 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/accessibility.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/accessibility.md @@ -2,7 +2,7 @@ layout: post title: Accessibility in Vue Spreadsheet component | Syncfusion description: Learn here all about Accessibility in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more. -control: Accessibility +control: Spreadsheet platform: document-processing documentation: ug --- @@ -39,7 +39,7 @@ The accessibility compliance for the Spreadsheet component is outlined below. ## WAI-ARIA attributes -The Spreadsheet component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Spreadsheet component: +The Spreadsheet component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Spreadsheet component: | Attributes | Purpose | |-------|---------| @@ -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 follows 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 | |----------|-------------| @@ -100,8 +100,8 @@ The Spreadsheet component followed the [keyboard interaction](https://www.w3.org | Tab | Complete the cell editing and select the next cell in the same row. | | Shift + Tab | Complete the cell editing and select the previous cell in the same row. | | Alt | Focus on the active ribbon tab. | -| Left | Move the focus to the previous items in the ribbon content. | -| Right | Move the focus to the next items in the ribbon content. | +| Left | Move the focus to the previous item in the ribbon content. | +| Right | Move the focus to the next item in the ribbon content. | | Alt + Down | Open the ribbon dropdown menu. | | Esc / Alt + Up | Close the ribbon dropdown menu. | diff --git a/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/ai-service/using-node-js-server.md b/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/ai-service/using-node-js-server.md index fd42bd3e1b..56d7d25610 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/ai-service/using-node-js-server.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/ai-service/using-node-js-server.md @@ -245,7 +245,7 @@ And returns: ## Sample -A Node.js server sample project is available for quick setup. Extract the archive, update the Azure OpenAI credentials in the `.env` file, and start the server using the following command +A Node.js server sample project is available for quick setup. Extract the archive, update the Azure OpenAI credentials in the `.env` file, and start the server using the following command: ```bash npm start diff --git a/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/ai-service/using-web-api.md b/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/ai-service/using-web-api.md index 36343a85c1..4521b698ca 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/ai-service/using-web-api.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/ai-service/using-web-api.md @@ -17,7 +17,7 @@ Ensure the following are available before you begin. ### Azure OpenAI credentials -You must have an Azure OpenAI resource. Collect the following values from the [Azure Portal](https://portal.azure.com): +Create or have access to an Azure OpenAI resource. Collect the following values from the [Azure Portal](https://portal.azure.com): | Credential | Description | |---|---| @@ -42,7 +42,7 @@ const azureDeploymentName = 'Your_Deployment_Name'; ## Install dependencies -Run the following commands in your Web API project to install the required NuGet packages: +After creating the Web API project, run the following commands to install the required NuGet packages: ```bash dotnet add package Azure.AI.OpenAI diff --git a/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/integration.md b/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/integration.md index debb73d62b..a98a334376 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/integration.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/integration.md @@ -24,7 +24,7 @@ Ensure the following before integrating AI Assist: ### Add CSS references -Add the following AI Assist dependent style references to the `src/App.vue` file. +Add the following AI Assist dependent style references to the `src/App.vue` file, in addition to the base Spreadsheet theme that is already imported: ```css @import '../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css'; @@ -70,7 +70,7 @@ export default { {% endhighlight %} {% endtabs %} -This enables the AI Assist into the spreadsheet. +This enables AI Assist in the spreadsheet. ### Configure AI Assist Settings @@ -215,17 +215,17 @@ export default { If the AI panel displays an error message: -1. Verify the server is running - * Confirm your Node.js or Web API server is active - * Check the console for startup messages -2. Check the requestUrl +1. Verify the server is running. + * Confirm your Node.js or Web API server is active. + * Check the console for startup messages. +2. Check the `requestUrl`. * Ensure the URL matches your server's exact address and port * For local development: - * Node.js: http://localhost:3000/api/AIAssist/Chat - * Web API (.NET): https://localhost:5001/api/AIAssist/Chat + * Node.js: `http://localhost:3000/api/AIAssist/Chat` + * Web API (.NET): `https://localhost:5001/api/AIAssist/Chat` 3. Verify CORS is enabled * Your Vue app origin must be allowed in the server's CORS policy - * Default Vue dev server: http://localhost:5173 (Vite) or http://localhost:8080 (Vue CLI) + * Default Vue dev server: `http://localhost:5173` (Vite) or `http://localhost:8080` (Vue CLI) 4. Use browser DevTools * Open the Network tab to inspect failed requests * Check for 404, 500, or CORS errors diff --git a/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/overview.md b/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/overview.md index 6b40eac241..35dd2ba2b4 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/overview.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/ai-assist/overview.md @@ -9,7 +9,7 @@ documentation: ug # AI Assist in Vue Spreadsheet control -**AI Assist** brings AI-powered capabilities directly into the spreadsheet. Instead of manually applying formatting, writing formulas, or organizing data, you can describe what you want in plain English — and the AI Assist performs the action for you. +**AI Assist** brings AI-powered capabilities directly into the Spreadsheet. Instead of manually applying formatting, writing formulas, or organizing data, you can describe what you want in plain English — and AI Assist performs the action for you. ![Spreadsheet AI Assist panel](../images/spreadsheet_ai_assist.gif) @@ -19,7 +19,7 @@ AI Assist integrates seamlessly into your Vue Spreadsheet application with minim For complete setup instructions, how-to guides, API references, and prompt examples, see [AI Assist Integration](./integration). -## How AI Assist Works in spreadsheet +## How AI Assist Works in the Spreadsheet Understanding how AI Assist processes your request helps you write better prompts and get more reliable results. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/cell-range.md b/Document-Processing/Excel/Spreadsheet/Vue/cell-range.md index 32b904abed..8a9e9bb3c7 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/cell-range.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/cell-range.md @@ -13,13 +13,13 @@ A group of cells in a sheet is known as cell range. ## Wrap text -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/vue/documentation/api/spreadsheet/#allowwrap) property to enable or disable the wrap text support in spreadsheet. +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/vue/documentation/api/spreadsheet#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. * 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/vue/documentation/api/spreadsheet/#wrap) method, you can apply or remove the wrap text once the component is loaded. +* Using the [`wrap`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#wrap) method, you can apply or remove the wrap text once the component is loaded. The following code example shows the wrap text functionality in spreadsheet. @@ -43,13 +43,13 @@ The following features have some limitations in wrap text: ## Merge 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/vue/documentation/api/spreadsheet/#allowmerge) property to enable or disable the merge cells option in spreadsheet. +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/vue/documentation/api/spreadsheet#allowmerge) property to enable or disable the merge cells option in spreadsheet. -You can merge the range of cells in the following ways, +You can merge a range of cells in the following ways, * Set the `rowSpan` and `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/vue/documentation/api/spreadsheet/#merge) method to merge the range of cells, once the component is loaded. +* Use [`merge`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#merge) method to merge the range of cells, once the component is loaded. The available merge options in spreadsheet are, @@ -82,7 +82,7 @@ The following features have some limitations in Merge: ## Data Validation -Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowdatavalidation) property to enable or disable data validation. +Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowdatavalidation) property to enable or disable data validation. > * The default value for `allowDataValidation` property is `true`. @@ -93,7 +93,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/vue/documentation/api/spreadsheet/#adddatavalidation) method programmatically. +* Use the [`addDataValidation()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#adddatavalidation) method programmatically. ### Clear Validation @@ -102,7 +102,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/vue/documentation/api/spreadsheet/#removedatavalidation) method programmatically. +* Use the [`removeDataValidation()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#removedatavalidation) method programmatically. ### Highlight Invalid Data @@ -111,7 +111,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/vue/documentation/api/spreadsheet/#addinvalidhighlight) method programmatically. +* Use the [`addInvalidHighlight()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#addinvalidhighlight) method programmatically. ### Clear Highlighted Invalid Data @@ -120,7 +120,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/vue/documentation/api/spreadsheet/#removeinvalidhighlight) method programmatically. +* Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#removeinvalidhighlight) method programmatically. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -143,10 +143,10 @@ For example, consider a scenario where you want to ensure that a cell contains a When this rule is applied, the Spreadsheet evaluates the entered value against the formula. If a user enters a value outside the specified range, an alert notifies them of the invalid input. This helps users correct errors efficiently and ensures that only desired values are accepted. -You can apply custom data validation using two methods. +You can apply custom data validation in 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/vue/documentation/api/spreadsheet/#adddatavalidation) method, which allows developers to set custom rules dynamically via code. +* The second method is programmatically, using the [`addDataValidation()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#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. @@ -179,7 +179,7 @@ Clear feature helps you to clear the cell contents (formulas and data), formats 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/vue/documentation/api/spreadsheet/#clear) method to clear the values. +* Using the [`clear()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#clear) method to clear the values. Clear has the following types in the spreadsheet, @@ -192,7 +192,7 @@ Clear has the following types in the spreadsheet, ### Methods -Clear the cell contents and formats in the Spreadsheet document by using the [clear](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clear) method. The [clear](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clear) method has `type` and `range` as parameters. The following code example shows how to clear the cell contents and formats in the button click event. +Clear the cell contents and formats in the Spreadsheet document by using the [clear](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#clear) method. The [clear](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#clear) method has `type` and `range` as parameters. The following code example shows how to clear the cell contents and formats in the button click event. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/Excel/Spreadsheet/Vue/clipboard.md b/Document-Processing/Excel/Spreadsheet/Vue/clipboard.md index 6ae3de027e..036d00d64f 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/clipboard.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/clipboard.md @@ -9,9 +9,9 @@ documentation: ug # Clipboard in Vue 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/vue/documentation/api/spreadsheet/#enableclipboard) property in Spreadsheet. +The Spreadsheet supports clipboard operations (cut, copy, and paste). Clipboard operations can be enabled or disabled by setting the [`enableClipboard`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#enableclipboard) property in Spreadsheet. -> By default, the `enableClipboard` property is true. +> By default, the `enableClipboard` property is `true`. ## Cut @@ -24,7 +24,7 @@ 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/vue/documentation/api/spreadsheet/#cut) method. +* Using the [`cut`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#cut) method. ## Copy @@ -37,7 +37,7 @@ 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/vue/documentation/api/spreadsheet/#copy) method. +* Using the [`copy`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#copy) method. ## 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/vue/documentation/api/spreadsheet/#paste) method. +* Using the [`paste`](https://ej2.syncfusion.com/vue/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. @@ -72,7 +72,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/vue/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 the Spreadsheet. In the [`actionBegin`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#actionbegin) event, you can set `cancel` argument as false in paste request type. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/Excel/Spreadsheet/Vue/comment.md b/Document-Processing/Excel/Spreadsheet/Vue/comment.md index 54021ec62f..df604cac9e 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/comment.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/comment.md @@ -79,9 +79,9 @@ The **Resolve thread** option marks a comment thread as completed when the discu ![Resolve and reopen in Spreadsheet](./images/spreadsheet_resolve_reopen.gif) -You can also use the `isResolved` property in the comment model when initializing or updating comments programmatically. +You can also set the `isResolved` property in the comment model when initializing or updating comments programmatically. -**Example: Using `isResolved` property in the comment model with the `updateCell` method** +**Example: Using the `isResolved` property in the comment model with the `updateCell` method** ```ts // Update a cell with a comment using the updateCell method @@ -104,7 +104,7 @@ You can delete either a specific reply or an entire comment thread (including al ### Deleting a comment thread * **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**. * **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment. -* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment or use the **Delete Thread** button in header for a resolved comment. +* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment, or use the **Delete Thread** button in header for a resolved comment. Deleting a thread removes the comment and all its replies from the cell. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/context-menu.md b/Document-Processing/Excel/Spreadsheet/Vue/context-menu.md index 1ac24a45bd..a144e38e7f 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/context-menu.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/context-menu.md @@ -9,9 +9,9 @@ documentation: ug # Context menu in Vue 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/vue/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/vue/documentation/api/spreadsheet#enablecontextmenu) property to enable/disable context menu. -> The default value for the `enableContextMenu` property is `true`. +> The default value of the `enableContextMenu` property is `true`. ## Context Menu Items in Row Cell @@ -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/vue/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/vue/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/vue/documentation/api/spreadsheet/#paste) | Paste the data from clipboard to spreadsheet. | -| [`Paste Special`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/spreadsheet/#filter) | Perform filtering to the selected cells based on an active cell’s value. | -| [`Sort`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#sort) | Perform sorting to the selected range of cells by ascending or descending. | -| [`Hyperlink`](https://ej2.syncfusion.com/vue/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/vue/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/vue/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/vue/documentation/api/spreadsheet#paste) | Paste the data from clipboard to spreadsheet. | +| [`Paste Special`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/spreadsheet#filter) | Perform filtering to the selected cells based on an active cell’s value. | +| [`Sort`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#sort) | Perform sorting to the selected range of cells by ascending or descending. | +| [`Hyperlink`](https://ej2.syncfusion.com/vue/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/vue/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/vue/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/vue/documentation/api/spreadsheet/#paste) | Paste the data from clipboard to spreadsheet. | -| [`Paste Special`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/spreadsheet/#insertrow) / [`Insert Columns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#insertcolumn) | Insert new rows or columns into the worksheet. | -| [`Delete Rows`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#delete) / [`Delete Columns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#delete) | Delete existing rows or columns from the worksheet. | -| [`Hide Rows`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#hiderow) / [`Hide Columns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#hidecolumn) | Hide the rows or columns. | -| [`UnHide Rows`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#hiderow) / [`UnHide Columns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#hidecolumn) | Show the hidden rows or columns. | +| [`Cut`](https://ej2.syncfusion.com/vue/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/vue/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/vue/documentation/api/spreadsheet#paste) | Paste the clipboard contents into the Spreadsheet. | +| [`Paste Special`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/spreadsheet#insertrow) / [`Insert Columns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#insertcolumn) | Insert new rows or columns into the worksheet. | +| [`Delete Rows`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#delete) / [`Delete Columns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#delete) | Delete existing rows or columns from the worksheet. | +| [`Hide Rows`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#hiderow) / [`Hide Columns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#hidecolumn) | Hide the rows or columns. | +| [`UnHide Rows`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#hiderow) / [`UnHide Columns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#hidecolumn) | Show the hidden rows or columns. | ## Context Menu Items in Pager @@ -51,8 +51,8 @@ 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/vue/documentation/api/spreadsheet/#protectsheet) | Prevent unwanted changes from others by limiting their ability to edit. | -| [`Hide`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#hide) |Hide the selected worksheet. | +| [`Protect Sheet`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#protectsheet) | Prevent unwanted changes from others by limiting their ability to edit. | +| [`Hide`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#hide) |Hide the selected worksheet. | ## Context Menu Customization @@ -64,7 +64,7 @@ You can perform the following context menu customization options in the spreadsh ### Add Context Menu Items -You can add the custom items in context menu using the [`addContextMenuItems`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#addcontextmenuitems) in `contextmenuBeforeOpen` event +You can add the custom items in context menu using the [`addContextMenuItems`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#addcontextmenuitems) in `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/vue/documentation/api/spreadsheet/#removecontextmenuitems) in `contextmenuBeforeOpen` event +You can remove the items in context menu using the [`removeContextMenuItems`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#removecontextmenuitems) in `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/vue/documentation/api/spreadsheet/#enablecontextmenuitems) in `contextmenuBeforeOpen` event +You can enable/disable the items in context menu using the [`enableContextMenuItems`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#enablecontextmenuitems) in `contextmenuBeforeOpen` event In this demo, Rename item is disabled in the pager context menu. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/data-binding.md b/Document-Processing/Excel/Spreadsheet/Vue/data-binding.md index 32d5348fab..270fef84ee 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/data-binding.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/data-binding.md @@ -15,7 +15,7 @@ The Spreadsheet uses [`DataManager`], which supports both RESTful JSON data serv ## Local data -To bind local data to the Spreadsheet, you can assign a JavaScript object array to the `dataSource` property. +To bind local data to the Spreadsheet, assign a JavaScript object array to the `dataSource` property. Refer to the following code example for local data binding. @@ -34,7 +34,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/vue/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/vue/documentation/api/spreadsheet/rangeModel#fieldsorder) property. > You can customize the mapping of column data only in the local data binding support. @@ -102,7 +102,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 achieve this you can use the +The Spreadsheet control can bind data to an individual cell in a sheet. To achieve this, you can use the `value` property. Refer to the following code example for cell data binding. @@ -149,11 +149,11 @@ The following table defines the arguments of the `dataSourceChanged` event. ## Dynamic data binding using updateRange method -The [updateRange](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#updaterange) method allows you to dynamically update the [dataSource](https://ej2.syncfusion.com/vue/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/vue/documentation/api/spreadsheet#updaterange) method allows you to dynamically update the [dataSource](https://ej2.syncfusion.com/vue/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/vue/documentation/api/spreadsheet/#updaterange) method, provide the new [dataSource](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/rangeModel/#datasource) and specify the starting cell for the update using the [startCell](https://ej2.syncfusion.com/vue/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/vue/documentation/api/spreadsheet#updaterange) method, provide the new [dataSource](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/rangeModel#datasource) and specify the starting cell for the update using the [startCell](https://ej2.syncfusion.com/vue/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/vue/documentation/api/spreadsheet/#updaterange) method. +The following code example demonstrates how to dynamically update data using the [updateRange](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#updaterange) method. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/Excel/Spreadsheet/Vue/docker-deployment.md b/Document-Processing/Excel/Spreadsheet/Vue/docker-deployment.md index c77d8128c1..07d8f35245 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/docker-deployment.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/docker-deployment.md @@ -3,11 +3,11 @@ layout: post title: Docker image deployment in Vue Spreadsheet component | Syncfusion description: Learn here all about Docker image deployment in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Docker deployment +control: Docker deployment documentation: ug --- -# Docker Image Overview in Vue Spreadsheet component +# Docker Image Deployment in Vue Spreadsheet Component The [**Syncfusion® Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents. @@ -19,7 +19,7 @@ The Spreadsheet is supported on the [JavaScript](https://www.syncfusion.com/java ## Prerequisites -Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment: +Install [`Docker`](https://www.docker.com/products/container-runtime#/download) on your environment. * On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). * On macOS, install [`Docker for Mac`](https://docs.docker.com/desktop/install/mac-install/). @@ -57,7 +57,7 @@ docker-compose up Now the Spreadsheet server Docker instance runs on localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Spreadsheet Web API open and save service at `http://localhost:6002/api/spreadsheet/open` and `http://localhost:6002/api/spreadsheet/save`. -**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://helpej2.syncfusion.com/vue/documentation/api/spreadsheet/#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://helpej2.syncfusion.com/vue/documentation/api/spreadsheet/#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet component. For more information on how to get started with the Spreadsheet component, refer to this [`getting started page.`](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/getting-started). +**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://helpej2.syncfusion.com/vue/documentation/api/spreadsheet#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://helpej2.syncfusion.com/vue/documentation/api/spreadsheet#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet component. For more information on how to get started with the Spreadsheet component, refer to this [`getting started page.`](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/getting-started). {% tabs %} diff --git a/Document-Processing/Excel/Spreadsheet/Vue/how-to/change-active-sheet.md b/Document-Processing/Excel/Spreadsheet/Vue/how-to/change-active-sheet.md index 9c25db3296..6875eff7c4 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/how-to/change-active-sheet.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/how-to/change-active-sheet.md @@ -1,15 +1,15 @@ --- layout: post -title: Changing the active sheet while importing a file in the Vue Spreadsheet component | Syncfusion -description: Learn here all about changing the active sheet index while importing a file in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more. +title: Change Active Sheet When Importing a File | Syncfusion +description: Learn here all about changing the active sheet index when importing a file in the Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more. control: Spreadsheet platform: document-processing documentation: ug --- -## Changing the active sheet while importing a file in Vue Spreadsheet component +# Change Active Sheet When Importing a File in Vue Spreadsheet Component -You can change the active sheet of imported file by updating [`activeSheetIndex`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#activesheetindex) property on the [`openComplete`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#opencomplete) event. +You can change the active sheet of the imported file by updating the [`activeSheetIndex`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#activesheetindex) property on the [`openComplete`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#opencomplete) event. The following code example shows how to set the active sheet when importing an Excel file. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/Vue/how-to/create-a-object-structure.md index 94dd68ec0f..236512b76f 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/how-to/create-a-object-structure.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/how-to/create-a-object-structure.md @@ -7,19 +7,19 @@ platform: document-processing documentation: ug --- -# Create a object structure in Vue Spreadsheet component +# Create an object structure in Vue Spreadsheet component -This topic guides you to construct a JSON structure that can be passed to the [`openFromJson`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#openfromjson) method to render the spreadsheet. The JSON structure is an object with the key as `Workbook` and the [`properties`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#properties) of the spreadsheet as value. +This topic guides you to construct a JSON structure that can be passed to the [`openFromJson`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#openfromjson) method to render the spreadsheet. The JSON structure is an object with the key as `Workbook` and the [`properties`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#properties) of the spreadsheet as value. ```js { Workbook: {} } ``` -The following properties are the root level properties of the `Workbook` object. +The following properties are the root-level properties of the `Workbook` object. | Property | Type | Description | |-------|-------|-------| -| activeSheetIndex | number | Specifies active sheet index in the workbook. | +| activeSheetIndex | number | Specifies the active sheet index in the workbook. | | sheets | `Sheet[]` | Contains a list of sheet properties. | | definedNames | `DefineName[]` | Specifies the name for a range and uses it in the formula for calculation. | @@ -77,14 +77,14 @@ The following table defines each property of the `CellStyle`. | Property | Type | Description | |-------|-------|-------| -| fontFamily | `FontFamily` | Specifies font family of the cell. | -| verticalAlign | `VerticalAlign` | Specifies vertical align of the cell. | -| textAlign | `TextAlign` | Specifies text align style of the cell. | -| textIndent | string | Specifies text indent style of the cell. | -| color | string | Specifies font color of the cell. | +| fontFamily | `FontFamily` | Specifies the font family of the cell. | +| verticalAlign | `VerticalAlign` | Specifies the vertical alignment of the cell. | +| textAlign | `TextAlign` | Specifies the text alignment of the cell. | +| textIndent | string | Specifies the text indent of the cell. | +| color | string | Specifies the font color of the cell. | | backgroundColor | string | Specifies the background color of the cell. | -| fontWeight | `FontWeight` | Specifies font weight of the cell. | -| fontStyle | `FontStyle` | Specifies font style of the cell. | +| fontWeight | `FontWeight` | Specifies the font weight of the cell. | +| fontStyle | `FontStyle` | Specifies the font style of the cell. | | fontSize | string | Specifies font size of the cell. | | textDecoration | `TextDecoration` | Specifies text decoration of the cell. | | border | string | Specifies border of the cell. | @@ -142,9 +142,9 @@ The following table defines each property of the `DefinedName`. | Property | Type | Description | |-------|-------|-------| -| name | string | Specifies a name for the defined name, which can be used in the formula. | -| scope | string | Specifies scope for the defined name. | -| comment | string | Specifies comment for the defined name. | +| name | string | Specifies the defined name, which can be used in formulas. | +| scope | string | Specifies the scope of the defined name. | +| comment | string | Specifies comment describing the defined name. | | refersTo | string | Specifies reference for the defined name. | In the following code, the JSON structure is passed to the `openFromJson` method to render the spreadsheet in the `created` event. @@ -216,4 +216,4 @@ export default { {% endhighlight %} {% endtabs %} -Sample link : [`create-a-object-structure`](https://codesandbox.io/s/vue-template-forked-rzkpc) \ No newline at end of file +Sample link : [`create-a-object-structure`](https://codesandbox.io/p/sandbox/vue-template-forked-rzkpc) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Vue/how-to/identify-the-context-menu-opened.md b/Document-Processing/Excel/Spreadsheet/Vue/how-to/identify-the-context-menu-opened.md index 1725411738..6fd2cf7a61 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/how-to/identify-the-context-menu-opened.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/how-to/identify-the-context-menu-opened.md @@ -1,24 +1,24 @@ --- layout: post -title: Identify the context menu opened in the Vue Spreadsheet component | Syncfusion +title: Identify context menu opened in Vue Spreadsheet component | Syncfusion description: Learn here all about how to identify the context menu opened in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more. control: Spreadsheet platform: document-processing documentation: ug --- -## Identify the context menu opened in Vue Spreadsheet component +# Identify the context menu opened in Vue Spreadsheet component The Spreadsheet includes several context menus that will open and display depending on the action. When you right-click on a cell, for example, a context menu with options related to the cell element appears. -The class name returned by the [contextMenuBeforeOpen](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#contextmenubeforeopen) event can be used to identify the context menu that is opened. The context menus and their class names are tabulated below. +The class name returned by the [contextMenuBeforeOpen](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#contextmenubeforeopen) event can be used to identify the context menu that is opened. The context menus and their class names are tabulated below. | Class name | Context menu name | |-------|---------| -| .e-sheet-content | Cell context menu | -| .e-toolbar-item | Footer context menu | -| .e-rowhdr-table | Row header context menu | -| .e-colhdr-table | Column header context menu | +| `.e-sheet-content` | Cell context menu | +| `.e-toolbar-item` | Footer context menu | +| `.e-rowhdr-table` | Row header context menu | +| `.e-colhdr-table` | Column header context menu | The following code example shows how to identify the context menu opened.