From 4e32c3b6411b3dc633c305d343571b6ef526a847 Mon Sep 17 00:00:00 2001 From: Saranya Ragu Date: Tue, 7 Jul 2026 11:37:26 +0530 Subject: [PATCH] 0000: Modified the getting-started UG content as per AI suggestion --- .../Blazor/blazor-hybrid-maui-app.md | 52 +++++++++++--- .../Blazor/getting-started-webapp.md | 69 +++++++++++++------ .../Spreadsheet/Blazor/getting-started.md | 61 ++++++++++++---- 3 files changed, 136 insertions(+), 46 deletions(-) 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 76de1b1aad..56481eab09 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md @@ -13,7 +13,9 @@ This section explains how to create and run a .NET MAUI Blazor Hybrid applicatio ## Prerequisites -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). +To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio 2022 (version 17.8 or later). For installation details, see the Microsoft documentation: [Install .NET MAUI](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin). + +N> If you are using Visual Studio Code or the .NET CLI on macOS/Linux, install the .NET MAUI workload using the command `dotnet workload install maui`. For more information, see [.NET MAUI workload installation](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation). ## Create a new Blazor MAUI App in Visual Studio @@ -37,9 +39,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} +N> The `{{ site.releaseversion }}` placeholder is replaced with the latest Syncfusion release version at documentation build time. You can also specify a particular released version (for example, `32.1.19`). + ## Add import namespaces -After the packages are installed, open the **~/_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" %} @@ -50,9 +54,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor Service +## Register Syncfusion Blazor Service -Register the Blazor Service in the **~/MauiProgram.cs** file. +Register the Blazor Service in the **MauiProgram.cs** file. {% tabs %} {% highlight c# tabtitle="MauiProgram.cs" %} @@ -69,15 +73,18 @@ public static class MauiProgram .... builder.Services.AddSyncfusionBlazor(); .... + return builder.Build(); } } {% endhighlight %} {% endtabs %} +N> `AddSyncfusionBlazor()` accepts optional configuration options such as enabling script isolation. See the [Blazor service registration](https://blazor.syncfusion.com/documentation/aspnet-core-blazor/getting-started-blazor-service-registration) topic for available configuration options. + ## 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 in the `` and the script at the end of the `` in the **~wwwroot/index.html** file as shown below: +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" %} @@ -89,7 +96,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A .... - + {% endhighlight %} {% endtabs %} @@ -98,7 +105,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Blazor Spreadsheet component -Add the 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. +Add the Blazor Spreadsheet component in any Razor file. In this example, the Spreadsheet component is added to the **Components/Pages/Home.razor** page. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -113,9 +120,13 @@ Add the Blazor Spreadsheet component in any Razor file. In this example, the Spr {% endhighlight %} {% endtabs %} +N> `SpreadsheetRibbon` is the optional ribbon toolbar child component of `SfSpreadsheet`. Omit it if you want to render the spreadsheet without the ribbon UI. + +N> .NET MAUI Blazor Hybrid apps run components natively on the device; no interactive render mode (such as `InteractiveServer` or `InteractiveWebAssembly`) is required. + ## 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. +In the Visual Studio toolbar, click the **Windows Machine** button to build and run the app. Ensure the run profile is set to `Windows Machine` and that the target framework matches your installed .NET MAUI workload (for example, `net8.0-windows10.0.19041.0`) before starting the app. ![Maui Tool](images/maui-build.png) @@ -127,18 +138,37 @@ After the application launches, the output will appear as shown below: 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. +1. Refer to [Android Device Manager on Windows](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch the Android emulator. +2. In the Visual Studio toolbar, select the **Android Emulators** run profile. +3. Click the **Android Emulators** button (or press F5) to build and deploy the app to the 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). +N> To run the app on iOS or Mac Catalyst, see [Publish a .NET MAUI app for iOS](https://learn.microsoft.com/en-us/dotnet/maui/ios/deployment/overview) and [Publish a .NET MAUI app for Mac Catalyst](https://learn.microsoft.com/en-us/dotnet/maui/mac-catalyst/deployment/overview). + ![Blazor Spreadsheet running in the Android emulator](images/android-emulator.png) +## Register Syncfusion License Key + +Register the Syncfusion license key in your application startup to avoid a license warning at runtime. Add the following line in the **MauiProgram.cs** file, after the `AddSyncfusionBlazor()` call: + +{% tabs %} +{% highlight c# tabtitle="MauiProgram.cs" %} + +// Register Syncfusion license key +Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY"); + +{% endhighlight %} +{% endtabs %} + +N> Replace `YOUR_LICENSE_KEY` with your actual Syncfusion license key. For details on generating and registering a license key, see [Licensing](https://blazor.syncfusion.com/documentation/licensing/). + To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). -N> [View Sample In GitHub.](https://github.com/SyncfusionExamples/syncfusion-maui-blazor-spreadsheet-integration). Looking for the full Blazor Spreadsheet Editor component overview, features, pricing, and documentation? Visit the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) page +N> [View sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-maui-blazor-spreadsheet-integration). Looking for the full Blazor Spreadsheet Editor component overview, features, pricing, and documentation? Visit the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) page ## 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 +- [Getting started with the Blazor Spreadsheet in a Blazor Web 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 f57683d710..10dc65230c 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md @@ -7,7 +7,7 @@ control: Spreadsheet documentation: ug --- -# Getting Started with the Blazor Spreadsheet in Web App +# Getting Started with the Blazor Spreadsheet in Blazor Web App This section briefly explains how to include the [Blazor Spreadsheet Editor](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). @@ -27,7 +27,7 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Blazor Spreadsheet NuGet Packages -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Blazor components NuGet packages within the client project. +If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install the 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: @@ -45,6 +45,8 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} +N> The `{{ site.releaseversion }}` placeholder is replaced with the latest Syncfusion release version at documentation build time. You can also specify a particular released version (for example, `32.1.19`). + {% endtabcontent %} {% tabcontent Visual Studio Code %} @@ -73,9 +75,11 @@ cd BlazorWebApp.Client 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). +N> If you selected the `Server` interactive render mode (no client project is created), skip the `cd BlazorWebApp.Client` command and run package commands from the server project directory. + ## Install Blazor Spreadsheet NuGet Packages -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Blazor components NuGet packages within the client project. +If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install the Blazor components NuGet packages within the client project. * 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. @@ -93,13 +97,17 @@ dotnet restore {% endtabs %} +N> After running `dotnet restore`, ensure there are no error messages in the terminal. If restore fails, verify your NuGet source (`https://api.nuget.org/v3/index.json`) is configured, clear the local cache with `dotnet nuget locals all --clear`, and retry. + +N> The `{{ site.releaseversion }}` placeholder is replaced with the latest Syncfusion release version at documentation build time. You can also specify a particular released version (for example, `32.1.19`). + {% endtabcontent %} {% tabcontent .NET CLI %} ## Prerequisites -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). Also, review the [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -125,9 +133,11 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} +N> If you selected the `Server` interactive render mode (no client project is created), skip the `cd BlazorWebApp.Client` command and run package commands from the server project directory. + ## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Blazor components NuGet packages within the client project. +If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install the Blazor components NuGet packages within the client project. * Open a command prompt, terminal, or shell. * Ensure you’re in the project root directory where your `.csproj` file is located (or the Client project if applicable). @@ -145,13 +155,17 @@ dotnet restore {% endtabs %} +N> After running `dotnet restore`, ensure there are no error messages in the terminal. If restore fails, verify your NuGet source (`https://api.nuget.org/v3/index.json`) is configured, clear the local cache with `dotnet nuget locals all --clear`, and retry. + +N> The `{{ site.releaseversion }}` placeholder is replaced with the latest Syncfusion release version at documentation build time. You can also specify a particular released version (for example, `32.1.19`). + {% endtabcontent %} {% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces. +After the packages are installed, open the **_Imports.razor** file (typically located at `Components/_Imports.razor` in Blazor Web App templates; in older templates or WebAssembly apps it may be at the project root) and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces. {% tabs %} {% highlight C# tabtitle="_Imports.razor" %} @@ -180,11 +194,13 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. +N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. For `Server` render mode, register it in the server project's **Program.cs** only. + +N> `AddSyncfusionBlazor()` accepts optional configuration options such as enabling script isolation. See the [Blazor service registration](https://blazor.syncfusion.com/documentation/aspnet-core-blazor/getting-started-blazor-service-registration) topic for available configuration options. ## 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 reference in the section and the script reference at the end of the in the **~/Components/App.razor** file as shown below. +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. {% tabs %} {% highlight razor tabtitle="App.razor" %} @@ -201,27 +217,23 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A {% endhighlight %} {% endtabs %} +N> If your project uses `Routes.razor` instead of `App.razor`, add the `` and `