Skip to content

0000: Modified the UG content as per AI suggestion #3576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Saranya-Ragu wants to merge 1 commit into
base: development
Choose a base branch
from
Open

0000: Modified the UG content as per AI suggestion #3576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 41 additions & 11 deletions Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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" %}
Expand All @@ -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" %}
Expand All @@ -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 `<head>` and the script at the end of the `<body>` 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 `<head>` and the script at the end of the `<body>` in the **wwwroot/index.html** file as shown below:

{% tabs %}
{% highlight html tabtitle="index.html" %}
Expand All @@ -89,7 +96,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A

<body>
....
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
<script src="_content/Syncfusion.Blazor.Spreadsheet/scripts/syncfusion-blazor-spreadsheet.min.js" type="text/javascript"></script>
</body>
{% endhighlight %}
{% endtabs %}
Expand All @@ -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" %}
Expand All @@ -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)

Expand All @@ -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 <kbd>F5</kbd>) 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)
- [Getting started with the Blazor Spreadsheet in a Blazor Web App](./getting-started-webapp)
Loading