Documentation(1027606): Updated the MAUI getting started.

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<sup style="font-size:70%">&reg;</sup> 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" %}
-
-<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:local="clr-namespace:MauiApp1"
-             x:Class="MauiApp1.MainPage">
-
-    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
-        <BlazorWebView.RootComponents>
-            <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
-        </BlazorWebView.RootComponents>
-    </BlazorWebView>
-
-</ContentPage>
-
-{% endhighlight %}
-{% endtabs %}
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> 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,11 +37,9 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Add import namespaces
 
-In the **~/_Imports.razor** file, add the following 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" %}
@@ -84,39 +50,25 @@ In the **~/_Imports.razor** file, add the following namespaces:
 {% endhighlight %}
 {% endtabs %}
 
-Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="MauiProgram.cs" hl_lines="3 26" %}
+{% highlight c# tabtitle="MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
-using MauiBlazorWindow.Data;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
 public static class MauiProgram
 {
     public static MauiApp CreateMauiApp()
     {
-        var builder = MauiApp.CreateBuilder();
-        builder
-            .UseMauiApp<App>()
-            .ConfigureFonts(fonts =>
-            {
-                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-            });
-
-        builder.Services.AddMauiBlazorWebView();
-
-#if DEBUG
-        builder.Services.AddBlazorWebViewDeveloperTools();
-        builder.Logging.AddDebug();
-#endif
-
-        builder.Services.AddSingleton<WeatherForecastService>();
+        ....
         builder.Services.AddSyncfusionBlazor();
-        return builder.Build();
+        ....
     }
 }
 
@@ -133,15 +85,18 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 <head>
     ....
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Spreadsheet/scripts/syncfusion-blazor-spreadsheet.min.js" type="text/javascript"></script>
 </head>
 
+<body>
+    ....
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
 {% 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<sup style="font-size:70%">&reg;</sup> Blazor Spreadsheet component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> 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.
 
@@ -158,13 +113,25 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spreadsheet comp
 {% 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)
 
-N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for setup instructions.
+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](images/getting-started.png)
+![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.md). 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).
 

Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md

@@ -106,7 +106,7 @@ 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;
@@ -137,7 +137,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 
 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<sup style="font-size:70%">&reg;</sup> Blazor Spreadsheet component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spreadsheet component in the **~/Pages/Home.razor** file.