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
Expand Up @@ -39,12 +39,12 @@ 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 |
|-------|---------|
| `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 the cell element and describes the cell `<td>` element. |
| `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 @@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: AI Assist Web API Server Setup in Angular Spreadsheet | Syncfusion
description: Learn how to set up and connect an ASP.NET Core Web API server for the AI Assist feature in the Syncfusion Angular Spreadsheet component.
platform: document-processing
control: AI Assist Web API Server Setup
control: Spreadsheet
documentation: ug
---

Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: AI Assist Integration in Angular Spreadsheet component | Syncfusion
title: AI Assist Integration in Angular Spreadsheet Component | Syncfusion
description: Learn how to set up and configure AI Assist in the Syncfusion Angular Spreadsheet component for AI-powered features.
platform: document-processing
control: AI Assist
documentation: ug
---

# AI Assist Integration in Angular Spreadsheet component
# AI Assist Integration in Angular Spreadsheet Component

## Integration

Expand All @@ -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/styles.css` file.
Add the following AI Assist dependent style references to the `src/styles.css` file:

```css
@import '../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ documentation: ug

AI Assist integrates seamlessly into your Angular 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.

For complete setup instructions, how-to guides, API references, and prompt examples, see [AI Assist Integration](./integration).
For complete setup steps, how-to guides, API references, and prompt examples, see [AI Assist Integration](./integration).

## How AI Assist Works in spreadsheet

Expand Down
16 changes: 8 additions & 8 deletions Document-Processing/Excel/Spreadsheet/Angular/cell-range.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: Cell Range in Angular Spreadsheet Component | Syncfusion
description: Learn here all about cell range in Syncfusion Essential Angular Spreadsheet component, it's elements and more.
platform: document-processing
control: Cell range
control: Cell range
documentation: ug
---

Expand All @@ -21,7 +21,7 @@ Wrap text can be applied or removed to a cell or range of cells in the following
* 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/angular/documentation/api/spreadsheet/index-default#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.
The following code example shows the wrap text functionality in the Spreadsheet.

{% tabs %}
{% highlight ts tabtitle="app.ts" %}
Expand Down Expand Up @@ -55,10 +55,10 @@ You can merge the range of cells in the following ways,
The available merge options in spreadsheet are,

| Type | Action |
|-------|---------|
| Merge All | Combines all the cells in a range in to a single cell (default). |
| Merge Horizontally | Combines cells in a range as row-wise. |
| Merge Vertically | Combines cells in a range as column-wise. |
|------|--------|
| Merge All | Combines all the cells in a range into a single cell (default). |
| Merge Horizontally | Combines cells in a range row-wise (across columns). |
| Merge Vertically | Combines cells in a range column-wise (across rows). |
| UnMerge | Splits the merged cells into multiple cells. |

The following code example shows the merge cells operation in spreadsheet.
Expand Down Expand Up @@ -169,7 +169,7 @@ The following code example demonstrates how to add custom data validation with a

The following features have some limitations in Data Validation:

* Entire row data validation.
* Applying data validation to an entire row.
* Insert row between the data validation.
* Copy/paste with data validation.
* Delete cells between data validation applied range.
Expand All @@ -183,7 +183,7 @@ You can do this by one of the following ways,
* Using “AutoFillOptions” menu which is open, while drag and drop the cell using fill handle element.
* Use the autoFill() method programmatically.

The available parameters in `autoFill()` method are,
The available parameters in `autoFill()` method are:

| Parameter | Type | Description |
|-----|------|----|
Expand Down
4 changes: 2 additions & 2 deletions Document-Processing/Excel/Spreadsheet/Angular/clipboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: Clipboard in Angular Spreadsheet component | Syncfusion
description: Learn here all about Clipboard in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Clipboard
control: Clipboard
documentation: ug
---

Expand Down Expand Up @@ -46,7 +46,7 @@ It is used to paste the clipboard data to the selected range, rows or columns. Y
* `Paste Special` - You can paste the values with formatting.
* `Paste` - You can paste only the values without formatting.

It also performs for external clipboard operation. If you perform cut and paste, clipboard data will be cleared, whereas in copy and paste the clipboard contents will be maintained. If you perform paste inside the copied range, the clipboard data will be cleared.
It also supports external clipboard operations. If you perform cut and paste, the clipboard data will be cleared, whereas in copy and paste the clipboard contents will be maintained. If you perform paste inside the copied range, the clipboard data will be cleared.

**User Interface**:

