Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 28 additions & 14 deletions Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Accessibility in EJ2 ASP.NET CORE Spreadsheet Control
description: "Documentation for the accessibility in the Essential JS2 Spreadsheet, featuring WAI-ARIA standards."
description: "Documentation for accessibility in the Essential JS2 Spreadsheet, featuring WAI-ARIA standards."
platform: document-processing
control: Accessibility
documentation: ug
---

# Accessibility in EJ2 ASP.NET CORE Spreadsheet Control

The Spreadsheet control followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
The Spreadsheet control follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.

The accessibility compliance for the Spreadsheet control is outlined below.

Expand Down Expand Up @@ -39,12 +39,12 @@ The accessibility compliance for the Spreadsheet control is outlined below.

## WAI-ARIA attributes

The Spreadsheet control 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 control:
The Spreadsheet control follows [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 control:

| Attributes | Purpose |
|-------|---------|
| `grid` (role) | This role is added to the spreadsheet content table and describes the collection of rows and columns. |
| `gridcell` (role) | This role is added to the cell element and describes the rows `<td>` element. |
| `gridcell` (role) | This role is added to a cell element and represents an individual cell within a row. |
| `rowheader` (role) | This role is added to the row header and describes the header of the rows. |
| `colheader` (role) | This role is added to the column header and describes the header of the columns. |
| `aria-rowindex` (attribute) | This attribute describes the table's row index in the spreadsheet. |
Expand All @@ -56,12 +56,14 @@ The Spreadsheet control followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/
| `aria-label` (attribute) | This attribute describes the accessible name for the interactive elements. |
| `textbox` (role) | This role is assigned to the textbox that accepts text input. |
| `menu` (role) | This role has been added to the menu and describes the menu items. |
| `aria-expanded` (attribute) | This attribute describes the control (for example, dropdown) is expanded or collapsed. |
| `aria-multiline` (attribute) | This attribute defines what the Alt + Enter key does in the spreadsheet editor. |
| `aria-expanded` (attribute) | This attribute describes whether a control (for example, a dropdown) is expanded or collapsed. |
| `aria-multiline` (attribute) | This attribute indicates whether a textbox accepts multiple lines of input. |

## Keyboard interaction

The Spreadsheet control 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 control.
The Spreadsheet control follows [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, 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 control.

### Navigation Mode

| Press | To do this |
|----------|-------------|
Expand All @@ -71,15 +73,15 @@ The Spreadsheet control followed the [keyboard interaction](https://www.w3.org/W
| Right arrow | Navigate from the active cell to the next cell in the same row. |
| Tab | Navigate the active cell to the next cell in the same row. |
| Shift + Tab | Navigate the active cell to the previous cell in the same row. |
| Home | Moves the selection to starting column in worksheet. |
| Home | Move the selection to the first column in the worksheet. |
| Ctrl + Home | Move the selection to the first visible cell on a worksheet. |
| Shift + Home | Extend the cell selection to the first column of a worksheet. |
| Ctrl + Shift + Home | Extend the selection of cells to the beginning of the worksheet. |
| Ctrl + End | Move to the last cell on a worksheet, right most last column and last row cell. |
| Ctrl + End | Move the selection to the last cell in the worksheet (the intersection of the last row and last column). |
| Page Up | Move page up. |
| Page Down | Move page down. |
| Shift + Page Up | Perform page up by selecting all cells between. |
| Shift + Page Down | Perform page down by selecting all cells between. |
| Shift + Page Up | Extend the selection upward by one page. |
| Shift + Page Down | Extend the selection downward by one page. |
| Ctrl + Up | Navigate to the non-blank cell before the active cell in the same column. |
| Ctrl + Down | Navigate to the last non-blank cell in the same column as the active cell. |
| Ctrl + Left | Navigate to the non-blank cell before the active cell in the same row. |
Expand All @@ -94,14 +96,26 @@ The Spreadsheet control followed the [keyboard interaction](https://www.w3.org/W
| Ctrl + Shift + Right | Extend the cell selection to the last non-blank cell in the same row as the active cell. |
| Enter | Navigate the active cell to the next cell in the same column. |
| Shift + Enter | Navigate to the previous cell in the same column from the active cell. |
| Alt + Enter | While editing, add a new line. |


### Edit Mode

| Press | To do this |
|----------|-------------|
| Alt + Enter | Insert a new line while editing a cell. |
| Enter | Complete the cell editing and select the cell below in the same column. |
| Shift + Enter | Complete the cell editing and select the cell above in the same column. |
| 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. |


### Ribbon Navigation

| Press | To do this |
|----------|-------------|
| 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 arrow | Move the focus to the previous item in the ribbon content. |
| Right arrow | 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 @@ -13,7 +13,7 @@ AI Assist requires a backend service to process prompts and return AI-generated

## Prerequisites

Ensure the following are available before you begin.
Before you begin, ensure that the following prerequisites are available.

### Azure OpenAI credentials

Expand Down Expand Up @@ -163,7 +163,7 @@ Run the following command to start the server:
npm start
```

The server runs on `http://localhost:3000`. Update the AI Assist endpoint like below:
By default, the server runs at `http://localhost:3000`. Configure AI Assist to use the following endpoint:

```
http://localhost:3000/api/AIAssist/Chat
Expand Down Expand Up @@ -231,6 +231,6 @@ npm start

[Download Node.js Server](https://drive.google.com/file/d/1V3TlO_6GS3dV986I7sDizmE9kwojkOrx/view?usp=drive_link)

## See also
## See Also

* [Web API (.NET) server setup](./using-web-api)
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ AI Assist requires a backend service to process prompts and return AI-generated

## Prerequisites

Ensure the following are available before you begin.
Before you begin, ensure that the following prerequisites are available.

### Azure OpenAI credentials

Expand Down Expand Up @@ -193,7 +193,7 @@ Run the following command to start the Web API server:
dotnet run
```

The server runs on `https://localhost:{port}` (as defined in `launchSettings.json`). Update the AI Assist endpoint like below:
The server runs on the HTTPS URL configured in `Properties/launchSettings.json`. Replace `{port}` with the configured port and use the following AI Assist endpoint:

```
https://localhost:{port}/api/AIAssist/Chat
Expand Down Expand Up @@ -260,6 +260,6 @@ dotnet run

* [Web API Server](https://drive.google.com/file/d/13K7a89Vk4Xt7dgd4wt49q272bSVSVuz3/view?usp=drive_link)

## See also
## See Also

* [Node.js server setup](./using-node-js-server)
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 `<head>` section of `~/Pages/Shared/_Layout.cshtml`.
Add the Spreadsheet theme and the required AI Assist dependency styles to the `<head>` section of `~/Pages/Shared/_Layout.cshtml`.

{% tabs %}
{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
Expand Down Expand Up @@ -73,11 +73,11 @@ To enable `AIAssist` in the Spreadsheet tag helper, set the [`enableAIAssist`](h
{% endhighlight %}
{% endtabs %}

This enables the AI Assist into the spreadsheet.
This enables AI Assist in the Spreadsheet and displays the **AI Assist** button in the Ribbon.

### Configure AI Assist Settings

Use the [`aiAssistSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AiAssistSettings) property to connect the spreadsheet to the backend server and customize the AI Assist.
Use the [`aiAssistSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AiAssistSettings) property to configure the server side request URL, prompt placeholder, and prompt suggestions.

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
Expand All @@ -89,15 +89,15 @@ Use the [`aiAssistSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/syncf
<e-spreadsheet-aiassistsettings
requestUrl="https://localhost:{port}/api/AIAssist/Chat"
placeholder="Ask the AI about this sheet..."
promptSuggestions="@(new string[] { "Your suggestions" })">
promptSuggestions="@(new string[] { "Summarize this sheet", "Highlight duplicate values", "Create a chart from the selected data" })">
</e-spreadsheet-aiassistsettings>
</ejs-spreadsheet>
```

{% endhighlight %}
{% endtabs %}

Your Spreadsheet is now integrated with AI Assist and ready to use.
After completing this configuration, the Spreadsheet can send AI Assist prompts to the configured server side service.

## How-To Guides

Expand All @@ -110,7 +110,7 @@ Your Spreadsheet is now integrated with AI Assist and ready to use.

### Undo an AI Action

All actions performed by AI Assist are recorded in the spreadsheet's undo/redo history. Press Ctrl+Z to revert any change made by the AI, just like a manual edit.
All actions performed by AI Assist are recorded in the spreadsheet's undo/redo history. Press `Ctrl + Z` to revert any change made by the AI, just like a manual edit.

### How to Customize the Request Before Sending

Expand Down Expand Up @@ -191,8 +191,16 @@ If the AI panel displays an error message:

## API References

### Spreadsheet properties

| Property | Type | Description |
|----------|------|-------------|
| [`enableAIAssist`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableAIAssist) | `boolean` | Specifies whether AI Assist is enabled in the Spreadsheet. |

### AI Assist Settings

The [`aiAssistSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AIAssistSettings) property contains the following options:

| Property | Type | Description |
|---|---|---|
| `requestUrl` | `string` | The URL of your AI server endpoint. All prompts are sent here. |
Expand Down Expand Up @@ -276,7 +284,7 @@ Type your request in plain English — no formulas or technical knowledge needed
| *"Add a line chart showing the monthly trend"* | Creates a line chart to visualize changes over time |
| *"Insert a pie chart with a title called 'Revenue Split'"* | Creates a pie chart with a custom title |

## See also
## See Also

* [Node.js server setup](./ai-service/using-node-js-server)
* [Web API (.NET) server setup](./ai-service/using-web-api)
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
---
layout: post
title: AI Assist in ASP.NET Core Spreadsheet control | Syncfusion
title: AI Assist in ASP.NET Core Spreadsheet Control | Syncfusion
description: Learn about the AI Assist feature in the Syncfusion ASP.NET Core Spreadsheet control and how to configure it.
platform: document-processing
control: AI Assist
documentation: ug
---

# AI Assist in ASP.NET Core Spreadsheet control
# AI Assist in ASP.NET Core 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.

![Spreadsheet AI Assist panel](../images/spreadsheet_ai_assist.gif)

## Integration

AI Assist integrates seamlessly into your ASP.NET Core Spreadsheet application with minimal configuration. This includes injecting the module, enabling the feature, configuring the backend server connection, handling events, and exploring the full range of supported prompts.
To configure AI Assist, inject the required module, enable the feature, and connect the Spreadsheet to a server-side AI service. For setup instructions, event customization, API references, troubleshooting, and example prompts, see [AI Assist Integration](./integration).

For complete setup instructions, how-to guides, API references, and prompt examples, see [AI Assist Integration](./integration).
After completing the integration, open the AI Assist panel, submit a prompt, and verify that the requested operation is applied to the active worksheet.

## 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 All @@ -36,7 +36,7 @@ Once the intent is known, the spreadsheet's current data and the identified acti
- **Execution**
The generated instructions are applied directly to the spreadsheet. The result appears instantly in the grid, and a confirmation message is shown in the AI panel. Every change is also added to the undo history, so nothing is permanent.

## Supported Features
## Supported features

AI Assist supports a wide range of spreadsheet operations through natural language prompts:

Expand All @@ -48,7 +48,7 @@ AI Assist supports a wide range of spreadsheet operations through natural langua
| **Formatting** | Apply styles such as bold, italic, font color, background color, number formats, and wrap text. |
| **Structure Management** | Insert/delete rows and columns, merge cells, and freeze panes. |
| **Clipboard Actions** | Perform cut, copy, and paste operations through AI commands. |
| **Navigation** | Perform sorting, filtering, and find & replace operations. |
| **Navigation** | Perform sorting, filtering, and Find and Replace operations. |
| **Visualization** | Insert charts with multiple types, themes, titles, and sizing options. |

### Writing Effective Prompts
Expand Down
Loading