From 6e116b635ba147aedb1699310b1f3d1a55fc6465 Mon Sep 17 00:00:00 2001 From: Trisha Kumarasamy Date: Thu, 14 May 2026 12:38:17 +0530 Subject: [PATCH 1/5] blazor-web-app component content updated. --- .../3D-chart/getting-started-with-web-app.md | 40 +++++++++------ .../accordion/getting-started-with-web-app.md | 38 ++++++++------ .../getting-started-with-web-app.md | 49 +++++++++++++------ blazor/appbar/getting-started-with-web-app.md | 40 +++++++++------ .../getting-started-with-web-app.md | 42 ++++++++++------ blazor/avatar/getting-started-with-web-app.md | 27 ++++++++-- blazor/badge/getting-started-with-web-app.md | 26 ++++++++-- .../barcode/getting-started-with-web-app.md | 41 +++++++++++----- blazor/block-editor/getting-started.md | 40 +++++++++------ .../getting-started-with-web-app.md | 39 +++++++++------ 10 files changed, 261 insertions(+), 121 deletions(-) diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md index 4b3a04fc95..7afb5aa7de 100644 --- a/blazor/3D-chart/getting-started-with-web-app.md +++ b/blazor/3D-chart/getting-started-with-web-app.md @@ -93,19 +93,26 @@ This command creates a new Blazor Web App and places it in a new directory calle 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 packages +Install the [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet package in the project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +**Visual Studio (NuGet Package Manager)**: -Alternatively, run the following commands in the Package Manager Console to achieve the same. +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Chart3D`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Chart3D -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Chart3D -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. N> 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. @@ -155,19 +162,11 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor 3D Chart component -Add the Syncfusion® Blazor 3D Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor 3D Chart component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -180,6 +179,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor 3D Chart component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + ## Populate Blazor 3D Chart with data To bind data for the 3D chart component, you can assign a IEnumerable object to the `DataSource` property. It can also be provided as an instance of the `DataManager`. @@ -187,6 +196,9 @@ To bind data for the 3D chart component, you can assign a IEnumerable object to {% tabs %} {% highlight razor tabtitle="Home.razor" %} + +@rendermode InteractiveAuto + public class SalesInfo { public string Month { get; set; } diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md index b27b9a665e..30277cabd7 100644 --- a/blazor/accordion/getting-started-with-web-app.md +++ b/blazor/accordion/getting-started-with-web-app.md @@ -88,16 +88,22 @@ This command creates a new Blazor Web App and places it in a new directory calle 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 packages +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +**Visual Studio (NuGet Package Manager)**: -Alternatively, run the following commands in the Package Manager Console to achieve the same. +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -154,22 +160,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Accordion component -Add the Syncfusion® Blazor Accordion component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Accordion component inside the razor file. +* 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`). N> If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - @@ -183,6 +183,16 @@ N> If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accordion component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfZMDKrVnxBgsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component](images/blazor-accordion-component.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Accordion/) diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index 09f89e92d9..d7a5585235 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -89,19 +89,27 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Charts` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. N> 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. @@ -153,22 +161,17 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Accumulation Chart component -Add the Syncfusion® Blazor Accumulation Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Accumulation Chart component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto + @@ -201,6 +204,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Accumulation Chart component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart) @@ -212,6 +225,8 @@ Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto + @@ -250,6 +265,8 @@ The data labels are added to improve the readability of the accumulation chart. {% tabs %} {% highlight razor %} +@rendermode InteractiveAuto + @@ -270,6 +287,8 @@ When space constraints prevent from displaying the information using data labels {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto + @@ -290,6 +309,8 @@ Legend is used for the accumulation chart by setting the [Visible](https://help. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto + diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md index f9779e29c6..3dc45a5d47 100644 --- a/blazor/appbar/getting-started-with-web-app.md +++ b/blazor/appbar/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor AppBar component -Add the Syncfusion® Blazor AppBar component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor AppBar component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons @@ -192,6 +192,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AppBar component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/rNBfNCLSLdCUQyHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar Component](images/getting_started.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AppBar) diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index ec890e6946..c5d5ff6c70 100644 --- a/blazor/autocomplete/getting-started-with-web-app.md +++ b/blazor/autocomplete/getting-started-with-web-app.md @@ -89,19 +89,27 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.DropDowns` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.DropDowns -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. N> 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. @@ -153,22 +161,17 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor AutoComplete component -Add the Syncfusion® Blazor AutoComplete component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. - -{% tabs %} -{% highlight razor %} +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor AutoComplete component inside the razor file. +* 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`). -@* desired render mode define here *@ -@rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} +N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.DropDowns @@ -197,6 +200,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AutoComplete component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor AutoComplete Component](./images/blazor-autocomplete-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AutoComplete) @@ -208,6 +221,7 @@ After initialization, populate the AutoComplete with data using the [DataSource] {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.DropDowns diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md index 348502f159..4a0876004c 100644 --- a/blazor/avatar/getting-started-with-web-app.md +++ b/blazor/avatar/getting-started-with-web-app.md @@ -89,18 +89,27 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. N> 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. @@ -150,6 +159,16 @@ Add the Syncfusion® Blazor Avatar component * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Avatar component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar) \ No newline at end of file diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md index 1d66845ee1..0d13d5f6ae 100644 --- a/blazor/badge/getting-started-with-web-app.md +++ b/blazor/badge/getting-started-with-web-app.md @@ -89,14 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -131,6 +139,16 @@ Add the Syncfusion® Blazor Badge component * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge). \ No newline at end of file diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 70848c91e5..9f44de3392 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.BarcodeGenerator -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,19 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Barcode component inside the razor file. +* 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`). -{% tabs %} -{% highlight razor %} -@* desired render mode define here *@ -@rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} +N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. + {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto {% endhighlight %} @@ -176,6 +180,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Barcode). @@ -187,6 +201,7 @@ Add a QR code in our barcode generator component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto {% endhighlight %} diff --git a/blazor/block-editor/getting-started.md b/blazor/block-editor/getting-started.md index 498305954e..7ed8708e66 100644 --- a/blazor/block-editor/getting-started.md +++ b/blazor/block-editor/getting-started.md @@ -91,15 +91,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.BlockEditor` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.BlockEditor -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.BlockEditor -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,19 +160,11 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Block Editor component -Add the Syncfusion® Blazor Block Editor component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Block Editor component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* Define desired render mode here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -176,6 +175,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Block Editor component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLIsrhAgbKCOpbZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor BlockEditor Default.](images/blazor-block-editor-default.webp)" %} ## Configure blocks @@ -185,6 +194,7 @@ The Block Editor uses a block-based content structure where each block represent {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.BlockEditor diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md index 86a53786cc..1a9879eca4 100644 --- a/blazor/breadcrumb/getting-started-with-web-app.md +++ b/blazor/breadcrumb/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ### Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,22 +158,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Breadcrumb component -Add the Syncfusion® Blazor Breadcrumb component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Breadcrumb component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto {% endhighlight %} @@ -174,6 +175,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Breadcrumb component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Breadcrumb). From 0443d9dd97c429ea181227fda638c1dd28985c4e Mon Sep 17 00:00:00 2001 From: Trisha Kumarasamy Date: Thu, 14 May 2026 16:53:41 +0530 Subject: [PATCH 2/5] Committing 10 components web-app page content. --- .../3D-chart/getting-started-with-web-app.md | 2 +- .../getting-started-with-web-app.md | 39 +++++++++++------ .../getting-started-with-web-app.md | 39 +++++++++++------ blazor/button/getting-started-with-web-app.md | 39 +++++++++++------ .../calendar/getting-started-with-web-app.md | 41 +++++++++++------- blazor/card/getting-started-with-web-app.md | 39 +++++++++++------ .../carousel/getting-started-with-web-app.md | 40 +++++++++++------ .../getting-started-with-web-app.md | 41 ++++++++++++------ blazor/chart/getting-started-with-web-app.md | 43 +++++++++++++------ blazor/chat-ui/getting-started-webapp.md | 39 +++++++++++------ .../check-box/getting-started-with-web-app.md | 41 ++++++++++++------ 11 files changed, 261 insertions(+), 142 deletions(-) diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md index 7afb5aa7de..9fc5774a53 100644 --- a/blazor/3D-chart/getting-started-with-web-app.md +++ b/blazor/3D-chart/getting-started-with-web-app.md @@ -93,7 +93,7 @@ This command creates a new Blazor Web App and places it in a new directory calle 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 packages -Install the [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. +Install the [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet packages using one of the following methods. **Visual Studio (NuGet Package Manager)**: diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md index 9999041e50..f47754c3eb 100644 --- a/blazor/bullet-chart/getting-started-with-web-app.md +++ b/blazor/bullet-chart/getting-started-with-web-app.md @@ -89,18 +89,26 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor BulletChart NuGet in the App -Install [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.BulletChart`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.BulletChart -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.BulletChart -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. N> 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. @@ -150,22 +158,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor Bullet Chart component -Add the Syncfusion® Blazor Bullet Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Bullet Chart component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -186,6 +187,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Bullet Chart component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart). diff --git a/blazor/button-group/getting-started-with-web-app.md b/blazor/button-group/getting-started-with-web-app.md index 7141a10cb0..0de03a9e87 100644 --- a/blazor/button-group/getting-started-with-web-app.md +++ b/blazor/button-group/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.SplitButtons` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.SplitButtons -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor ButtonGroup component -Add the Syncfusion® Blazor ButtonGroup component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor ButtonGroup component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto Left Center @@ -180,6 +181,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ButtonGroup component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/VjVftihITUHgzQAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup Component](./images/blazor-button-group-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ButtonGroup). diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md index 08f2f834fc..edccc78df0 100644 --- a/blazor/button/getting-started-with-web-app.md +++ b/blazor/button/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Buttons -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Button component -Add the Syncfusion® Blazor Button component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Button component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto Button {% endhighlight %} @@ -176,6 +177,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Button component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLftsrepgKpagFy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button Component](./images/blazor-button-component.webp)" %} N> You can also explore our [Blazor Button example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?) that shows how to render and configure the button. diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index abb6e5079a..54fb9eed1f 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Calendars` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Calendar component -Add the Syncfusion® Blazor Calendar component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Calendar component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveServer - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto {% endhighlight %} @@ -176,6 +176,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Calendar component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). @@ -189,6 +199,7 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Calendars diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md index 4e42041699..f14e0031f8 100644 --- a/blazor/card/getting-started-with-web-app.md +++ b/blazor/card/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Cards` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Cards -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Cards -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,28 +160,31 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Card component -Add the Syncfusion® Blazor Card component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Card component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + Sample Card {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Card component in the default web browser. - Sample Card +**Visual Studio Code or .NET CLI**: -{% endhighlight %} -{% endtabs %} +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Card component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. ## Add header and content @@ -183,6 +193,7 @@ You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blaz {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto
diff --git a/blazor/carousel/getting-started-with-web-app.md b/blazor/carousel/getting-started-with-web-app.md index 3f65497e5f..9e5b508a1b 100644 --- a/blazor/carousel/getting-started-with-web-app.md +++ b/blazor/carousel/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Carousel component -Add the Syncfusion® Blazor Carousel component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Carousel component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Navigations
@@ -235,6 +236,17 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Carousel component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + + {% previewsample "https://blazorplayground.syncfusion.com/embed/hthSMMhiVkQbevAP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Carousel). diff --git a/blazor/chart-wizard/getting-started-with-web-app.md b/blazor/chart-wizard/getting-started-with-web-app.md index 5c1a66e166..eed95734f1 100644 --- a/blazor/chart-wizard/getting-started-with-web-app.md +++ b/blazor/chart-wizard/getting-started-with-web-app.md @@ -92,18 +92,26 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) NuGet packages using one of the following methods. -Alternatively, run the following command in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.ChartWizard`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.ChartWizard -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.ChartWizard -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. N> 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. @@ -153,22 +161,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor Chart Wizard component -Add the Syncfusion® Blazor Chart Wizard component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Chart Wizard component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -178,6 +179,17 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chart Wizard component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + + ![Chart Wizard Default](images/chart-wizard-default.webp) ## Populate Blazor Chart Wizard data @@ -221,6 +233,7 @@ The default series type is Line. Use the `SeriesType` property to change the ser {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto
Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet packages using one of the following methods. -Alternatively, run the following command in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Charts`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. N> 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. @@ -152,22 +160,16 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor Chart component -Add the Syncfusion® Blazor Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). - -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Chart component inside the razor file. +* 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`). -{% tabs %} -{% highlight razor %} -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} +N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -177,6 +179,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chart component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} ## Populate Blazor chart with data @@ -236,6 +248,7 @@ You can add data labels to improve the readability of the chart. This can be ach {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -260,6 +273,7 @@ When space constraints prevent you from displaying information using data labels {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -282,6 +296,7 @@ You can use legend for the chart by setting the [Visible](https://help.syncfusio {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md index 8037f4ee7d..4cbd12ff52 100644 --- a/blazor/chat-ui/getting-started-webapp.md +++ b/blazor/chat-ui/getting-started-webapp.md @@ -94,15 +94,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.InteractiveChat` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.InteractiveChat -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.InteractiveChart -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -158,22 +165,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Chat UI Component -Add the Syncfusion® Blazor Chat UI component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Chat UI component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.InteractiveChat
@@ -185,6 +186,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.webp)" %} ## Configure Messages and User diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index cabcdf9c4b..9ab7e2d31e 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -89,19 +89,27 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Buttons -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. N> 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. @@ -153,22 +161,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor CheckBox component -Add the Syncfusion® Blazor CheckBox component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor CheckBox component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Buttons @@ -183,6 +185,17 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor CheckBox component in the default web browser. +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + + {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpNsLuinxRTsQp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.webp)" %} N> You can also explore our [Blazor CheckBox example](https://blazor.syncfusion.com/demos/buttons/checkbox) that shows how to render and configure the CheckBox. From c45c37b44a5c134dcd54bbb7a24bea7818031772 Mon Sep 17 00:00:00 2001 From: Trisha Kumarasamy Date: Thu, 14 May 2026 17:44:04 +0530 Subject: [PATCH 3/5] Committing 20 components with single rendermode --- blazor/3D-chart/getting-started-with-web-app.md | 3 +-- blazor/accumulation-chart/getting-started-with-web-app.md | 7 ------- blazor/autocomplete/getting-started-with-web-app.md | 1 - blazor/calendar/getting-started-with-web-app.md | 1 - blazor/card/getting-started-with-web-app.md | 1 - blazor/chart-wizard/getting-started-with-web-app.md | 1 - blazor/chart/getting-started-with-web-app.md | 3 --- 7 files changed, 1 insertion(+), 16 deletions(-) diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md index 9fc5774a53..81c4e1728c 100644 --- a/blazor/3D-chart/getting-started-with-web-app.md +++ b/blazor/3D-chart/getting-started-with-web-app.md @@ -170,6 +170,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -197,8 +198,6 @@ To bind data for the 3D chart component, you can assign a IEnumerable object to {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto - public class SalesInfo { public string Month { get; set; } diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index d7a5585235..1856ccb20b 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -225,7 +225,6 @@ Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto @@ -265,8 +264,6 @@ The data labels are added to improve the readability of the accumulation chart. {% tabs %} {% highlight razor %} -@rendermode InteractiveAuto - @@ -287,8 +284,6 @@ When space constraints prevent from displaying the information using data labels {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto - @@ -309,8 +304,6 @@ Legend is used for the accumulation chart by setting the [Visible](https://help. {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto - diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index c5d5ff6c70..cc1ced3708 100644 --- a/blazor/autocomplete/getting-started-with-web-app.md +++ b/blazor/autocomplete/getting-started-with-web-app.md @@ -221,7 +221,6 @@ After initialization, populate the AutoComplete with data using the [DataSource] {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto @using Syncfusion.Blazor.DropDowns diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index 54fb9eed1f..cf1cf20f2f 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -199,7 +199,6 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto @using Syncfusion.Blazor.Calendars diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md index f14e0031f8..3e9fc84b64 100644 --- a/blazor/card/getting-started-with-web-app.md +++ b/blazor/card/getting-started-with-web-app.md @@ -193,7 +193,6 @@ You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blaz {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto
diff --git a/blazor/chart-wizard/getting-started-with-web-app.md b/blazor/chart-wizard/getting-started-with-web-app.md index eed95734f1..3589bf4a31 100644 --- a/blazor/chart-wizard/getting-started-with-web-app.md +++ b/blazor/chart-wizard/getting-started-with-web-app.md @@ -233,7 +233,6 @@ The default series type is Line. Use the `SeriesType` property to change the ser {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto
@@ -273,7 +272,6 @@ When space constraints prevent you from displaying information using data labels {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto @@ -296,7 +294,6 @@ You can use legend for the chart by setting the [Visible](https://help.syncfusio {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveAuto From 6584be75f24e7aca06e1c74a7632894ab97e3589 Mon Sep 17 00:00:00 2001 From: Trisha Kumarasamy Date: Fri, 15 May 2026 11:26:51 +0530 Subject: [PATCH 4/5] Committing existing content on components web app section from Chip to DatePicker. --- blazor/chip/getting-started-with-web-app.md | 46 +++++++++++------- .../getting-started-with-web-app.md | 47 ++++++++++++------- .../getting-started-with-web-app.md | 42 +++++++++++------ .../combobox/getting-started-with-web-app.md | 42 +++++++++++------ .../getting-started-with-web-app.md | 46 +++++++++++------- .../getting-started-with-web-app.md | 46 +++++++++++------- .../data-form/getting-started-with-web-app.md | 47 ++++++++++++------- blazor/data/getting-started-with-web-app.md | 46 ++++++++++++------ .../datagrid/getting-started-with-web-app.md | 46 +++++++++++------- .../getting-started-with-web-app.md | 44 +++++++++++------ 10 files changed, 298 insertions(+), 154 deletions(-) diff --git a/blazor/chip/getting-started-with-web-app.md b/blazor/chip/getting-started-with-web-app.md index d1e413df09..fa000ea351 100644 --- a/blazor/chip/getting-started-with-web-app.md +++ b/blazor/chip/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Buttons -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Chip component -Add the Syncfusion® Blazor Chip component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Chip component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Buttons @@ -180,7 +180,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chip component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VXrTNCBaiGVbwHyL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chip Component](./images/blazor-chip-component.webp)" %} diff --git a/blazor/circular-gauge/getting-started-with-web-app.md b/blazor/circular-gauge/getting-started-with-web-app.md index ef31ce770a..6d67da5c44 100644 --- a/blazor/circular-gauge/getting-started-with-web-app.md +++ b/blazor/circular-gauge/getting-started-with-web-app.md @@ -89,19 +89,27 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.CircularGauge` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.CircularGauge -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.CircularGauge -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} + If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. N> 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. @@ -153,22 +161,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor CircularGauge component -Add the Syncfusion® Blazor CircularGauge component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor CircularGauge component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -182,7 +183,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor CircularGauge component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzXMhasGnmeXvK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge Component](./images/blazor-circulargauge-component.webp)" %} diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md index a36291b241..e98b273d25 100644 --- a/blazor/color-picker/getting-started-with-web-app.md +++ b/blazor/color-picker/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Inputs` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,28 +160,35 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor ColorPicker component -Add the Syncfusion® Blazor ColorPicker component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor ColorPicker component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ColorPicker component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.webp)" %} diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md index 137cbdddde..5290f176fc 100644 --- a/blazor/combobox/getting-started-with-web-app.md +++ b/blazor/combobox/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.DropDowns` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.DropDowns -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,28 +160,35 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor ComboBox component -Add the Syncfusion® Blazor ComboBox component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor ComboBox component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ComboBox component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBpNiBuBWhiNjHa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox Component](./images/blazor-combobox-component.webp)" %} diff --git a/blazor/context-menu/getting-started-with-web-app.md b/blazor/context-menu/getting-started-with-web-app.md index 6f8b852adb..15a49c9fdf 100644 --- a/blazor/context-menu/getting-started-with-web-app.md +++ b/blazor/context-menu/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor ContextMenu component -Add the Syncfusion® Blazor ContextMenu component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor ContextMenu component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Navigations
Right click/Touch hold to open the ContextMenu
@@ -195,7 +195,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ContextMenu component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftMLEBgCMeGpg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu Component](./images/blazor-contextmenu-component.png)" %} diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md index 91be60f0f1..2fe1504f55 100644 --- a/blazor/dashboard-layout/getting-started-with-web-app.md +++ b/blazor/dashboard-layout/getting-started-with-web-app.md @@ -85,15 +85,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Layouts` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Layouts -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Layouts -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -149,22 +156,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Dashboard Layout component -Add the Syncfusion® Blazor Dashboard Layout component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Layout component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Layouts @@ -177,7 +177,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dashboard Layout component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %} diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md index 81a9620c24..a6b34fe868 100644 --- a/blazor/data-form/getting-started-with-web-app.md +++ b/blazor/data-form/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console: +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.DataForm` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.DataForm -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.DataForm -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,22 +158,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DataForm component -Add the Syncfusion® Blazor DataForm component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor DataForm component inside the razor file. +* 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`). -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} +N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using System.ComponentModel.DataAnnotations If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataForm component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.webp)" %} diff --git a/blazor/data/getting-started-with-web-app.md b/blazor/data/getting-started-with-web-app.md index 88467ba73d..0d8cb5b377 100644 --- a/blazor/data/getting-started-with-web-app.md +++ b/blazor/data/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Data` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Data -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Data -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,19 +160,11 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DataManager component -Add the Syncfusion® Blazor DataManager component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor DataManager component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component acts as a data gateway for Syncfusion® Blazor components that support data binding. It enables interaction with local or remote data sources using queries. ### Binding to JSON data @@ -175,6 +174,7 @@ Local [JSON](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data @@ -213,6 +213,22 @@ Local [JSON](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager {% endhighlight %} {% endtabs %} +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + ### Binding to OData Remote data can be bound by setting the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property and specifying the appropriate adaptor using the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md index 008222d3c4..6eedf35b6f 100644 --- a/blazor/datagrid/getting-started-with-web-app.md +++ b/blazor/datagrid/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [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 in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +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 using one of the following methods. -Alternatively, run the following commands in the Package Manager Console: +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Grid` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DataGrid component -Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor DataGrid component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Grids @@ -198,7 +198,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Grid component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. ## Defining row data diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index 4c2bcf8d1e..d3ed326b52 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -85,15 +85,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Calendars` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -149,30 +156,37 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DatePicker component -Add the Syncfusion® Blazor DatePicker component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor DatePicker component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto +@using Syncfusion.Blazor.Calendars + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application -@using Syncfusion.Blazor.Calendars +**Visual Studio**: - +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. -{% endhighlight %} -{% endtabs %} +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DatePicker component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LXVptWruKtEfoXQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DatePicker Component](./images/blazor-datepicker-component.webp)" %} From fc2c73dd35c673f4eb66682c3469fd8c584a57a4 Mon Sep 17 00:00:00 2001 From: Trisha Kumarasamy Date: Fri, 15 May 2026 15:14:26 +0530 Subject: [PATCH 5/5] Committing existing content on components web app section from Date Range Picker to Linear gauge. --- .../getting-started-with-web-app.md | 45 ++++++++++++------ .../getting-started-with-web-app.md | 44 ++++++++++++------ .../diagram/getting-started-with-web-app.md | 44 ++++++++++++------ blazor/dialog/getting-started-with-web-app.md | 46 ++++++++++++------- .../getting-started-with-web-app.md | 45 ++++++++++++------ .../getting-started-with-web-app.md | 44 ++++++++++++------ .../getting-started-with-web-app.md | 46 ++++++++++++------- .../getting-started-with-web-app.md | 46 +++++++++++++------ .../getting-started-with-web-app.md | 42 +++++++++++------ .../getting-started-with-web-app.md | 46 ++++++++++++------- .../getting-started-with-web-app.md | 46 +++++++++++++------ .../getting-started-with-web-app.md | 46 ++++++++++++------- .../getting-started-with-web-app.md | 46 ++++++++++++------- .../getting-started-with-web-app.md | 42 +++++++++++------ blazor/kanban/getting-started-with-web-app.md | 46 ++++++++++++------- blazor/linear-gauge/getting-started-webapp.md | 45 ++++++++++++------ .../code-snippet/alert-dialog.razor | 1 + .../getting-started-webapp.md | 29 ++++++------ 18 files changed, 490 insertions(+), 259 deletions(-) diff --git a/blazor/daterangepicker/getting-started-with-web-app.md b/blazor/daterangepicker/getting-started-with-web-app.md index acd9c0d4af..46b828657e 100644 --- a/blazor/daterangepicker/getting-started-with-web-app.md +++ b/blazor/daterangepicker/getting-started-with-web-app.md @@ -85,15 +85,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Calendars` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -149,30 +156,38 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DateRangePicker component -Add the Syncfusion® Blazor DateRangePicker component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor DateRangePicker component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto +@using Syncfusion.Blazor.Calendars + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application -@using Syncfusion.Blazor.Calendars +**Visual Studio**: - +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. -{% endhighlight %} -{% endtabs %} +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. -- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateRangePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rDhTZCBOqWgwMmva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateRangePicker Component](./images/blazor-daterangepicker-component.webp)" %} diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md index 201bba83d0..8fe0be6c03 100644 --- a/blazor/datetime-picker/getting-started-with-web-app.md +++ b/blazor/datetime-picker/getting-started-with-web-app.md @@ -85,15 +85,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Calendars` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -149,30 +156,37 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DateTimePicker component -Add the Syncfusion® Blazor DateTimePicker component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor DateTimePicker component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto +@using Syncfusion.Blazor.Calendars + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application -@using Syncfusion.Blazor.Calendars +**Visual Studio**: - +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. -{% endhighlight %} -{% endtabs %} +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLzDsBOKWcNOSex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateTimePicker Component](./images/blazor-datetimepicker-component.webp)" %} diff --git a/blazor/diagram/getting-started-with-web-app.md b/blazor/diagram/getting-started-with-web-app.md index d68dcd5cfd..f187743356 100644 --- a/blazor/diagram/getting-started-with-web-app.md +++ b/blazor/diagram/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Diagram` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Diagram -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Diagram -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,30 +160,37 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Diagram Component -Add the Syncfusion® Blazor Diagram component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Diagram component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto +@using Syncfusion.Blazor.Diagram + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application -@using Syncfusion.Blazor.Diagram +**Visual Studio**: - +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. -{% endhighlight %} -{% endtabs %} +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Diagram component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. ## Basic Blazor Diagram Elements diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md index 6ed68c36cb..f292d6c69b 100644 --- a/blazor/dialog/getting-started-with-web-app.md +++ b/blazor/dialog/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Popups` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Popups -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,22 +158,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Dialog component -Add the Syncfusion® Blazor Dialog component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Dialog component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Popups @@ -178,7 +178,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.webp)" %} diff --git a/blazor/drop-down-menu/getting-started-with-web-app.md b/blazor/drop-down-menu/getting-started-with-web-app.md index 17c2ee4e3a..a7ff4e0960 100644 --- a/blazor/drop-down-menu/getting-started-with-web-app.md +++ b/blazor/drop-down-menu/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.SplitButtons` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.SplitButtons -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,22 +158,16 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Dropdown Menu component -Add the Syncfusion® Blazor Dropdown Menu component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Dropdown Menu component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.SplitButtons @@ -180,7 +181,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dropdown Menu component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownMenu Component](./images/blazor-dropdownmenu-component.webp)" %} diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md index 30186a7de3..dfd5b0dbf8 100644 --- a/blazor/dropdown-list/getting-started-with-web-app.md +++ b/blazor/dropdown-list/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.DropDowns` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.DropDowns -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,30 +158,37 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DropDown List component -Add the Syncfusion® Blazor DropDown List component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor DropDown component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto +@using Syncfusion.Blazor.DropDowns + + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application -@using Syncfusion.Blazor.DropDowns +**Visual Studio**: - +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. -{% endhighlight %} -{% endtabs %} +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.webp)" %} diff --git a/blazor/dropdown-tree/getting-started-with-web-app.md b/blazor/dropdown-tree/getting-started-with-web-app.md index 20430ab8d0..1800adf053 100644 --- a/blazor/dropdown-tree/getting-started-with-web-app.md +++ b/blazor/dropdown-tree/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Navigations` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,22 +158,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Dropdown Tree component -Add the Syncfusion® Blazor Dropdown Tree component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Dropdown Tree component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Navigations @@ -195,7 +195,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dropdown Tree component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfNiVkAGwJAcqZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Tree Component](./images/blazor-dropdowntree-component.png)" %} diff --git a/blazor/file-manager/getting-started-with-web-app.md b/blazor/file-manager/getting-started-with-web-app.md index 7a28cd8f25..495ed6d12d 100644 --- a/blazor/file-manager/getting-started-with-web-app.md +++ b/blazor/file-manager/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.FileManager` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.FileManager -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.FileManager -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,22 +158,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor File Manager component -Add the Syncfusion® Blazor File Manager component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor File Manager component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.FileManager @@ -180,6 +180,22 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + ## Create Models Create a new folder named `Models` in the server project. Add the necessary model files to this folder for handling file operations. Download the `PhysicalFileProvider.cs` and `Base` folder from this [repository](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/tree/master/Models) and place them in the Models folder. diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md index 74c87fc1a7..79456840ce 100644 --- a/blazor/file-upload/getting-started-with-web-app.md +++ b/blazor/file-upload/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Inputs` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -149,28 +156,35 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor File Upload component -Add the Syncfusion® Blazor File Upload component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor DataGrid component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/floating-action-button/getting-started-with-web-app.md b/blazor/floating-action-button/getting-started-with-web-app.md index 5272f72fe4..52d346970e 100644 --- a/blazor/floating-action-button/getting-started-with-web-app.md +++ b/blazor/floating-action-button/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Buttons -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,22 +158,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Floating Action Button component -Add the Syncfusion® Blazor Floating Action Button component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Floating Action Button component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Buttons
@@ -176,7 +176,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Floating Action Button component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLTtsVaAldOGCVR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Floating Action Button Component](./images/blazor-fab-component.webp)" %} diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md index f0704457a9..9d8605c269 100644 --- a/blazor/gantt-chart/getting-started-with-web-app.md +++ b/blazor/gantt-chart/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Gantt` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Gantt -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Gantt Chart component -Add the Syncfusion® Blazor Gantt Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Gantt Chart component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Gantt @@ -214,6 +214,22 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. + {% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Binding Gantt Chart with data and mapping task fields diff --git a/blazor/heatmap-chart/getting-started-with-web-app.md b/blazor/heatmap-chart/getting-started-with-web-app.md index fa8a2fd0e6..82e3bc84c1 100644 --- a/blazor/heatmap-chart/getting-started-with-web-app.md +++ b/blazor/heatmap-chart/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.HeatMap` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.HeatMap -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.HeatMap -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,22 +158,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor HeatMap Chart component -Add the Syncfusion® Blazor HeatMap Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor HeatMap Chart component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -196,7 +196,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor HeatMap Chart component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTDWBuJXfSXofp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor HeatMap Chart](images/blazor-heatmap-chart.webp)" %} diff --git a/blazor/in-place-editor/getting-started-with-web-app.md b/blazor/in-place-editor/getting-started-with-web-app.md index 3b90924c6a..0c581740f8 100644 --- a/blazor/in-place-editor/getting-started-with-web-app.md +++ b/blazor/in-place-editor/getting-started-with-web-app.md @@ -91,15 +91,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.InPlaceEditor` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.InPlaceEditor -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.InPlaceEditor -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -155,22 +162,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor In-place Editor component -Add the Syncfusion® Blazor In-place Editor component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor In-place Editor component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.InPlaceEditor @@ -200,7 +200,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem N> Specify the editor [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Type) when using non-default editors (for example, `DropDownList`, `Date`, or `AutoComplete`). Configure two-way binding between the In-place Editor and its editor component to synchronize values. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor In-place Editor component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.webp)" %} diff --git a/blazor/input-mask/getting-started-with-web-app.md b/blazor/input-mask/getting-started-with-web-app.md index 698571265b..3e1f40d690 100644 --- a/blazor/input-mask/getting-started-with-web-app.md +++ b/blazor/input-mask/getting-started-with-web-app.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Inputs` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -151,28 +158,35 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Input Mask component -Add the Syncfusion® Blazor Input Mask component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Input Mask component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto + {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +### Run the application - +**Visual Studio**: -{% endhighlight %} -{% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Input Mask component in the default web browser. + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hNrzXsLuJBRJNWJf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MaskedTextBox Component](./images/blazor-maskedtextbox-component.webp)" %} diff --git a/blazor/kanban/getting-started-with-web-app.md b/blazor/kanban/getting-started-with-web-app.md index 1530f9a4f7..f76be30e31 100644 --- a/blazor/kanban/getting-started-with-web-app.md +++ b/blazor/kanban/getting-started-with-web-app.md @@ -89,15 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Kanban` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Kanban -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -153,22 +160,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Kanban component -Add the Syncfusion Blazor Kanban component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor Kanban component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Kanban @@ -193,7 +193,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Kanban component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBpZMLOpgSSDQVm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban Component](./images/blazor-kanban-component.webp)" %} diff --git a/blazor/linear-gauge/getting-started-webapp.md b/blazor/linear-gauge/getting-started-webapp.md index ced20862b4..865931a588 100644 --- a/blazor/linear-gauge/getting-started-webapp.md +++ b/blazor/linear-gauge/getting-started-webapp.md @@ -89,14 +89,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following command in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.LinearGauge` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.LinearGauge -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.LinearGauge -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -150,22 +158,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor LinearGauge component -Add the Syncfusion® Blazor LinearGauge component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Syncfusion Blazor LinearGauge component inside the razor file. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @@ -179,7 +180,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor LinearGauge component in the default web browser. +### Run the application + +**Visual Studio**: + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DataGrid component will render in your default web browser. + +**Visual Studio Code or .NET CLI**: + +1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. +2. Run the following command: + + ``` + dotnet run + ``` +3. The application will start and display in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzZCLkTTyPJnAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge Component](images/blazor-linear-gauge-component.webp)" %} diff --git a/blazor/predefined-dialogs/code-snippet/alert-dialog.razor b/blazor/predefined-dialogs/code-snippet/alert-dialog.razor index 10edf29071..7a66d94ff1 100644 --- a/blazor/predefined-dialogs/code-snippet/alert-dialog.razor +++ b/blazor/predefined-dialogs/code-snippet/alert-dialog.razor @@ -1,3 +1,4 @@ +@rendermode InteractiveAuto @using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Buttons @inject SfDialogService DialogService diff --git a/blazor/predefined-dialogs/getting-started-webapp.md b/blazor/predefined-dialogs/getting-started-webapp.md index 927b1b4c87..7deb6c39b9 100644 --- a/blazor/predefined-dialogs/getting-started-webapp.md +++ b/blazor/predefined-dialogs/getting-started-webapp.md @@ -87,15 +87,22 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install Syncfusion® Blazor packages -Install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +Install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +**Visual Studio (NuGet Package Manager)**: + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.Popups` and `Syncfusion.Blazor.Themes`) and install it. + +**Visual Studio Code or .NET CLI**: + +Open the terminal or command prompt and run the following commands: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight C# tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Popups -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} @@ -170,19 +177,11 @@ After adding `SfDialogService` and `SfDialogProvider`, open predefined dialogs f ### Show alert dialog -An alert dialog box is used to display errors, warnings, or informational messages that require user acknowledgment. This is achieved using the [DialogService.AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. The alert dialog displays an `OK` button. When the user selects `OK`, the alert dialog closes. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +* An alert dialog box is used to display errors, warnings, or informational messages that require user acknowledgment. This is achieved using the [DialogService.AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. The alert dialog displays an `OK` button. When the user selects `OK`, the alert dialog closes. +* 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - In the following example, an alert dialog is displayed upon clicking a Syncfusion® Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) component. {% tabs %}