Skip to content
Open
10 changes: 5 additions & 5 deletions Document-Processing/Excel/Spreadsheet/Vue/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
---
Expand Down Expand Up @@ -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 |
|-------|---------|
Expand All @@ -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 |
|----------|-------------|
Expand Down Expand Up @@ -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. |

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
|---|---|
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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.

Expand Down
28 changes: 14 additions & 14 deletions Document-Processing/Excel/Spreadsheet/Vue/cell-range.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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,

Expand Down Expand Up @@ -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`.

Expand All @@ -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

Expand All @@ -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

Expand All @@ -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

Expand All @@ -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)" %}
Expand All @@ -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.

Expand Down Expand Up @@ -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,

Expand All @@ -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)" %}
Expand Down
12 changes: 6 additions & 6 deletions Document-Processing/Excel/Spreadsheet/Vue/clipboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand All @@ -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

Expand All @@ -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.

Expand All @@ -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)" %}
Expand Down
6 changes: 3 additions & 3 deletions Document-Processing/Excel/Spreadsheet/Vue/comment.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.

Expand Down
Loading