Skip to content

Commit 919bc26

Browse files
Venkat-AyothiVenkat-Ayothi
authored
Merge pull request #6283 from syncfusion-content/965862-CherryPick
965862: Added the missed contents
2 parents ab2ca18 + 4c2fc6e commit 919bc26

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+2446
-8
lines changed

‎blazor-toc.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4576,16 +4576,16 @@
45764576
</ul>
45774577
</li>
45784578
<li><a href="/blazor/spreadsheet/open-and-save">Open and Save</a></li>
4579-
<!-- <li><a href="/blazor/spreadsheet/worksheet">Worksheet</a></li>
4580-
<li><a href="/blazor/spreadsheet/cell-range">Cell Range</a></li> -->
4579+
<li><a href="/blazor/spreadsheet/worksheet">Worksheet</a></li>
4580+
<li><a href="/blazor/spreadsheet/cell-range">Cell Range</a></li>
45814581
<li><a href="/blazor/spreadsheet/editing">Editing</a></li>
4582-
<!-- <li><a href="/blazor/spreadsheet/formulas">Formulas</a></li> -->
4582+
<li><a href="/blazor/spreadsheet/formulas">Formulas</a></li>
45834583
<li><a href="/blazor/spreadsheet/contextmenu">Context Menu</a></li>
4584-
<!-- <li><a href="/blazor/spreadsheet/filtering">Filtering</a></li>
4584+
<li><a href="/blazor/spreadsheet/filtering">Filtering</a></li>
45854585
<li><a href="/blazor/spreadsheet/sorting">Sorting</a></li>
45864586
<li><a href="/blazor/spreadsheet/hyperlink">Hyperlink</a></li>
45874587
<li><a href="/blazor/spreadsheet/clipboard">Clipboard</a></li>
4588-
<li><a href="/blazor/spreadsheet/selection">Selection</a></li> -->
4588+
<li><a href="/blazor/spreadsheet/selection">Selection</a></li>
45894589
<li><a href="/blazor/spreadsheet/protection">Protection</a></li>
45904590
<li><a href="/blazor/spreadsheet/undo-redo">Undo and Redo</a></li>
45914591
<li><a href="/blazor/spreadsheet/accessibility">Accessibility</a></li>

‎blazor/spreadsheet/accessibility.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,24 @@ The accessibility compliance for the Spreadsheet is outlined below.
3636

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

39+
## WAI-ARIA attributes
40+
The Syncfusion Blazor Spreadsheet followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Spreadsheet:
41+
42+
| Attributes | Purpose |
43+
|---------------|-------------|
44+
| `role=textbox` | Identifies an element as an input field that allows text entry.|
45+
| `role=button` | To represent the element that acts as a button in the component. |
46+
| `role=combobox` | Identifies a component that combines a text input with a popup listbox or tree. |
47+
| `role=menu` | Defines a container for a collection of choices or commands presented in a contextual or dropdown format. |
48+
| `role=alert` | Designates an element that displays im portant, time-sensitive information. |
49+
| `aria-label`| This attribute describes the accessible name for the interactive elements. |
50+
| `aria-expanded` | This attribute describes the control (for example, dropdown) is expanded or collapsed. |
51+
| `aria-live` | Defines a region as "live", meaning its content updates dynamically. Values include "off", "polite" (waits until idle), or "assertive" (announces immediately). |
52+
| `aria-rowindex` | Defines row index of the row with respect to the total number of rows within the Spreadsheet. |
53+
| `aria-colindex` | Defines the column index of the column with respect to the total number of columns within the Spreadsheet. |
54+
| `aria-multiline` | Indicates whether a textbox accepts multiple lines of input or only a single line. |
55+
56+
3957
## Keyboard shortcuts
4058

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

