diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md b/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md index 049a1a55f..a84050726 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md @@ -9,56 +9,24 @@ documentation: ug # Getting Started with .NET MAUI Blazor Hybrid App -This section explains how to create and run a .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Hybrid App) using Syncfusion® Blazor Spreadsheet component. - -## What is a .NET MAUI Blazor Hybrid App? - -A .NET MAUI Blazor Hybrid App is a .NET MAUI application where a Blazor Web App is hosted in the .NET MAUI app using the BlazorWebView control. This enables a Blazor Web App to integrate with platform features and UI controls. The BlazorWebView can be added to any page of a .NET MAUI app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render the web UI to an embedded web view control. .NET MAUI Blazor apps can run on all platforms supported by .NET MAUI. - -Visual Studio provides the **.NET MAUI Blazor Hybrid App** template to create .NET MAUI Blazor Hybrid Apps. +This section explains how to create and run a .NET MAUI Blazor Hybrid application using the [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component. ## Prerequisites -- .NET SDK 8.0 or above -- Visual Studio 2022 17.1 or above with the required workloads: - - [Mobile development with .NET](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-10.0&tabs=visual-studio) - - ASP.NET and web development - -## Create a new .NET MAUI Blazor App in Visual Studio +To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For installation details, see the Microsoft documentation: [Install .NET MAUI](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin). -Create a **.NET MAUI Blazor Hybrid App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0). +## Create a new Blazor MAUI App in Visual Studio -## BlazorWebView in .NET MAUI Blazor App +Create a **Blazor MAUI App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0). -The above steps create a multi-targeted .NET MAUI Blazor app that can be deployed to Android, iOS, macOS, and Windows. - -In `MainPage.xaml`, the `BlazorWebView` is added and points to the root of the Blazor app. The root Blazor component for the app is in `Routes.razor`, which Razor compiles into a type named `Routes` in the application’s root namespace. - -{% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Blazor Spreadsheet NuGet Packages -For more details, refer to the [Create a .NET MAUI Blazor app](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview?view=net-maui-10.0#create-a-net-maui-blazor-app) topic. +To add **Syncfusion Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install: +* [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) -## Install Syncfusion Blazor Spreadsheet and Themes NuGet in the App - -To add the Blazor Spreadsheet component to the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -69,14 +37,12 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - -## Register Syncfusion® Blazor Service +## Add import namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces. +After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Spreadsheet @@ -84,52 +50,92 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Next, register the Syncfusion® Blazor Service in the MauiProgram.cs file of the MAUI Blazor App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/MauiProgram.cs** file. {% tabs %} -{% highlight C# tabtitle="~/MauiProgram.cs" %} +{% highlight c# tabtitle="MauiProgram.cs" %} +.... using Syncfusion.Blazor; - .... - builder.Services.AddSyncfusionBlazor(); - .... + +.... + +public static class MauiProgram +{ + public static MauiApp CreateMauiApp() + { + .... + builder.Services.AddSyncfusionBlazor(); + .... + } +} {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` of the **~wwwroot/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **~wwwroot/index.html** file as shown below: + +{% tabs %} +{% highlight html tabtitle="index.html" %} -```html .... - -``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor Spreadsheet component + + .... + + +{% endhighlight %} +{% endtabs %} -Add the Syncfusion® Blazor Spreadsheet component in any Razor file. In this example, the Spreadsheet component is added to the ~/Home.razor page under the **~/Components/Pages** folder. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +## Add Syncfusion® Blazor Spreadsheet component + +Add the Syncfusion® Blazor Spreadsheet component in any Razor file. In this example, the Spreadsheet component is added to the **~/Home.razor** page under the **~/Components/Pages** folder. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} - +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + -@code { - public byte[] DataSourceBytes { get; set; } - - protected override void OnInitialized() - { - string filePath = "wwwroot/Sample.xlsx"; - DataSourceBytes = File.ReadAllBytes(filePath); - } -} - {% endhighlight %} {% endtabs %} + +## Run on Windows + +In the Visual Studio toolbar, click the **Windows Machine** to build and run the app. Ensure the run profile is set to `Windows Machine` before starting the app. + +![Maui Tool](images/maui-build.png) + +After the application launches, the output will appear as shown below: + +![Blazor Spreadsheet](images/getting-started-maui.png) + +## Run on Android + +To run the Spreadsheet on Android using the Android emulator, follow these steps: + +Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. + +N> If any errors occur while using the Android Emulator, see [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). + +![Blazor Spreadsheet running in the Android emulator](images/android-emulator.png) + +N> To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/syncfusion-maui-blazor-spreadsheet-integration). + +## See Also + +- [Getting started with the Blazor Spreadsheet in a Blazor WebAssembly App](./getting-started) +- [Getting started with the Blazor Spreadsheet in a Blazor Web app Server app](./getting-started-webapp) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md index 5bdaf22de..d8ce8ba61 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with the Blazor Spreadsheet in Web App -This section briefly explains how to include the [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section briefly explains how to include the [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). {% tabcontents %} @@ -23,14 +23,17 @@ This section briefly explains how to include the [Blazor Spreadsheet](https://ww Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor Spreadsheet and Themes NuGet Packages in the App - -To add **Syncfusion Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +## Install Syncfusion® Blazor Spreadsheet NuGet Packages If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +To add **Syncfusion Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install: + +* [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} @@ -42,8 +45,6 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - {% endtabcontent %} {% tabcontent Visual Studio Code %} @@ -56,7 +57,7 @@ N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,9 +71,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](./getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a Blazor Web App with various interactive modes and locations, see [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). -## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App +## Install Syncfusion® Blazor Spreadsheet NuGet Packages If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. @@ -92,8 +93,6 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - {% endtabcontent %} {% endtabcontents %} @@ -103,7 +102,7 @@ N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Spreadsheet @@ -121,7 +120,9 @@ Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor .... using Syncfusion.Blazor; .... + builder.Services.AddSyncfusionBlazor(); + .... {% endhighlight %} @@ -131,15 +132,22 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the section and the script reference at the end of the in the **~/Components/App.razor** file as shown below. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} - -.... - + + .... + + + + .... + + -``` +{% endhighlight %} +{% endtabs %} N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. @@ -153,7 +161,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% highlight razor %} @* desired render mode define here *@ -@rendermode InteractiveAuto +@rendermode InteractiveServer {% endhighlight %} {% endtabs %} @@ -161,28 +169,27 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + -@code { - public byte[] DataSourceBytes { get; set; } - - protected override void OnInitialized() - { - string filePath = "wwwroot/Sample.xlsx"; - DataSourceBytes = File.ReadAllBytes(filePath); - } -} - {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Spreadsheet in your default web browser. +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Spreadsheet in your default web browser. The output will appear as follows: + +![Blazor Spreadsheet](images/getting-started.png) + +You can also experiment directly using the interactive playground below for a quick demo: + +{% playground "https://blazorplayground.syncfusion.com/embed/BtLHDSMIxNVhqnlu?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %} + +N> To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spreadsheet). ## See Also -* [Blazor Spreadsheet Overview](overview) -* [Open and Save](open-and-save) +- [Getting started with the Blazor Spreadsheet in a Blazor WebAssembly App](./getting-started) +- [Getting Started with .NET MAUI Blazor Hybrid App](./blazor-hybrid-maui-app) diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md index dcc0581fb..8ffecb0d3 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Blazor Spreadsheet Component | Syncfusion +title: Getting Started with Blazor Spreadsheet Component in WASM| Syncfusion description: Checkout and learn about getting started with Blazor Spreadsheet component in Blazor WebAssembly Application. platform: document-processing control: Spreadsheet @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Spreadsheet Component -This section briefly explains how to include [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section briefly explains how to include [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). {% tabcontents %} @@ -21,11 +21,16 @@ This section briefly explains how to include [Blazor Spreadsheet](https://www.sy ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor WebAssembly App (Standalone)** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App +## Install Syncfusion® Blazor Spreadsheet NuGet Packages -To add **Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Syncfusion Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install: + +* [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,8 +41,6 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - {% endtabcontent %} {% tabcontent Visual Studio Code %} @@ -48,7 +51,7 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor WebAssembly App (Standalone)** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). @@ -63,7 +66,7 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App +## Install Syncfusion® Blazor Spreadsheet NuGet Packages * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -81,8 +84,6 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - {% endtabcontent %} {% endtabcontents %} @@ -92,7 +93,7 @@ N> Syncfusion® Blazor components are availa After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Spreadsheet @@ -105,12 +106,14 @@ After the packages are installed, open the **~/_Imports.razor** file and import Register the Syncfusion Blazor service in the **~/Program.cs** file of your Blazor WebAssembly App. {% tabs %} -{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} +{% highlight C# tabtitle="Program.cs" %} .... using Syncfusion.Blazor; .... + builder.Services.AddSyncfusionBlazor(); + .... {% endhighlight %} @@ -120,45 +123,49 @@ builder.Services.AddSyncfusionBlazor(); The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} + .... -``` + +{% endhighlight %} +{% endtabs %} + N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor Spreadsheet component +## Add Syncfusion® Blazor Spreadsheet component -Add the Syncfusion® Blazor Spreadsheet component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Spreadsheet component in the **~/Pages/Home.razor** file. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -Note: Due to WebAssembly (WASM) browser restrictions, File.ReadAllBytes is not supported. Therefore, the samples use a Base64‑encoded Excel file, which is decoded at runtime to load data without direct file system access. +@page "/" +@using Syncfusion.Blazor.Spreadsheet - + -@code { - public byte[] DataSourceBytes { get; set; } - - protected override void OnInitialized() - { - // Replace with your base64-encoded Excel file - string base64File = "YourBase64EncodedExcelFileHere"; - DataSourceBytes = Convert.FromBase64String(base64File); - } -} - {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Spreadsheet in your default web browser. +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Spreadsheet in your default web browser. The output will appear as follows: + +![Blazor Spreadsheet](images/getting-started.png) + +You can also experiment directly using the interactive playground below for a quick demo: + +{% playground "https://blazorplayground.syncfusion.com/embed/BtLHDSMIxNVhqnlu?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %} + +N> To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spreadsheet). ## See Also -* [Blazor Spreadsheet Overview](overview.md) -* [Open and Save](open-and-save.md) +- [Getting started with the Blazor Spreadsheet in a Blazor Web app Server app](./getting-started-webapp) +- [Getting Started with .NET MAUI Blazor Hybrid App](./blazor-hybrid-maui-app) + diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/images/android-emulator.png b/Document-Processing/Excel/Spreadsheet/Blazor/images/android-emulator.png new file mode 100644 index 000000000..93dd1f572 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Blazor/images/android-emulator.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/images/blazor-overview.png b/Document-Processing/Excel/Spreadsheet/Blazor/images/blazor-overview.png new file mode 100644 index 000000000..bc5c5e169 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Blazor/images/blazor-overview.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/images/getting-started-maui.png b/Document-Processing/Excel/Spreadsheet/Blazor/images/getting-started-maui.png new file mode 100644 index 000000000..e0c15e454 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Blazor/images/getting-started-maui.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/images/getting-started.png b/Document-Processing/Excel/Spreadsheet/Blazor/images/getting-started.png new file mode 100644 index 000000000..80a627281 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Blazor/images/getting-started.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/images/maui-build.png b/Document-Processing/Excel/Spreadsheet/Blazor/images/maui-build.png new file mode 100644 index 000000000..aeca40722 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Blazor/images/maui-build.png differ diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/overview.md b/Document-Processing/Excel/Spreadsheet/Blazor/overview.md index fd0f59159..0280f40af 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/overview.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/overview.md @@ -9,22 +9,33 @@ documentation: ug # Overview of the Blazor Spreadsheet Control -The Syncfusion Blazor Spreadsheet is a user-interactive component designed to organize and analyze data in a tabular format with configuration options for customization. It will load data by importing an Excel file or from local file paths and Base64 string data. The populated data can be exported as Excel files in `.xlsx` format. +The [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) is a user-interactive component designed to organize and analyze data in a tabular format with configuration options for customization. It will load data by importing an Excel file or from local file paths and Base64 string data. The populated data can be exported as Excel files in XLSX format. + +![Blazor Spreadsheet](images/blazor-overview.png) ## Key features -* [**Editing**](editing): Provides the option to dynamically edit a cell with support for direct cell editing and formula bar editing capabilities. -* [**Selection**](selection): Provides comprehensive selection options including individual cells, rows, columns, and ranges with support for both mouse and keyboard interactions. -* [**Open and Save**](open-and-save): Provides the option to open Excel files (.xlsx and .xls formats) in Spreadsheet and save data as Excel files (.xlsx format) with support for Base64 string loading and local file operations. -* [**Clipboard**](clipboard): Provides comprehensive clipboard operations including cut, copy, and paste functionality with support for external clipboard data from applications like Excel and Google Sheets. -* [**Formulas**](formulas): Provides built-in calculation library with pre-defined formulas, named range support, and automatic/manual calculation modes. -* [**Cell formatting**](cell-range#cell-formatting): Provides extensive cell formatting options including font properties, colors, borders, alignment, and text styling to enhance data presentation. -* [**Sorting**](sorting): Helps arrange data in ascending or descending order with support for single-column sorting helps users quickly organize and find information. -* [**Filtering**](filtering): Helps view specific rows by hiding others with support for text, numbers, and date filters along with custom filter conditions. -* [**Hyperlink**](hyperlink): Provides the option to create navigational links to web URLs or cell references within the same sheet or across different sheets. -* [**Undo Redo**](undo-redo): Provides the option to perform undo and redo actions with a history that tracks up to 25 operations, allowing for quick corrections and revisions. -* [**Worksheet**](worksheet): Comprehensive worksheet management including inserting, deleting, renaming, hiding/unhiding, moving, and duplicating sheets. -* [**Protection**](protection): Provides sheet and workbook protection capabilities with password support, selective unlocking of ranges, and configurable permission settings. -* [**Context Menu**](contextmenu): Provides context-sensitive menus for cells, rows, and columns with operations like cut, copy, paste, insert, delete, sort, filter, and hyperlink management. -* [**Cell Range Management**](cell-range): Advanced cell range operations including auto-fill, wrap text, and clear operations for content, formats, and hyperlinks. -* [**Accessibility**](accessibility): Provides built-in accessibility support with keyboard navigation, ARIA attributes, and screen reader compatibility for enhanced usability. +* [Editing](editing): Familiar Excel-like experience for faster productivity with seamless in-cell and formula bar input +* [Selection](selection): Flexible selection of cells, rows, columns, and ranges using mouse and keyboard +* [Open and save](open-and-save): Seamless support for Excel files (.xlsx, .xls) with local and Base64 operations +* [Clipboard](clipboard): Powerful cut, copy, and paste with cross-platform compatibility (Excel, Google Sheets) +* [Formulas](formulas): Advanced calculation engine with built-in functions and named ranges +* [Cell formatting](cell-range#cell-formatting): Rich cell formatting options including fonts, colors, borders, alignment, and styling +* [Sorting](sorting): Efficient data sorting in ascending and descending order for quick organization +* [Filtering](filtering): Advanced filtering with support for text, numbers, dates, and custom condition +* [Hyperlink](hyperlink): Easy navigation across web URLs and worksheets +* [Undo Redo](undo-redo): Fast error correction with history tracking up to 25 actions +* [Worksheet management](worksheet): Complete worksheet management including insert, delete, rename, move, duplicate, and hide/unhide +* [Protection](protection): Robust workbook and sheet protection with password, permissions, and selective locking +* [Context Menu](contextmenu): Speed up workflows with instant access to key actions via smart menus +* [Cell range](cell-range): Boost efficiency with auto-fill, wrap text, and quick content clearing +* [Accessibility](accessibility): Built-in accessibility support including keyboard navigation, ARIA attributes, and screen reader + +## Related Links + +* [Getting Started](getting-started-webapp) +* [API Reference](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.spreadsheet.sfspreadsheet.html) +* [Online Demos](https://document.syncfusion.com/demos/spreadsheet-editor/blazor-server/spreadsheet/overview) +* [GitHub Samples](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spreadsheet) +* [Release Notes](https://help.syncfusion.com/document-processing/release-notes) +