Skip to content

983001: Blazor Spreadsheet UG Documentation Update Using Standardized… #1429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

983001: Blazor Spreadsheet UG Documentation Update Using Standardized… #1429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
30ff31b
983001: Blazor Spreadsheet UG Documentation Update Using Standardized…
Yazhdilipan-SF5086 Sep 22, 2025
432a3ba
Resolved issue Title properply
Yazhdilipan-SF5086 Sep 23, 2025
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
64 changes: 30 additions & 34 deletions Document-Processing/Excel/Spreadsheet/Blazor/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
---
layout: post
title: Accessibility in Blazor Spreadsheet Component | Syncfusion
description: Checkout and learn here all about accessibility in Syncfusion Blazor Spreadsheet component and much more.
description: Learn about accessibility support in the Syncfusion Blazor Spreadsheet component, including WCAG 2.2, Section 508, keyboard shortcuts, and WAI-ARIA attributes.
platform: document-processing
control: Spreadsheet
documentation: ug
---

# Accessibility in Blazor Spreadsheet

The Syncfusion Blazor Spreadsheet 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 is outlined below.
The Syncfusion Blazor Spreadsheet 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/), and [WAI-ARIA](https://www.w3.org/TR/wai-aria/#roles) roles that are commonly used to evaluate accessibility.
<style>
.post .post-content img {
display: inline-block;
margin: 0.5em 0;
}
</style>
The accessibility compliance for the Spreadsheet component is outlined below.
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>

| Accessibility Criteria | Compatibility |
| -- | -- |
Expand All @@ -24,39 +32,27 @@ The accessibility compliance for the Spreadsheet is outlined below.
| [Keyboard Navigation Support](https://blazor.syncfusion.com/documentation/common/accessibility#keyboard-navigation-support) |<img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
| [Axe-core Accessibility Validation](https://blazor.syncfusion.com/documentation/common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |

<style>
.post .post-content img {
display: inline-block;
margin: 0.5em 0;
}
</style>
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>

## WAI-ARIA attributes
The Syncfusion Blazor Spreadsheet followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Spreadsheet:
The Syncfusion Blazor Spreadsheet follows WAI-ARIA patterns to meet accessibility standards. The following ARIA attributes are used in the Spreadsheet component:

| Attributes | Purpose |
|---------------|-------------|
| `role=textbox` | Identifies an element as an input field that allows text entry.|
| `role=button` | To represent the element that acts as a button in the component. |
| `role=button` | Identifies an element that functions as a button. |
| `role=combobox` | Identifies a component that combines a text input with a popup listbox or tree. |
| `role=menu` | Defines a container for a collection of choices or commands presented in a contextual or dropdown format. |
| `role=alert` | Designates an element that displays im portant, time-sensitive information. |
| `role=alert` | Designates an element that displays important, time-sensitive information. |
| `aria-label`| This attribute describes the accessible name for the interactive elements. |
| `aria-expanded` | This attribute describes the control (for example, dropdown) is expanded or collapsed. |
| `aria-expanded` | Indicates whether a collapsible element (e.g., a dropdown) is currently expanded or collapsed. |
| `aria-live` | Defines a region as "live", meaning its content updates dynamically. Values include "off", "polite" (waits until idle), or "assertive" (announces immediately). |
| `aria-rowindex` | Defines row index of the row with respect to the total number of rows within the Spreadsheet. |
| `aria-colindex` | Defines the column index of the column with respect to the total number of columns within the Spreadsheet. |
| `aria-rowindex` | Defines the row index of a cell with respect to the total number of rows in the Spreadsheet. |
| `aria-colindex` | Defines the column index of a cell with respect to the total number of columns in the Spreadsheet. |
| `aria-multiline` | Indicates whether a textbox accepts multiple lines of input or only a single line. |


## Keyboard shortcuts

The Syncfusion Blazor Spreadsheet followed keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet.
The Syncfusion Blazor Spreadsheet follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet.

<b>Clipboard</b>

Expand Down Expand Up @@ -86,27 +82,27 @@ The Syncfusion Blazor Spreadsheet followed keyboard interaction guidelines, maki
|-----|----- | -----|
| <kbd>Page Up</kbd> / <kbd>Page Down</kbd> | <kbd>Fn</kbd> + <kbd>↑</kbd> / <kbd>↓</kbd> |Scrolls up or down one screen at a time.|
| <kbd>Arrow keys</kbd> | <kbd>Arrow keys</kbd> | Navigates between adjacent cells in the direction of the arrow key.|
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Moves the selection to the cell below.|
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> | Moves the selection to the cell above.|
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the selection to the cell on the right.|
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Moves the active cell down one row.|
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> | Moves the active cell up one row.|
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the active cell right one column.|
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the selection to the cell on the left.|

<b>Editing</b>

| Windows | MAC | Actions |
|-----|----- | -----|
| <kbd>F2</kbd> | <kbd>F2</kbd> | Begin typing in the selected cell.|
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Finish typing in the current cell and move to the one below.|
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> | Finish typing in the current cell and move to the one above.|
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Finish typing in the current cell and move to the one on the right. |
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Finish typing in the current cell and move to the one on the left.|
| <kbd>Escape</kbd> | <kbd>Esc</kbd> | Cancel editing and return to the original value in the cell.|
| <kbd>F2</kbd> | <kbd>F2</kbd> | Enters edit mode for the selected cell.|
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Confirms the edit and moves the active cell down one row.|
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> | Confirms the edit and moves the active cell up one row.|
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Confirms the edit and moves the active cell right one column. |
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Confirms the edit and moves the active cell left one column.|
| <kbd>Escape</kbd> | <kbd>Esc</kbd> | Cancels the edit and restores the cell's original value.|

<b>Clear</b>

| Windows | MAC | Actions |
|-----|----- | -----|
| <kbd>Delete</kbd> | <kbd>Delete</kbd> | Clear contents of the selected cells.|
| <kbd>Delete</kbd> | <kbd>Delete</kbd> | Clears the contents of the selected cells.|

<b>Hyperlink</b>

Expand All @@ -119,4 +115,4 @@ The Syncfusion Blazor Spreadsheet followed keyboard interaction guidelines, maki

## See also

* [Accessibility in Syncfusion Blazor](https://blazor.syncfusion.com/documentation/common/accessibility)
* [Accessibility in Syncfusion Blazor](https://blazor.syncfusion.com/documentation/common/accessibility)
59 changes: 29 additions & 30 deletions Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,69 @@
---
layout: post
title: Managing Cell Ranges in Blazor Spreadsheet component | Syncfusion
description: Checkout and learn to manage cell range features such as formatting, autofill, and clear options in the Syncfusion Blazor Spreadsheet component and more.
title: Managing Cell Ranges in the Blazor Spreadsheet Component | Syncfusion
description: Check out and learn to manage cell range features such as formatting, autofill, and clear options in the Syncfusion Blazor Spreadsheet component and more.
platform: document-processing
control: Spreadsheet
documentation: ug
---

# Managing Cell Ranges in Blazor Spreadsheet component

A cell range refers to a group of selected cells in a Spreadsheet that can be manipulated or processed collectively.
A cell range is a set of selected cells in a Spreadsheet, typically specified using A1 notation (for example, `A1:B10`). A range may be a single cell or a contiguous block of cells that can be manipulated or processed collectively.

## Cell formatting

Cell formatting enhances the visual presentation of data in a Spreadsheet by applying styles such as font changes, colors, borders, and alignment to individual cells or cell ranges. This helps in organizing and emphasizing important information effectively.
Cell formatting enhances the visual presentation of data by applying styles such as font changes, colors, borders, and alignment to individual cells or cell ranges. This helps organize content and emphasize important information for faster interpretation.

Cell formatting options include:

* **Bold** - Applies a heavier font weight to make the text stand out in the Spreadsheet.

* **Italic** - Slants the text to give it a distinct look, often used for emphasis or to highlight differences.

* **Underline** - Adds a line below the text, commonly used for emphasis or to indicate hyperlinks.
* **Underline** - Adds a line below the text, commonly used for emphasis or to indicate hyperlinks.

* **Strikethrough** - Draws a line through the text, often used to show completed tasks or outdated information.
* **Strikethrough** - Draws a line through the text, often used to show completed tasks or outdated information.

* **Font Family** - Changes the typeface of the text (e.g., Arial, Calibri, Times New Roman, and more) to enhance readability or visual appeal.
* **Font Family** - Changes the typeface of the text (e.g., Arial, Calibri, Times New Roman, and more) to enhance readability or visual appeal.

* **Font Size** - Adjusts the size of the text to create visual hierarchy or improve readability in the Spreadsheet.
* **Font Size** - Adjusts the size of the text to create visual hierarchy or improve readability in the Spreadsheet.

* **Font Color** - Changes the color of the text to improve visual hierarchy or to organize information using color codes.
* **Font Color** - Changes the color of the text to improve visual hierarchy or to organize information using color codes.

* **Fill Color** - Adds color to the cell background to visually organize data or highlight important information.
* **Fill Color** - Adds color to the cell background to visually organize data or highlight important information.

* **Horizontal Alignment** - Controls the position of text from left to right within a cell. Options include:
* **Horizontal Alignment** - Controls the position of text from left to right within a cell. Options include:
* **Left** - Default for text
* **Center** - Useful for headings
* **Right** - Default for numbers

* **Vertical Alignment** - Controls the position of text from top to bottom within a cell. Options include:
* **Vertical Alignment** - Controls the position of text from top to bottom within a cell. Options include:
* **Top** – Aligns content to the top of the cell
* **Middle** – Centers content vertically
* **Bottom** – Default alignment

* **Wrap Text** - Displays long content on multiple lines within a single cell, preventing it from overflowing into adjacent cells.
* **Wrap Text** - Displays long content on multiple lines within a single cell, preventing it from overflowing into adjacent cells.

Cell formatting can be applied to or removed from a cell or range of cells by using the formatting options available in the Ribbon toolbar under the **Home** tab.
Cell formatting can be applied or removed from a cell or range by using the options available in the component's built-in **Ribbon** under the **Home** tab.

## Autofill

Autofill is used to fill cells with data based on adjacent cells. It follows patterns from adjacent cells when available, eliminating the need to enter repeated data manually. The [AllowAutofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowAutofill) property can be used to enable or disable the autofill support.
Autofill is used to fill cells with data that follows a pattern or is based on data in other cells. It helps avoid entering repetitive data manually. The [AllowAutofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowAutofill) property can be used to enable or disable this feature.

> * The default value of the `AllowAutofill` property is **true**.
* The default value of the `AllowAutofill` property is **true**.

Autofill can be performed in one of the following ways:

* Drag and drop the cell using the fill handle element.
* Use the [AutofillAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AutofillAsync_System_String_System_String_) method programmatically.
* Drag and drop the cell using the fill handle element.
* Use the [AutofillAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AutofillAsync_System_String_System_String_) method programmatically.

The available parameters in the `AutofillAsync()` method are:
The `AutofillAsync()` method accepts string parameters using A1 notation for `fillRange` and `dataRange`. Its available parameters are:

| Parameter | Type | Description |
| -- | -- | -- |
| fillRange | string | Specifies the fill range. |
| dataRange | string | Specifies the data range. |
| direction | string | Specifies the direction ("Up", "Right", "Down", and "Left") to be filled. |
| fillRange | string | Specifies the fill range in A1 notation (e.g., "A1:A5"). |
| dataRange | string | Specifies the source data range in A1 notation (e.g., "B1:B5"). |
| direction | string | Specifies the direction to be filled ("Up", "Right", "Down", or "Left"). |

### Implementing autofill programmatically

Expand Down Expand Up @@ -104,20 +103,20 @@ The following illustration demonstrates the use of autofill in the Spreadsheet c

## Clear

Clear support helps clear the cell contents (formulas and data) and formats (including number formats) in a Spreadsheet. When **Clear All** is applied, both the contents and the formats will be cleared simultaneously.
The clear functionality helps remove cell contents (formulas and data), formats (including number formats), and hyperlinks from a selected range.

### Applying the clear functionality

The clear support can be applied using the following way:

* Select the **Clear** icon in the Ribbon toolbar under the **Home** tab.
You can apply the clear functionality by selecting the **Clear** icon in the **Ribbon** under the **Home** tab.

| Options | Uses |
| Option | Use |
| -- | -- |
| **Clear All** | Used to clear all contents, formats, and hyperlinks. |
| **Clear Formats** | Used to clear the formats (including number formats) in a cell. |
| **Clear Contents** | Used to clear the contents (formulas and data) in a cell. |
| **Clear Hyperlinks** | Used to clear the hyperlink in a cell. |
| **Clear All** | Clears all contents, formats, and hyperlinks. |
| **Clear Formats** | Clears only the formatting from the selected cells. |
| **Clear Contents** | Clears only the contents (formulas and data) from the selected cells. |
| **Clear Hyperlinks** | Clears only the hyperlinks from the selected cells. |

The following image displays the clear options available in the Ribbon toolbar under the **Home** tab of the Blazor Spreadsheet.

Expand Down
Loading