‎blazor/spreadsheet/cell-range.md‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
layout: post
3+
title: Managing Cell Ranges in Blazor Spreadsheet component | Syncfusion
4+
description: Checkout and learn to manage cell range features such as formatting, autofill, and clear options in the Syncfusion Blazor Spreadsheet component and more.
5+
platform: Blazor
6+
control: Spreadsheet
7+
documentation: ug
8+
---
9+
10+
# Managing Cell Ranges in Blazor Spreadsheet component
11+
12+
A cell range refers to a group of selected cells in a Spreadsheet that can be manipulated or processed collectively.
13+
14+
## Cell formatting
15+
16+
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.
17+
18+
Cell formatting options include:
19+
20+
* **Bold** - Applies a heavier font weight to make the text stand out in the Spreadsheet.
21+
22+
* **Italic** - Slants the text to give it a distinct look, often used for emphasis or to highlight differences.
23+
24+
* **Underline** - Adds a line below the text, commonly used for emphasis or to indicate hyperlinks.
25+
26+
* **Strikethrough** - Draws a line through the text, often used to show completed tasks or outdated information.
27+
28+
* **Font Family** - Changes the typeface of the text (e.g., Arial, Calibri, Times New Roman, and more) to enhance readability or visual appeal.
29+
30+
* **Font Size** - Adjusts the size of the text to create visual hierarchy or improve readability in the Spreadsheet.
31+
32+
* **Font Color** - Changes the color of the text to improve visual hierarchy or to organize information using color codes.
33+
34+
* **Fill Color** - Adds color to the cell background to visually organize data or highlight important information.
35+
36+
* **Horizontal Alignment** - Controls the position of text from left to right within a cell. Options include:
37+
* **Left** - Default for text
38+
* **Center** - Useful for headings
39+
* **Right** - Default for numbers
40+
41+
* **Vertical Alignment** - Controls the position of text from top to bottom within a cell. Options include:
42+
* **Top** – Aligns content to the top of the cell
43+
* **Middle** – Centers content vertically
44+
* **Bottom** – Default alignment
45+
46+
* **Wrap Text** - Displays long content on multiple lines within a single cell, preventing it from overflowing into adjacent cells.
47+
48+
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.
49+
50+
## Autofill
51+
52+
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.
53+
54+
> * The default value of the `AllowAutofill` property is **true**.
55+
56+
Autofill can be performed in one of the following ways:
57+
58+
* Drag and drop the cell using the fill handle element.
59+
* Use the [AutofillAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AutofillAsync_System_String_System_String_System_String_) method programmatically.
60+
61+
The available parameters in the `AutofillAsync()` method are:
62+
63+
| Parameter | Type | Description |
64+
| -- | -- | -- |
65+
| fillRange | string | Specifies the fill range. |
66+
| dataRange | string | Specifies the data range. |
67+
| direction | string | Specifies the direction ("Up", "Right", "Down", and "Left") to be filled. |
68+
69+
### Implementing autofill programmatically
70+
71+
{% tabs %}
72+
{% highlight razor tabtitle="Index.razor" %}
73+
74+
@using Syncfusion.Blazor.Spreadsheet
75+
76+
<button @onclick="AutofillRangeHandler">Autofill</button>
77+
<SfSpreadsheet @ref="spreadsheetObj" DataSource="DataSourceBytes">
78+
<SpreadsheetRibbon></SpreadsheetRibbon>
79+
</SfSpreadsheet>
80+
81+
@code {
82+
public byte[] DataSourceBytes { get; set; }
83+
public SfSpreadsheet spreadsheetObj;
84+
85+
protected override void OnInitialized()
86+
{
87+
string filePath = "wwwroot/Sample.xlsx";
88+
DataSourceBytes = File.ReadAllBytes(filePath);
89+
}
90+
91+
public async Task AutofillRangeHandler()
92+
{
93+
// Basic usage with only the fill range parameter.
94+
await spreadsheetObj.AutofillAsync("B7:B8");
95+
}
96+
}
97+
98+
{% endhighlight %}
99+
{% endtabs %}
100+
101+
The following illustration demonstrates the use of autofill in the Spreadsheet component.
102+
103+
![Autofill Illustration](images/autofill.gif)
104+
105+
## Clear
106+
107+
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.
108+
109+
### Applying the clear functionality
110+
111+
The clear support can be applied using the following way:
112+
113+
* Select the **Clear** icon in the Ribbon toolbar under the **Home** tab.
114+
115+
| Options | Uses |
116+
| -- | -- |
117+
| **Clear All** | Used to clear all contents, formats, and hyperlinks. |
118+
| **Clear Formats** | Used to clear the formats (including number formats) in a cell. |
119+
| **Clear Contents** | Used to clear the contents (formulas and data) in a cell. |
120+
| **Clear Hyperlinks** | Used to clear the hyperlink in a cell. |
121+
122+
The following image displays the clear options available in the Ribbon toolbar under the **Home** tab of the Blazor Spreadsheet.
123+
124+
![Clear options in the Blazor Spreadsheet](images/clear-feature.png)