Expand Down
8 changes: 4 additions & 4 deletions Document-Processing/Excel/Spreadsheet/Angular/comment.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ The Syncfusion Spreadsheet does not automatically track user identity. To tag ne
selector: 'app-root',
standalone: true,
imports: [SpreadsheetAllModule],
// Set the author name. If not set, "Guest User" will be shown by default..
// Set the author name. If not set, "Guest User" will be shown by default.
template: `<ejs-spreadsheet [author]=author></ejs-spreadsheet>`
})
export class AppComponent {
Expand Down Expand Up @@ -71,7 +71,7 @@ You can edit the content of a comment or its replies directly within the comment
The **Resolve thread** option marks a comment thread as completed when the discussion or issue is addressed. When a thread is resolved, its background color changes to indicate the resolved state, and the reply input box and reply menu actions are hidden. Use **Reopen** to restore the comment if further discussion is needed.

### Resolve a comment
* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**.
* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**.

### Reopen a comment
* In the comment editor, click the **Reopen** button in the header to make the thread active again.
Expand Down Expand Up @@ -102,7 +102,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 the header for a resolved comment.

Deleting a thread removes the comment and all its replies from the cell.

Expand Down Expand Up @@ -162,7 +162,7 @@ You can save spreadsheet data along with **comments** using **File > Save As > M

### Why comments are not saved in `.xls`
The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**.
Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`.
Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`.

> To retain threaded comments, always save the workbook in **.xlsx** format.

Expand Down
8 changes: 4 additions & 4 deletions Document-Processing/Excel/Spreadsheet/Angular/context-menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ layout: post
title: Context menu in Angular Spreadsheet component | Syncfusion
description: Learn here all about Context menu in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Context menu
control: Context menu
documentation: ug
---

# Context menu in Angular 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/angular/documentation/api/spreadsheet/index-default#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

Expand Down Expand Up @@ -52,11 +52,11 @@ Please find the table below for default context menu items and their actions.
| `Delete` | Delete the selected worksheet from the spreadsheet. |
| `Rename` | Rename the selected worksheet. |
| [`Protect Sheet`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#protectsheet) | Prevent unwanted changes from others by limiting their ability to edit. |
| [`Hide`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hide) |Hide the selected worksheet. |
| [`Hide`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#hide) | Hide the selected worksheet. |

## Context Menu Customization

You can perform the following context menu customization options in the spreadsheet
You can perform the following context menu customization options in the spreadsheet:

* Add Context Menu Items
* Remove Context Menu Items
Expand Down
10 changes: 5 additions & 5 deletions Document-Processing/Excel/Spreadsheet/Angular/data-binding.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ layout: post
title: Data binding in Angular Spreadsheet component | Syncfusion
description: Learn here all about Data binding in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Data binding
control: Data binding
documentation: ug
---

# Data binding in Angular Spreadsheet component

The Spreadsheet uses [DataManager](https://helpej2.syncfusion.com/angular/documentation/data), which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of [DataManager](https://helpej2.syncfusion.com/angular/documentation/data) or JavaScript object array collection.
The Spreadsheet uses [DataManager](https://ej2.syncfusion.com/angular/documentation/data), which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of [DataManager](https://ej2.syncfusion.com/angular/documentation/data) or JavaScript object array collection.

> To bind data to a cell, use `cell data binding` support.

Expand All @@ -31,7 +31,7 @@ Refer to the following code example for local data binding.

{% previewsample "/document-processing/samples/spreadsheet/angular/local-data-binding-cs1" %}

> The local data source can also be provided as an instance of the [DataManager](https://helpej2.syncfusion.com/angular/documentation/data). By default, [DataManager](https://helpej2.syncfusion.com/angular/documentation/data) uses [`JsonAdaptor`](https://ej2.syncfusion.com/angular/documentation/data/adaptors#json-adaptor) for local data-binding.
> The local data source can also be provided as an instance of the [DataManager](https://ej2.syncfusion.com/angular/documentation/data). By default, [DataManager](https://ej2.syncfusion.com/angular/documentation/data) uses [`JsonAdaptor`](https://ej2.syncfusion.com/angular/documentation/data/adaptors#json-adaptor) for local data-binding.

### Customizing column data mapping

Expand All @@ -55,7 +55,7 @@ The following code example demonstrates how to customize the mapping of column d

## Remote data

To bind remote data to the Spreadsheet control, assign service data as an instance of [DataManager](https://helpej2.syncfusion.com/angular/documentation/data) to the `dataSource` property. To interact with remote data source, provide the service endpoint `url`.
To bind remote data to the Spreadsheet control, assign service data as an instance of [DataManager](https://ej2.syncfusion.com/angular/documentation/data) to the `dataSource` property. To interact with remote data source, provide the service endpoint `url`.

Refer to the following code example for remote data binding.

Expand Down Expand Up @@ -107,7 +107,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 `value` property.
The Spreadsheet control can bind the 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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ layout: post
title: Docker image deployment in Angular Spreadsheet component | Syncfusion
description: Learn here all about Docker image deployment in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Docker deployment
control: Docker deployment
documentation: ug
---

# Docker Image Overview in Angular Spreadsheet component
# Docker Image Deployment in Angular Spreadsheet Component

The [**Angular Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-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.

Expand All @@ -26,7 +26,7 @@ Have [`Docker`](https://www.docker.com/products/container-runtime#/download) ins

## How to deploy the Spreadsheet Docker Image

**Step 1:** Pull the spreadsheet-server image from Docker Hub.
**Step 1:** Pull the `spreadsheet-server` image from Docker Hub.

```console
docker pull syncfusion/spreadsheet-server
Expand Down
4 changes: 2 additions & 2 deletions Document-Processing/Excel/Spreadsheet/Angular/editing.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: Editing in Angular Spreadsheet component | Syncfusion
description: Learn here all about Editing in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Editing
control: Editing
documentation: ug
---

Expand Down Expand Up @@ -31,7 +31,7 @@ If the cell is in editable state, you can save the edited cell by one of the fol

## Cancel editing

To cancel the editing without saving the changes, you can use one of the following ways,
To cancel editing without saving the changes, use one of the following:

* Press `ESCAPE` key, this will remove the editable state and update the unchanged cell content.
* Using the [`closeEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#closeedit) method.
Expand Down
Loading