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
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Accessibility in EJ2 Javascript Spreadsheet control | Syncfusion
description: Learn here all about Accessibility in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more.
title: Accessibility in EJ2 JavaScript Spreadsheet control | Syncfusion
description: Learn here all about Accessibility in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Accessibility
control: Accessibility
documentation: ug
---

# Accessibility in EJ2 Javascript Spreadsheet control
# Accessibility in EJ2 JavaScript Spreadsheet control

The [JavaScript Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) 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 [JavaScript Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) 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 accessibility compliance for the Spreadsheet control is outlined below.

| Accessibility Criteria | Compatibility |
| -- | -- |
| [WCAG 2.2 ](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
| [Section 508 ](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
Expand Down Expand Up @@ -61,7 +61,7 @@ The Spreadsheet control followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/

## 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 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.

| Press | To do this |
|----------|-------------|
Expand Down Expand Up @@ -100,14 +100,15 @@ The Spreadsheet control followed the [keyboard interaction](https://www.w3.org/W
| 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. |

## Ensuring accessibility

The Spreadsheet control's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
The Spreadsheet control's accessibility levels are verified through the [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.


The accessibility compliance of the Spreadsheet control is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/spreadsheet.html) in a new window to evaluate the accessibility of the Spreadsheet control with accessibility tools.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# AI Assist Node.js Server Setup in JavaScript Spreadsheet

AI Assist requires a backend service to process prompts and return AI-generated responses. This topic explains how to create a **Node.js** server with **Azure OpenAI** credentials.
AI Assist requires a backend service to process prompts and return AI-generated responses. This how-to guide shows how to create a **Node.js** server with **Azure OpenAI** credentials and connect it to the JavaScript Spreadsheet.

## Prerequisites

Expand Down Expand Up @@ -80,7 +80,7 @@ Ensure your `package.json` includes `"type": "module"` to support ES module impo

Create a `.env` file in the project root and add your Azure OpenAI credentials:

```csharp
```ini
apiKey = Your_Azure_OpenAI_API_Key
endpoint = https://your-resource.openai.azure.com/
deployment = Your_Deployment_Name
Expand All @@ -91,7 +91,7 @@ apiVersion = Your_Azure_OpenAI_API_Version

## Configure required modules

Create `ai-model.js` to initialize the Azure OpenAI client using the credentials from `.env`:
Create `ai-model.js` in the project root to initialize the Azure OpenAI client using the credentials from `.env`. The client is created once and reused for every request.

```js
import { AzureOpenAI } from "openai";
Expand Down Expand Up @@ -157,13 +157,13 @@ app.listen(PORT, () => {

## Run the server

Run the following command to start the server:
From the project root, start the server:

```bash
npm start
```

The server runs on `http://localhost:3000`. Update the AI Assist endpoint like below:
The AI Assist chat endpoint exposed by this server is:

```
http://localhost:3000/api/AIAssist/Chat
Expand Down Expand Up @@ -206,8 +206,8 @@ The server accepts a `POST` request with the following JSON body:
```json
{
"messages": [
{ "role": "system", "content": "You are a spreadsheet assistant." },
{ "role": "user", "content": "Make the header row bold." }
{ "role": "system", "content": "You are a spreadsheet assistant." },
{ "role": "user", "content": "Make the header row bold." }
]
}
```
Expand All @@ -223,7 +223,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 @@ -58,7 +58,7 @@ dotnet add package Microsoft.Extensions.AI.OpenAI

## Configure credentials

Add the Azure OpenAI credentials in `appsettings.json` under `AI` section:
Add the Azure OpenAI credentials in `appsettings.json` under the `AI` section:

```json
{
Expand Down Expand Up @@ -201,7 +201,7 @@ https://localhost:{port}/api/AIAssist/Chat

## Connect to the JavaScript Spreadsheet

Once the server is listening, configure the `requestUrl` inside [`aiAssistSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#aiassistsettings) to point to the server endpoint:
After the server is running, configure the `requestUrl` inside [`aiAssistSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#aiassistsettings) to point to the server endpoint.

```js
ej.spreadsheet.Spreadsheet.Inject(ej.spreadsheet.AIAssist);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
spreadsheet.appendTo('#element');
```

This enables the AI Assist into the spreadsheet.
This enables AI Assist in the Spreadsheet.

### Configure AI Assist Settings

Use the [`aiAssistSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#aiassistsettings) property to connect the spreadsheet to the backend server and customize the AI Assist.
Use the [`aiAssistSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#aiassistsettings) property to connect the Spreadsheet to the backend server and customize the AI Assist.

```js
ej.spreadsheet.Spreadsheet.Inject(ej.spreadsheet.AIAssist);
Expand All @@ -90,8 +90,8 @@ Your Spreadsheet is now integrated with AI Assist and ready to use.
### Open and Close the AI Panel

* **Open**: Click the **AI Assist** button in the ribbon toolbar.
* **Close**: Click the **** button inside the panel header, or click the **AI Assist** ribbon button again.
* **Start new conversation.**: Click the **↺ (Refresh)** button in the panel header.
* **Close**: Click the **Close (✕)** button inside the panel header, or click the **AI Assist** ribbon button again.
* **Start a new conversation**: Click the **Refresh (↺)** button in the panel header.
* **Resize the panel**: Drag the left edge of the panel to make it wider or narrower.

### Undo an AI Action
Expand All @@ -100,7 +100,7 @@ All actions performed by AI Assist are recorded in the spreadsheet's undo/redo h

### How to Customize the Request Before Sending

Use the [`promptRequest`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#promptrequest) event to add custom datasuch as a user ID or session token to the request before it reaches your server.
Use the [`promptRequest`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#promptrequest) event to add custom data, such as a user ID or session token, to the request before it reaches your server.

```js
ej.spreadsheet.Spreadsheet.Inject(ej.spreadsheet.AIAssist);
Expand All @@ -122,8 +122,7 @@ You can also prevent the request entirely by setting `args.cancel = true`.

### How to Handle AI Responses

Use the [`promptResponse`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#promptresponse) event to run custom logic after the AI completes its task — for example, logging results or showing a notification.

Use the [`promptResponse`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#promptresponse) event to run custom logic after the AI completes its task, for example logging results or showing a notification.
```js
ej.spreadsheet.Spreadsheet.Inject(ej.spreadsheet.AIAssist);

Expand Down Expand Up @@ -182,15 +181,15 @@ If the AI panel displays an error message:

Type your request in plain English — no formulas or technical knowledge needed.

#### Data Analysis
#### Data analysis

| What to say | What it does |
|---|---|
| *"Can you give me a summary of this sheet?"* | Reviews your data and highlights key trends and totals |
| *"What are the top 5 rows by sales?"* | Picks out the highest-performing records from your data |
| *"Generate a full report for this sheet"* | Creates a structured report with KPIs, top records, and chart suggestions |

#### Data Operations
#### Data operations

| What to say | What it does |
|---|---|
Expand All @@ -207,7 +206,7 @@ Type your request in plain English — no formulas or technical knowledge needed
| *"Make the text italic and red in column C"* | Applies italic style and red font color to the column |
| *"Make the text fit inside the cells in column D"* | Turns on text wrapping so long text does not overflow |

#### Rules & Validation
#### Rules and validation

| What to say | What it does |
|---|---|
Expand All @@ -216,7 +215,7 @@ Type your request in plain English — no formulas or technical knowledge needed
| *"Only allow values between 1 and 100 in column B"* | Adds a data validation rule to restrict input |
| *"Add a dropdown list with Yes and No options to column C"* | Creates a dropdown for easy, consistent data entry |

#### Structure Management
#### Structure management

| What to say | What it does |
|---|---|
Expand All @@ -233,7 +232,7 @@ Type your request in plain English — no formulas or technical knowledge needed
| *"Show me only the rows where the region is India"* | Applies a filter so only matching rows are visible |
| *"Find all cells that say 'Pending' and change them to 'Done'"* | Runs a find and replace across the sheet |

#### Clipboard Actions
#### Clipboard actions

| What to say | What it does |
|---|---|
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# AI Assist in JavaScript 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 control. 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)

Expand All @@ -19,7 +19,7 @@ AI Assist integrates seamlessly into your JavaScript Spreadsheet application wit

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 All @@ -31,14 +31,14 @@ When you submit a prompt in the AI Assist panel, the following happens behind th
Your prompt is sent to the AI server, which reads it and determines what type of action you want — for example, formatting, editing, generating a report, or creating a chart. This step figures out the *what*.

- **Command Generation**
Once the intent is known, the spreadsheet's current data and the identified action are sent back to the AI. The AI then generates a precise set of instructions — such as which cells to update, what styles to apply, or what chart data to use. This step figures out the *how*.
Once the intent is known, the Spreadsheet's current data and the identified action are sent back to the AI. The AI then generates a precise set of instructions — such as which cells to update, what styles to apply, or what chart data to use. This step figures out the *how*.

- **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.
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

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

| Feature | Description |
|---|---|
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
---
layout: post
title: Global local in EJ2 Javascript Spreadsheet control | Syncfusion
description: Learn here all about Global local in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more.
title: Global local in EJ2 JavaScript Spreadsheet control | Syncfusion
description: Learn here all about Global local in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Global local
documentation: ug
---

# Global local in EJ2 Javascript Spreadsheet control
# Globalization and Localization in EJ2 JavaScript Spreadsheet control

## Localization

The [`Localization`](https://ej2.syncfusion.com/javascript/documentation/common/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/javascript/documentation/api/spreadsheet/#locale) value and translation object.
The [Localization](https://ej2.syncfusion.com/javascript/documentation/common/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on features such as cell formatting, Merge, and Data validation. You can change this text to other cultures (Arabic, Deutsch, French, and so on) by setting the [`locale`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#locale) property and providing a translation object via the [`L10n`](https://ej2.syncfusion.com/javascript/documentation/api/base/l10n) class.

The following list of properties and their values are used in the Spreadsheet.

Expand Down Expand Up @@ -137,7 +136,7 @@ RADIANS | Converts degrees into radians.
MATCH | Returns the relative position of a specified value in the given range.
DefineNameExists | This name already exists try a different name.
CircularReference | When a formula refers to one or more circular references this may result in an incorrect calculation.
ShowRowsWhere | Show rows where |
ShowRowsWhere | Show rows where
CustomFilterDatePlaceHolder | Choose a date
CustomFilterPlaceHolder | Enter the value
CustomFilter | Custom Filter
Expand Down Expand Up @@ -197,12 +196,12 @@ ProtectAllowUser | Allow all users of this worksheet to |
EditAlert | The cell you're trying to change is protected. To make a change, unprotect the sheet.
FindReplaceTooltip | Find & Replace
InsertingEmptyValue | Reference value is not valid.
ByRow | By Row
ByRow | By Row
ByColumn | By Column
MatchExactCellElements | Match Exact Cell Contents
EntercellAddress | Enter Cell Address
FindAndReplace | Find and Replace
ReplaceAllEnd | matches replaced with.
ReplaceAllEnd | matches replaced with.
FindNextBtn | Find Next
FindPreviousBtn | Find Previous
ReplaceBtn | Replace
Expand All @@ -213,7 +212,7 @@ SearchWithin | Search within
SearchBy | Search by
Reference | Reference
Workbook | Workbook
NoElements | We couldnt find what you were looking for.
NoElements | We couldn't find what you were looking for.
FindWhat | Find what
ReplaceWith | Replace with
EnterValue | Enter Value
Expand Down Expand Up @@ -411,7 +410,7 @@ The following example demonstrates the Spreadsheet in French [`fr-CH`] culture.

## 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/javascript/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 experience 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/javascript/documentation/api/spreadsheet#enablertl) to true.

{% tabs %}
{% highlight js tabtitle="index.js" %}
Expand Down
Loading