‎blazor/spreadsheet/clipboard.md‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
---
2+
layout: post
3+
title: Clipboard in Blazor Spreadsheet component | Syncfusion
4+
description: Checkout and learn here all about the clipboard functionalities in the Syncfusion Blazor Spreadsheet component and more.
5+
platform: Blazor
6+
control: Spreadsheet
7+
documentation: ug
8+
---
9+
10+
# Clipboard in Blazor Spreadsheet component
11+
12+
The Spreadsheet provides support for clipboard operations such as **Cut**, **Copy**, and **Paste**. These operations can be enabled or disabled by setting the [`EnableClipboard`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableClipboard) property in the Spreadsheet component. By default, the `EnableClipboard` property is set to **true**.
13+
14+
## Cut
15+
16+
The cut operation removes data from a selected range of cells, rows, or columns in a sheet and places it on the clipboard for use elsewhere.
17+
18+
**Cutting Data in Spreadsheet**
19+
20+
The cut operation can be performed through the following methods:
21+
22+
* Select the **Cut** button in the **HOME** tab of the Ribbon toolbar to execute the cut operation.
23+
* Right-click and select the **Cut** option from the context menu.
24+
* Press the keyboard shortcut `Ctrl + X`(Windows) or `Command + X`(Mac).
25+
* Using the [`CutCellAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method.
26+
27+
## Copy
28+
29+
The copy operation copies data from a selected range of cells, rows, or columns in a sheet and places it on the clipboard for use elsewhere.
30+
31+
**Copying Data in Spreadsheet**
32+
33+
The copy operation can be performed through the following methods:
34+
35+
* Select the **Copy** button in the **HOME** tab of the Ribbon toolbar to execute the copy operation.
36+
* Right-click and select the **Copy** option from the context menu.
37+
* Press the keyboard shortcut `Ctrl + C` (Windows) or `Command + C` (Mac).
38+
* Using the [`CopyCellAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method.
39+
40+
## Paste
41+
42+
The paste operation pastes data from the clipboard into a selected range of cells, rows, or columns. This includes all information such as values and formatting.
43+
44+
External clipboard functionality is supported. When using cut and paste, the clipboard is cleared after pasting. With copy and paste, the clipboard contents remain unchanged.
45+
46+
**Pasting Data in Spreadsheet**:
47+
48+
The paste operation can be performed through the following methods:
49+
50+
* Select the **Paste** button in the **HOME** tab of the Ribbon toolbar to execute the paste operation.
51+
* Right-click and select the **Paste** option from the context menu.
52+
* Press the keyboard shortcut `Ctrl + V` (Windows) or `Command + V` (Mac).
53+
* Using the [`PasteCellAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method.
54+
55+
> When using the keyboard shortcut keys for cut (`Ctrl + X`) or copy (`Ctrl + C`) from external sources, use the `Ctrl + V` shortcut to paste content into the Spreadsheet.
56+
57+
![UI showing context menu cut, copy and paste option](./images/contextcutcopypaste.png)
58+
59+
![UI showing ribbon cut, copy and paste option](./images/cutcopypaste.png)
60+
61+
{% tabs %}
62+
{% highlight razor tabtitle="Index.razor" %}
63+
64+
@using Syncfusion.Blazor.Spreadsheet
65+
@using Syncfusion.Blazor.SplitButtons
66+
67+
<SfDropDownButton Content="Clipboard">
68+
<DropDownMenuItems>
69+
<DropDownMenuItem Text="Copy"></DropDownMenuItem>
70+
<DropDownMenuItem Text="Cut"></DropDownMenuItem>
71+
<DropDownMenuItem Text="Paste"></DropDownMenuItem>
72+
</DropDownMenuItems>
73+
<DropDownButtonEvents ItemSelected="ItemSelected">
74+
</DropDownButtonEvents>
75+
</SfDropDownButton>
76+
77+
<SfSpreadsheet @ref="SpreadsheetRef" DataSource="DataSourceBytes">
78+
<SpreadsheetRibbon></SpreadsheetRibbon>
79+
</SfSpreadsheet>
80+
81+
@code {
82+
public byte[] DataSourceBytes { get; set; }
83+
public SfSpreadsheet SpreadsheetRef { get; set; }
84+
85+
protected override void OnInitialized()
86+
{
87+
string filePath = "wwwroot/Sample.xlsx";
88+
DataSourceBytes = File.ReadAllBytes(filePath);
89+
}
90+
91+
private async Task ItemSelected(MenuEventArgs args)
92+
{
93+
if (args.Item.Text == "Cut")
94+
{
95+
await SpreadsheetRef.CutCellAsync();
96+
}
97+
98+
if (args.Item.Text == "Copy")
99+
{
100+
await SpreadsheetRef.CopyCellAsync();
101+
}
102+
103+
if (args.Item.Text == "Paste")
104+
{
105+
await SpreadsheetRef.PasteCellAsync();
106+
}
107+
}
108+
}
109+
110+
{% endhighlight %}
111+
{% endtabs %}
112+
113+
### Prevent pasting
114+
115+
The following example illustrates how to prevent the paste action in the Spreadsheet. In the [`Pasting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.PastingEventArgs.html) event, setting the `Cancel` argument to **true** prevents the paste operation.
116+
117+
{% tabs %}
118+
{% highlight razor tabtitle="Index.razor" %}
119+
120+
@using Syncfusion.Blazor.Spreadsheet
121+
@using Syncfusion.Blazor.SplitButtons
122+
123+
<SfDropDownButton Content="Clipboard">
124+
<DropDownMenuItems>
125+
<DropDownMenuItem Text="Copy"></DropDownMenuItem>
126+
<DropDownMenuItem Text="Cut"></DropDownMenuItem>
127+
<DropDownMenuItem Text="Paste"></DropDownMenuItem>
128+
</DropDownMenuItems>
129+
<DropDownButtonEvents ItemSelected="ItemSelected">
130+
</DropDownButtonEvents>
131+
</SfDropDownButton>
132+
133+
<SfSpreadsheet @ref="SpreadsheetRef" DataSource="DataSourceBytes">
134+
<SpreadsheetRibbon></SpreadsheetRibbon>
135+
<SpreadsheetEvents Pasting="OnBeforePasteHandler"></SpreadsheetEvents>
136+
</SfSpreadsheet>
137+
138+
@code {
139+
public byte[] DataSourceBytes { get; set; }
140+
141+
public SfSpreadsheet SpreadsheetRef { get; set; }
142+
143+
protected override void OnInitialized()
144+
{
145+
string filePath = "wwwroot/Sample.xlsx";
146+
DataSourceBytes = File.ReadAllBytes(filePath);
147+
}
148+
149+
private async Task ItemSelected(MenuEventArgs args)
150+
{
151+
if (args.Item.Text == "Cut")
152+
{
153+
await SpreadsheetRef.CutCellAsync();
154+
}
155+
156+
if (args.Item.Text == "Copy")
157+
{
158+
await SpreadsheetRef.CopyCellAsync();
159+
}
160+
161+
if (args.Item.Text == "Paste")
162+
{
163+
await SpreadsheetRef.PasteCellAsync();
164+
}
165+
}
166+
167+
public void OnBeforePasteHandler(PastingEventArgs args)
168+
{
169+
// To cancel the paste action.
170+
args.Cancel = true;
171+
}
172+
}
173+
174+
{% endhighlight %}
175+
{% endtabs %}

‎blazor/spreadsheet/contextmenu.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ documentation: ug
99

1010
# Context Menu in Blazor Spreadsheet component
1111

12-
The context menu is used to improve user interaction with the Spreadsheet component using the built-in popup menu. It opens when right-clicking on a cell, column header, row header, or sheet tab in the Spreadsheet. The [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableContextMenu) property can be used to enable/disable the context menu.
13-
14-
> The default value for the `EnableContextMenu` property is **true**.
12+
The context menu is used to improve user interaction with the Spreadsheet component using the built-in popup menu. It opens when right-clicking on a cell, column header, row header, or sheet tab in the Spreadsheet. The [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableContextMenu) property can be used to enable/disable the context menu. The default value for the `EnableContextMenu` property is **true**.
1513

1614
## Cell context menu options
1715

0 commit comments

Comments
 (0)