Skip to content

Commit 05866fb

Browse files
SasthaPrathapSasthaPrathap
authored
Merge pull request #1948 from syncfusion-content/BLAZ-996176-Dev
996176: Added the UG for completed features, API and events.
2 parents 1c3b958 + 150e7bf commit 05866fb

File tree

10 files changed

+441
-37
lines changed

10 files changed

+441
-37
lines changed

‎Document-Processing-toc.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5163,6 +5163,7 @@
51635163
<li><a href="/document-processing/excel/spreadsheet/blazor/cell-range">Cell Range</a></li>
51645164
<li><a href="/document-processing/excel/spreadsheet/blazor/editing">Editing</a></li>
51655165
<li><a href="/document-processing/excel/spreadsheet/blazor/formulas">Formulas</a></li>
5166+
<li><a href="/document-processing/excel/spreadsheet/blazor/formatting">Formatting</a></li>
51665167
<li><a href="/document-processing/excel/spreadsheet/blazor/contextmenu">Context Menu</a></li>
51675168
<li><a href="/document-processing/excel/spreadsheet/blazor/rows-and-columns">Rows and Columns</a></li>
51685169
<li><a href="/document-processing/excel/spreadsheet/blazor/filtering">Filtering</a></li>
@@ -5173,6 +5174,8 @@
51735174
<li><a href="/document-processing/excel/spreadsheet/blazor/protection">Protection</a></li>
51745175
<li><a href="/document-processing/excel/spreadsheet/blazor/undo-redo">Undo and Redo</a></li>
51755176
<li><a href="/document-processing/excel/spreadsheet/blazor/accessibility">Accessibility</a></li>
5177+
<li><a href="/document-processing/excel/spreadsheet/blazor/events">Events</a></li>
5178+
<li><a href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html">API Reference</a></li>
51765179
</ul>
51775180
</li>
51785181
</ul>

‎Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md‎

Lines changed: 2 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,42 +12,7 @@ A cell range is a set of selected cells in a Spreadsheet, typically specified us
1212

1313
## Cell formatting
1414

