diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md index ac215e6f03..967ee44930 100644 --- a/blazor/datagrid/getting-started-with-web-app.md +++ b/blazor/datagrid/getting-started-with-web-app.md @@ -13,6 +13,30 @@ This section briefly explains how to include the [Blazor DataGrid](https://www.s > **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +A Blazor Web App can be configured using a combination of **Interactive render mode** and **Interactivity location**. Choose the configuration that matches your application. The following table outlines the available render modes and interactivity options. + +| Interactive render mode | Interactivity location | Project structure | Where Syncfusion® components run | +| --- | --- | --- | --- | +| **Interactive Server** | Per page/component | Single project (`BlazorWebApp`) | Server-side over SignalR | +| **Interactive Server** | Global | Single project (`BlazorWebApp`) | Server-side over SignalR | +| **Interactive WebAssembly** | Per page/component | Server + `.Client` project | Client-side in the browser | +| **Interactive WebAssembly** | Global | Server + `.Client` project | Client-side in the browser | +| **Interactive Auto** | Per page/component | Server + `.Client` project | WebAssembly after the initial server render | +| **Interactive Auto** | Global | Server + `.Client` project | WebAssembly after the initial server render | + +## Blazor Web App project configuration reference + +The following table maps each render mode and interactivity configuration to the corresponding project and file locations referenced throughout this guide. + +| Interactive render mode | Interactivity location | Install NuGet packages in | `_Imports.razor` location | Register Blazor service in | Razor page location | `@rendermode` required | +| --- | --- | --- | --- | --- | --- | --- | +| **Interactive Server** | Per page/component | `BlazorWebApp` | `BlazorWebApp/Components/_Imports.razor` | `BlazorWebApp/Program.cs` | `BlazorWebApp/Components/Pages` | Yes, use `@rendermode InteractiveServer` | +| **Interactive Server** | Global | `BlazorWebApp` | `BlazorWebApp/Components/_Imports.razor` | `BlazorWebApp/Program.cs` | `BlazorWebApp/Components/Pages` | No (configured in `App.razor`) | +| **Interactive WebAssembly** | Per page/component | `BlazorWebApp.Client` | `BlazorWebApp.Client/_Imports.razor` | Both `BlazorWebApp/Program.cs` and `BlazorWebApp.Client/Program.cs` | `BlazorWebApp.Client/Pages` | Yes, use `@rendermode InteractiveWebAssembly` | +| **Interactive WebAssembly** | Global | `BlazorWebApp.Client` | `BlazorWebApp.Client/_Imports.razor` | Both `BlazorWebApp/Program.cs` and `BlazorWebApp.Client/Program.cs` | `BlazorWebApp.Client/Pages` | No (configured in `App.razor`) | +| **Interactive Auto** | Per page/component | `BlazorWebApp.Client` | `BlazorWebApp.Client/_Imports.razor` | Both `BlazorWebApp/Program.cs` and `BlazorWebApp.Client/Program.cs` | `BlazorWebApp.Client/Pages` | Yes, use `@rendermode InteractiveAuto` | +| **Interactive Auto** | Global | `BlazorWebApp.Client` | `BlazorWebApp.Client/_Imports.razor` | Both `BlazorWebApp/Program.cs` and `BlazorWebApp.Client/Program.cs` | `BlazorWebApp.Client/Pages` | No (configured in `App.razor`) | + ## Create a new Blazor Web App {% tabcontents %} @@ -28,7 +52,7 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight razor tabtitle="Terminal" %} +{% highlight bash tabtitle="Terminal" %} dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp @@ -46,7 +70,7 @@ Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microso Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight razor tabtitle="Command Prompt" %} +{% highlight bash tabtitle="Command Prompt" %} dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp @@ -61,9 +85,11 @@ cd BlazorWebApp.Client 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 the required Blazor packages +## Install the required NuGet packages + +Install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion® Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -Install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. +Refer to the [Blazor Web App project configuration reference](#blazor-web-app-project-configuration-reference) for the appropriate project location to install the required NuGet packages based on your selected render mode and interactivity configuration. {% tabcontents %} @@ -75,7 +101,7 @@ Install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.B Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight razor tabtitle="Package Manager Console" %} +{% highlight powershell tabtitle="Package Manager Console" %} Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} @@ -90,7 +116,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} Open the terminal and run the following commands. {% tabs %} -{% highlight razor tabtitle="Terminal" %} +{% highlight bash tabtitle="Terminal" %} dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} @@ -105,7 +131,7 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} Open the command prompt and run the following commands. {% tabs %} -{% highlight razor tabtitle="Command Prompt" %} +{% highlight bash tabtitle="Command Prompt" %} dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} @@ -119,10 +145,10 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} ## 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.Grids` namespaces. +After installing the required packages, import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces into the **_Imports.razor** file. For the appropriate file location based on your selected render mode and interactivity configuration, refer to the [Blazor Web App project configuration reference](#blazor-web-app-project-configuration-reference). {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Grids @@ -130,9 +156,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the `.Cl {% endhighlight %} {% endtabs %} -## Register the Blazor service +## Register Syncfusion® Blazor Service -Open the **Program.cs** file in Blazor Web App and register the Blazor service. 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. +Register the Syncfusion® Blazor service in the **Program.cs** file. For the appropriate file location based on your selected render mode and interactivity configuration, refer to the [Blazor Web App project configuration reference](#blazor-web-app-project-configuration-reference). {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -146,7 +172,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add theme stylesheet and script references 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](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/Components/App.razor** file. @@ -161,11 +187,13 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A {% endhighlight %} {% endtabs %} -## Add Blazor DataGrid component +## Add Syncfusion® Blazor DataGrid component + +Open a Razor page (for example, **Home.razor** or **Counter.razor**) and add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component. For the appropriate Razor page location based on your selected render mode and interactivity configuration, refer to the [Blazor Web App project configuration reference](#blazor-web-app-project-configuration-reference). -Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component inside the `.Client` project razor file. +N> When the interactivity location is set to **Per page/component**, add the appropriate `@rendermode` directive at the top of the Razor page. When using **Global** interactivity, the render mode is configured in `App.razor`, and no page-level `@rendermode` directive is required. -N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +The following example uses `InteractiveAuto` for **Per page/component** interactivity. Adjust the `@rendermode` directive to match your selected render mode. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -235,10 +263,15 @@ Press Ctrl+F5 (Windows) or +F5 (m {% tabcontent Visual Studio Code %} -Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. +Open the terminal and run the application from the appropriate project folder. {% tabs %} -{% highlight razor tabtitle="Terminal" %} +{% highlight bash tabtitle="Interactive Server" %} + +dotnet run + +{% endhighlight %} +{% highlight bash tabtitle="Interactive WebAssembly / Interactive Auto" %} cd .. cd BlazorWebApp @@ -251,10 +284,15 @@ dotnet run {% tabcontent .NET CLI %} -Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. +Open the command prompt and run the application from the appropriate project folder. {% tabs %} -{% highlight razor tabtitle="Command Prompt" %} +{% highlight razor tabtitle="Interactive Server" %} + +dotnet run + +{% endhighlight %} +{% highlight razor tabtitle="Interactive WebAssembly / Interactive Auto" %} cd .. cd BlazorWebApp @@ -268,3 +306,4 @@ dotnet run {% endtabcontents %} {% previewsample "https://blazorplayground.syncfusion.com/embed/htrHZdNkKnhrXYsw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + \ No newline at end of file