diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 23195a984..0fd7777d0 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5111,6 +5111,7 @@
  • Cell Range
  • Editing
  • Formulas
  • +
  • Formatting>
  • Context Menu
  • Rows and Columns
  • Filtering
  • @@ -5121,6 +5122,8 @@
  • Protection
  • Undo and Redo
  • Accessibility
  • +
  • Events
  • +
  • API Reference
  • diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md b/Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md index 073aac1ac..0f8557773 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md @@ -10,45 +10,6 @@ documentation: ug # Managing Cell Ranges in Blazor Spreadsheet component 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 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. - -* **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 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. - -* **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: - * **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: - * **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. To enable text wrapping: - 1. Select the target cell or range (e.g., C5). - 2. Go to the Home tab. - 3. Click Wrap Text in the ribbon to toggle text wrapping for the selected cells. - -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 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. @@ -164,7 +125,7 @@ The event uses the [AutofillActionBeginEventArgs](https://help.syncfusion.com/cr {% endhighlight %} {% endtabs %} -**AutofillActionEnd** +### AutofillActionEnd 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. diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/editing.md b/Document-Processing/Excel/Spreadsheet/Blazor/editing.md index 1c7f60269..3d41fc49c 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/editing.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/editing.md @@ -84,6 +84,105 @@ To exit edit mode without saving changes, press the **ESCAPE** key. This action ![Animation showing a user canceling a cell edit in the Blazor Spreadsheet component.](./images/cell-editing.gif) +## Events + +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. + +### CellEditing + +The `CellEditing` event is triggered before a cell enters edit mode. It provides an opportunity to validate or cancel the edit operation. + +**Purpose** + +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. + +**Event Arguments** + +The event uses the [CellEditingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellEditingEventArgs.html) class, which includes the following properties: + +| Event Arguments | Description | +|---|---| +| RowIndex (read-only)| The zero-based row index of the cell being edited. | +| ColIndex (read-only)| The zero-based column index of the cell being edited. | +| Address (read-only)| The address of the cell being edited (e.g., "Sheet1!A1"). | +| Value (read-only)| The current value of the cell before editing. | +| Cancel | Set to `true` to cancel the editing operation. | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Spreadsheet + + + + + +@code { + public byte[] DataSourceBytes { get; set; } + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + private void OnCellEditing(CellEditingEventArgs args) + { + // Prevents editing in the first row. + if (args.RowIndex == 0) + { + args.Cancel = true; + } + } +} +{% endhighlight %} +{% endtabs %} + +### CellSaved + +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). + +**Purpose** + +This event is useful for scenarios where post-editing actions are needed, such as logging the cell change or refreshing the UI. + +**Event Arguments** + +The event uses the [CellSavedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellSavedEventArgs.html) class, which includes the following properties: + +| Event Arguments | Description | +|---|---| +| Address (read-only)| The address of the cell whose value was saved (e.g., "Sheet1!A1"). | +| Value (read-only)| The new value of the cell after saving. | +| OldValue (read-only)| The original value of the cell before saving. | +| Action (read-only)| The action that triggered the save (e.g., "Edit", "Cut", "Paste", "Autofill"). | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Spreadsheet + + + + + +@code { + public byte[] DataSourceBytes { get; set; } + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + private void OnCellSaved(CellSavedEventArgs args) + { + // Log the cell change, including the action that triggered it. + Console.WriteLine($"Cell {args.Address} changed from '{args.OldValue}' to '{args.Value}' by {args.Action}."); + } +} +{% endhighlight %} +{% endtabs %} + ## Cell editing in protected sheet 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: diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/events.md b/Document-Processing/Excel/Spreadsheet/Blazor/events.md new file mode 100644 index 000000000..5f82b2761 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Blazor/events.md @@ -0,0 +1,29 @@ +--- +layout: post +title: Events in Blazor Spreadsheet Component | Syncfusion +description: Checkout and learn about the events in Syncfusion Blazor Spreadsheet component and more | Syncfusion. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Events in Blazor Spreadsheet Component + +The Blazor Spreadsheet component provides various events that allow you to interact with the component and customize its behavior. + +| Event Name | Description | +|---|---| +| [AutofillActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.AutofillActionBeginEventArgs.html) | Triggers when an autofill operation starts. | +| [AutofillActionEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.AutofillActionEndEventArgs.html) | Triggers when an autofill operation completes. | +| [BeforeSave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.BeforeSaveEventArgs.html) | Triggers just before the workbook is saved. | +| [CellEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellEditingEventArgs.html) | Triggers when a cell enters edit mode. | +| [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellSavedEventArgs.html) | Triggers when a cell's value is saved. | +| [ColumnResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ColumnResizingEventArgs.html) | Triggers when a column is being resized. | +| [CutCopyActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CutCopyActionBeginEventArgs.html) | Triggers when a cut or copy operation starts. | +| [HyperlinkClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html) | Triggers when a hyperlink is clicked. | +| [HyperlinkCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html) | Triggers when a hyperlink is successfully added. | +| [HyperlinkCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html) | Triggers when a hyperlink is being created. | +| [Pasting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.PastingEventArgs.html) | Triggers when a paste operation starts. | +| [RowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.RowResizingEventArgs.html) | Triggers when a row is being resized. | +| [Selected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SelectedEventArgs.html) | Triggers when a cell or range of cells is selected. | +| [WorksheetAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.WorksheetAddingEventArgs.html) | Triggers before a new worksheet is added. | diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/formatting.md b/Document-Processing/Excel/Spreadsheet/Blazor/formatting.md new file mode 100644 index 000000000..47eecfae3 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Blazor/formatting.md @@ -0,0 +1,219 @@ +--- +layout: post +title: Formatting in Blazor Spreadsheet Component | Syncfusion +description: Checkout and learn all about formatting options in the Syncfusion Blazor Spreadsheet component | Syncfusion. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Formatting in Blazor Spreadsheet Component + +Formatting options improve data readability and presentation. The Blazor Spreadsheet component provides various formatting options, which can be categorized into: + +* Number Formatting +* Text Formatting +* Cell Formatting + +The entire formatting functionality can be globally enabled or disabled using the [`AllowCellFormatting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowCellFormatting) property. By default, `AllowCellFormatting` is set to **true**. + +## Number Formatting + +Number formatting in the Blazor Spreadsheet component controls how numeric, date, and time values are displayed without altering their underlying data. The component offers Excel-like number formats that are culture-aware, integrate with undo/redo operations, and respect worksheet protection settings. These formats can be applied through the Ribbon toolbar or programmatically. + +The number formatting functionality can be globally enabled or disabled using the [`AllowNumberFormatting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowNumberFormatting) property. By default, `AllowNumberFormatting` is set to **true**. + +### Supported Categories + +The Blazor Spreadsheet component provides several built-in number format categories to control how numeric, date, and time values are displayed. These formats are culture-aware and ensure proper rendering of decimal separators, currency symbols, and date/time patterns. + +| Category | Example Format String | Result Example | +|---|---|---| +| General | `General` | 1234.567 | +| Number | `#,##0.00` | 1234.57 | +| Currency | `$#,##0.00` | $1,234.57 | +| Accounting | `_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)` | $ 1,234.57 | +| Percentage | `0.00%` | 8.90% | +| Scientific | `0.00E+00` | 1.23E+03 | +| Fraction | `# ?/?` | 123 1/2 | +| Short Date | `m/d/yyyy` | 03/15/2025 | +| Long Date | `dddd, mmmm dd, yyyy` | Saturday, March 15, 2025 | +| Time | `h:mm:ss AM/PM` | 3:45:30 PM | + +### Applying Number Formats via UI + +Number formats can be applied through the UI using the following method: + +* Click the **Home** tab in the Ribbon. +* Open the **Number Format** dropdown. +* The dropdown displays previews of built-in formats based on the current culture. + +![Blazor Spreadsheet showing Number Format Dropdown in Ribbon](./images/number-format-ribbon.gif) + +### Applying Number Formats Programmatically + +Number formats can be applied programmatically to the current selection or a specified range using the [NumberFormatAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_NumberFormatAsync_System_String_System_String_) method. This method accepts a format string and an optional cell address. + +| Parameter | Type | Description | +| -- | -- | -- | +| format | string | The built-in format or a supported custom pattern. | +| cellAddress | string (Optional) | The address of the target range where the number format is applied (e.g., `"Sheet1!A2:A5"` or `"A2:A5"`). If the sheet name is not specified, the number format is applied to the specified range in the active sheet. When cellAddress is omitted, the current selection is formatted. | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Spreadsheet + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance; + public byte[] DataSourceBytes { get; set; } + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + private async Task ApplyFormat() + { + // Apply custom percentage format to range A2:A5 + await SpreadsheetInstance.NumberFormatAsync("0.00%", "A2:A5"); + // Apply custom short date format to cell D1 on Sheet2 + await SpreadsheetInstance.NumberFormatAsync("mm/dd/yyyy", "Sheet2!D1"); + } +} +{% endhighlight %} +{% endtabs %} + +> If the built-in formats do not meet specific requirements, custom patterns can be applied programmatically using the `NumberFormatAsync` method. Patterns must be compatible with Excel-style format strings. + +## Text and Cell Formatting + +Text and 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. + +### Text Formatting + +Text 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. + +* **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 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. + +### Cell Formatting + +Cell formatting options include: + +* **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: + * **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: + * **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. To enable text wrapping: + 1. Select the target cell or range (e.g., C5). + 2. Go to the Home tab. + 3. Click Wrap Text in the ribbon to toggle text wrapping for the selected cells. + +Text and 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. + +### Borders + +Borders visually separate cells and define tables or sections within a worksheet. The Blazor Spreadsheet component supports various border types, styles, colors, and sizes. The available border options are: + +| Border Type | Description | +|-------------|-------------| +| Top Border | Applies a border to the top edge of a cell or range of cells. | +| Left Border | Applies a border to the left edge of a cell or range of cells. | +| Right Border | Applies a border to the right edge of a cell or range of cells. | +| Bottom Border | Applies a border to the bottom edge of a cell or range of cells. | +| No Border | Removes all borders from a cell or range of cells. | +| All Border | Applies borders to all sides of a cell or range of cells. | +| Horizontal Border | Applies borders to the top and bottom edges of a cell or range. | +| Vertical Border | Applies borders to the left and right edges of a cell or range. | +| Outside Border | Applies borders to the outer edges of a range of cells. | +| Inside Border | Applies borders to the inner edges of a range of cells | + +Border color, size, and style can also be customized. The supported sizes and styles are: + +| Type | Description | +|--------|----------------------------------| +| Thin | Specifies a `1px` border size. | +| Medium | Specifies a `2px` border size. | +| Thick | Specifies a `3px` border size. | +| Solid | Creates a `solid` border. | +| Dashed | Creates a `dashed` border.| +| Dotted | Creates a `dotted` border.| +| Double | Creates a `double` border.| + +### Applying Borders via UI + +Borders can be applied through the UI using the following method: + +* Click the **Home** tab in the Ribbon. +* Open the **Borders** dropdown. +* Select the desired border style, color, and size from the dropdown. + +![Blazor Spreadsheet displaying available border options on the Home tab in the Ribbon toolbar](./images/borders.gif) + +### Applying Borders Programmatically + +Borders can be applied programmatically to a specific cell or range of cells using the [SetBordersAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SetBordersAsync_Syncfusion_Blazor_Spreadsheet_BorderType_Syncfusion_XlsIO_ExcelLineStyle_System_String_System_String) method. The available parameters in the `SetBordersAsync` method are: + +| Parameter | Type | Description | +| -- | -- | -- | +| borderType | BorderType | Specifies the type of border to apply (e.g., `BorderType.OutsideBorders`, `BorderType.AllBorders`, `BorderType.TopBorder`). | +| lineStyle | Syncfusion.XlsIO.ExcelLineStyle | Defines the line style of the border (e.g., `Syncfusion.XlsIO.ExcelLineStyle.Thin`, `Syncfusion.XlsIO.ExcelLineStyle.Medium`, `Syncfusion.XlsIO.ExcelLineStyle.Dashed`). | +| borderColor | string | The border color in hexadecimal or named CSS color format (e.g., `"#000000"`, `"red"`, `"#2196F3"`). | +| cellAddress | string (Optional) | The address of the target cell or range (e.g., `"A1"`, `"A1:C5"`, or `"Sheet2!B2:D4"`). If omitted, the operation targets the current selection. | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.XlsIO + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + public byte[] DataSourceBytes { get; set; } + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + public async Task ApplyBorders() + { + await SpreadsheetInstance.SetBordersAsync(BorderType.OutsideBorders, ExcelLineStyle.Medium, "#FF0000", "A1:C5"); + await SpreadsheetInstance.SetBordersAsync(BorderType.AllBorders, ExcelLineStyle.Dashed, "#0000FF", "B2:D4"); + } +} +{% endhighlight %} +{% endtabs %} + +### Limitations + +* Conditional formatting is currently not supported in the Blazor Spreadsheet component. +* A custom number format UI dialog is not available, custom formats must be applied using the API. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/images/borders.gif b/Document-Processing/Excel/Spreadsheet/Blazor/images/borders.gif new file mode 100644 index 000000000..0ddebfe78 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Blazor/images/borders.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/images/hide-gridlines-option.gif b/Document-Processing/Excel/Spreadsheet/Blazor/images/hide-gridlines-option.gif new file mode 100644 index 000000000..8296d108e Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Blazor/images/hide-gridlines-option.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/images/number-format-ribbon.gif b/Document-Processing/Excel/Spreadsheet/Blazor/images/number-format-ribbon.gif new file mode 100644 index 000000000..8785b0b8a Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Blazor/images/number-format-ribbon.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md b/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md index 225458706..d551d919b 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md @@ -93,6 +93,87 @@ When a protected sheet or workbook is saved or downloaded, all associated settin ### Supported file formats The Spreadsheet component supports saving files in the Microsoft Excel (.xlsx) format. +### Save an Excel file programmatically + +The Blazor Spreadsheet component provides two methods for saving Excel files programmatically: + +- [SaveAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SaveAsync_Syncfusion_Blazor_Spreadsheet_SaveOptions_) – Saves the spreadsheet as an Excel file. +- [SaveAsStreamAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SaveAsStreamAsync) – Returns the spreadsheet content as a memory stream for further processing or storage. + +#### Save as an Excel file + +The [SaveAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SaveAsync_Syncfusion_Blazor_Spreadsheet_SaveOptions_) method saves the spreadsheet content as an Excel file programmatically and supports customization through the [SaveOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SaveOptions.html) parameter. + +| Parameter | Type | Description | +| -- | -- | -- | +| options | [SaveOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SaveOptions.html) | Specifies settings for the save operation, such as the file name and file type (for example, XLSX). | + +N> If options are not provided, the default settings are **FileName**: `"Spreadsheet"` (the downloaded file will be named `"Spreadsheet.xlsx"`) and **SaveType**: [SaveType.Xlsx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SaveType.html). + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Spreadsheet + + + + +@code { + public byte[] DataSourceBytes { get; set; } + public SfSpreadsheet SpreadsheetInstance { get; set; } + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + public async Task SaveWorkbookHandler() + { + // Exports the workbook as "MonthlyReport.xlsx" + await SpreadsheetInstance.SaveAsync(new SaveOptions + { + SaveType = SaveType.Xlsx, + FileName = "MonthlyReport" + }); + } +} +{% endhighlight %} +{% endtabs %} + +#### Save as a memory stream + +The [SaveAsStreamAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SaveAsStreamAsync) method retrieves the spreadsheet content as a memory stream for further processing, such as saving to a database or cloud storage. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Spreadsheet + + + + +@code { + public byte[] DataSourceBytes { get; set; } + public SfSpreadsheet SpreadsheetInstance { get; set; } + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + public async Task SaveToServer() + { + var stream = await SpreadsheetInstance.SaveAsStreamAsync(); + // Example: Saves the stream to a file named "ServerReport.xlsx" + using var fileStream = File.Create("wwwroot/ServerReport.xlsx"); + stream.CopyTo(fileStream); + } +} +{% endhighlight %} +{% endtabs %} + ## New To create a new, blank workbook through the UI, select **File > New** from the **Ribbon**. This action initializes a blank spreadsheet component, ready for data entry or formatting. If unsaved changes are present, a confirmation dialog will appear, indicating that these changes will be lost. The dialog presents options to proceed with creating the new workbook by selecting **OK**, or to cancel the operation by selecting **Cancel**. diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/worksheet.md b/Document-Processing/Excel/Spreadsheet/Blazor/worksheet.md index 6217effd9..7fbd30f90 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/worksheet.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/worksheet.md @@ -391,3 +391,11 @@ This method creates a copy of the sheet with the specified name. The sheet name {% endhighlight %} {% endtabs %} + +## Gridlines + +Gridlines act as a border-like appearance of cells. They are used to distinguish cells on the worksheet. Gridlines can be shown or hidden using the following method: + +* Navigate to the **View tab** in the Ribbon toolbar and select the **Hide Gridlines** option to hide gridlines in the worksheet. + +![Hide Gridlines option](images/hide-gridlines-option.gif) \ No newline at end of file