15-
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.
16-
17-
Cell formatting options include:
18-
19-
* **Bold** - Applies a heavier font weight to make the text stand out in the Spreadsheet.
20-
21-
* **Italic** - Slants the text to give it a distinct look, often used for emphasis or to highlight differences.
22-
23-
* **Underline** - Adds a line below the text, commonly used for emphasis or to indicate hyperlinks.
24-
25-
* **Strikethrough** - Draws a line through the text, often used to show completed tasks or outdated information.
26-
27-
* **Font Family** - Changes the typeface of the text (e.g., Arial, Calibri, Times New Roman, and more) to enhance readability or visual appeal.
28-
29-
* **Font Size** - Adjusts the size of the text to create visual hierarchy or improve readability in the Spreadsheet.
30-
31-
* **Font Color** - Changes the color of the text to improve visual hierarchy or to organize information using color codes.
32-
33-
* **Fill Color** - Adds color to the cell background to visually organize data or highlight important information.
34-
35-
* **Horizontal Alignment** - Controls the position of text from left to right within a cell. Options include:
36-
* **Left** - Default for text
37-
* **Center** - Useful for headings
38-
* **Right** - Default for numbers
39-
40-
* **Vertical Alignment** - Controls the position of text from top to bottom within a cell. Options include:
41-
* **Top** – Aligns content to the top of the cell
42-
* **Middle** – Centers content vertically
43-
* **Bottom** – Default alignment
44-
45-
* **Wrap Text** - Displays long content on multiple lines within a single cell, preventing it from overflowing into adjacent cells. To enable text wrapping:
46-
1. Select the target cell or range (e.g., C5).
47-
2. Go to the Home tab.
48-
3. Click Wrap Text in the ribbon to toggle text wrapping for the selected cells.
49-
50-
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.
15+
To know more about cell formatting, refer [here](./formatting#text-and-cell-formatting).
5116

5217
## Autofill
5318

@@ -164,7 +129,7 @@ The event uses the [AutofillActionBeginEventArgs](https://help.syncfusion.com/cr
164129
{% endhighlight %}
165130
{% endtabs %}
166131

167-
**AutofillActionEnd**
132+
### AutofillActionEnd
168133

169134
The `AutofillActionEnd` event is triggered after an autofill operation has been successfully completed. This event provides detailed information about the completed autofill action, enabling further processing or logging if required.
170135

‎Document-Processing/Excel/Spreadsheet/Blazor/editing.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,105 @@ To exit edit mode without saving changes, press the **ESCAPE** key. This action
8484

8585
![Animation showing a user canceling a cell edit in the Blazor Spreadsheet component.](./images/cell-editing.gif)
8686

87+
## Events
88+
89+
The Blazor Spreadsheet component provides events that are triggered during editing operations, such as [CellEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellEditingEventArgs.html) and [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellSavedEventArgs.html). These events allow you to perform custom actions before a cell enters edit mode and after its value has been successfully saved, enabling scenarios such as data validation or logging changes.
90+
91+
### CellEditing
92+
93+
The `CellEditing` event is triggered before a cell enters edit mode. It provides an opportunity to validate or cancel the edit operation.
94+
95+
**Purpose**
96+
97+
This event is useful for scenarios where cell editing needs to be controlled dynamically, such as restricting editing in specific ranges or preventing editing based on certain conditions.
98+
99+
**Event Arguments**
100+
101+
The event uses the [CellEditingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellEditingEventArgs.html) class, which includes the following properties:
102+
103+
| Event Arguments | Description |
104+
|---|---|
105+
| RowIndex (read-only)| The zero-based row index of the cell being edited. |
106+
| ColIndex (read-only)| The zero-based column index of the cell being edited. |
107+
| Address (read-only)| The address of the cell being edited (e.g., "Sheet1!A1"). |
108+
| Value (read-only)| The current value of the cell before editing. |
109+
| Cancel | Set to `true` to cancel the editing operation. |
110+
111+
{% tabs %}
112+
{% highlight razor tabtitle="Index.razor" %}
113+
114+
@using Syncfusion.Blazor.Spreadsheet
115+
116+
<SfSpreadsheet DataSource="DataSourceBytes" CellEditing="OnCellEditing">
117+
<SpreadsheetRibbon></SpreadsheetRibbon>
118+
</SfSpreadsheet>
119+
120+
@code {
121+
public byte[] DataSourceBytes { get; set; }
122+
123+
protected override void OnInitialized()
124+
{
125+
string filePath = "wwwroot/Sample.xlsx";
126+
DataSourceBytes = File.ReadAllBytes(filePath);
127+
}
128+
129+
private void OnCellEditing(CellEditingEventArgs args)
130+
{
131+
// Prevents editing in the first row.
132+
if (args.RowIndex == 0)
133+
{
134+
args.Cancel = true;
135+
}
136+
}
137+
}
138+
{% endhighlight %}
139+
{% endtabs %}
140+
141+
### CellSaved
142+
143+
The `CellSaved` event is triggered after a cell’s value has been successfully saved, providing details about the updated value and the action that caused the change (such as Edit, Cut, Paste, or Autofill).
144+
145+
**Purpose**
146+
147+
This event is useful for scenarios where post-editing actions are needed, such as logging the cell change or refreshing the UI.
148+
149+
**Event Arguments**
150+
151+
The event uses the [CellSavedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellSavedEventArgs.html) class, which includes the following properties:
152+
153+
| Event Arguments | Description |
154+
|---|---|
155+
| Address (read-only)| The address of the cell whose value was saved (e.g., "Sheet1!A1"). |
156+
| Value (read-only)| The new value of the cell after saving. |
157+
| OldValue (read-only)| The original value of the cell before saving. |
158+
| Action (read-only)| The action that triggered the save (e.g., "Edit", "Cut", "Paste", "Autofill"). |
159+
160+
{% tabs %}
161+
{% highlight razor tabtitle="Index.razor" %}
162+
163+
@using Syncfusion.Blazor.Spreadsheet
164+
165+
<SfSpreadsheet DataSource="DataSourceBytes" CellSaved="OnCellSaved">
166+
<SpreadsheetRibbon></SpreadsheetRibbon>
167+
</SfSpreadsheet>
168+
169+
@code {
170+
public byte[] DataSourceBytes { get; set; }
171+
172+
protected override void OnInitialized()
173+
{
174+
string filePath = "wwwroot/Sample.xlsx";
175+
DataSourceBytes = File.ReadAllBytes(filePath);
176+
}
177+
private void OnCellSaved(CellSavedEventArgs args)
178+
{
179+
// Log the cell change, including the action that triggered it.
180+
Console.WriteLine($"Cell {args.Address} changed from '{args.OldValue}' to '{args.Value}' by {args.Action}.");
181+
}
182+
}
183+
{% endhighlight %}
184+
{% endtabs %}
185+
87186
## Cell editing in protected sheet
88187

89188
In a protected sheet, only unlocked ranges can be edited based on the sheet's protection settings. Attempting to modify a locked range triggers an error message, as shown below:

‎Document-Processing/Excel/Spreadsheet/Blazor/events.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
layout: post
3+
title: Events in Blazor Spreadsheet Component | Syncfusion
4+
description: Checkout and learn about the events in Syncfusion Blazor Spreadsheet component and more | Syncfusion.
5+
platform: document-processing
6+
control: Spreadsheet
7+
documentation: ug
8+
---
9+
10+
# Events in Blazor Spreadsheet Component
11+
12+
The Blazor Spreadsheet component provides various events that allow you to interact with the component and customize its behavior.
13+
14+
| Event Name | Description |
15+
|---|---|
16+
| [AutofillActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.AutofillActionBeginEventArgs.html) | Triggers when an autofill operation starts. To know more about this event, refer [here](./cell-range#autofillactionbegin). |
17+
| [AutofillActionEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.AutofillActionEndEventArgs.html) | Triggers when an autofill operation completes. To know more about this event, refer [here](./cell-range#autofillactionend). |
18+
| [BeforeSave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.BeforeSaveEventArgs.html) | Triggers just before the workbook is saved. |
19+
| [CellEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellEditingEventArgs.html) | Triggers when a cell enters edit mode. To know more about this event, refer [here](./editing#cellediting). |
20+
| [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellSavedEventArgs.html) | Triggers when a cell's value is saved. To know more about this event, refer [here](./editing#cellsaved). |
21+
| [ColumnResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ColumnResizingEventArgs.html) | Triggers when a column is being resized. |
22+
| [CutCopyActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CutCopyActionBeginEventArgs.html) | Triggers when a cut or copy operation starts. To know more about this event, refer [here](./clipboard#cutcopyactionbegin). |
23+
| [HyperlinkClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html) | Triggers when a hyperlink is clicked. To know more about this event, refer [here](./hyperlink#hyperlinkclick). |
24+
| [HyperlinkCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html) | Triggers when a hyperlink is successfully added. To know more about this event, refer [here](./hyperlink#hyperlinkcreated). |
25+
| [HyperlinkCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html) | Triggers when a hyperlink is being created. To know more about this event, refer [here](./hyperlink#hyperlinkcreating). |
26+
| [Pasting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.PastingEventArgs.html) | Triggers when a paste operation starts. To know more about this event, refer [here](./clipboard#pasting). |
27+
| [RowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.RowResizingEventArgs.html) | Triggers when a row is being resized. |
28+
| [Selected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SelectedEventArgs.html) | Triggers when a cell or range of cells is selected. |
29+
| [WorksheetAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.WorksheetAddingEventArgs.html) | Triggers before a new worksheet is added. |

0 commit comments

Comments
 (0)