From 0385b9e922a54b34050a4d62e95a5c5e57bbe8f0 Mon Sep 17 00:00:00 2001 From: Trisha Kumarasamy Date: Thu, 30 Jul 2026 17:58:33 +0530 Subject: [PATCH] Committing Blazor DataGrid, Gantt Chart, Diagram, Kanban getting started content along with AI review. --- .../blazor/getting-started-with-maui-app.md | 163 +++++++++---- .../blazor/getting-started-with-wasm-app.md | 187 +++++++++------ .../blazor/getting-started-with-web-app.md | 215 +++++++++-------- diagram-sdk/blazor/getting-started.md | 202 ++++++++-------- .../getting-started-with-maui-app.md | 188 ++++++++++----- .../getting-started-with-server-app.md | 214 +++++++++-------- .../getting-started-with-web-app.md | 224 +++++++++--------- .../blazor/gantt-chart/getting-started.md | 198 +++++++++------- .../kanban/getting-started-with-server-app.md | 202 ++++++++-------- .../kanban/getting-started-with-web-app.md | 218 ++++++++--------- gantt-sdk/blazor/kanban/getting-started.md | 202 +++++++++------- .../getting-started-with-maui-app.md | 154 +++++++++--- .../getting-started-with-server-app.md | 178 +++++++++----- .../data-grid/getting-started-with-web-app.md | 184 ++++++++------ grid-sdk/blazor/data-grid/getting-started.md | 156 ++++++++---- 15 files changed, 1709 insertions(+), 1176 deletions(-) diff --git a/diagram-sdk/blazor/getting-started-with-maui-app.md b/diagram-sdk/blazor/getting-started-with-maui-app.md index 196125816f..4f46b41062 100644 --- a/diagram-sdk/blazor/getting-started-with-maui-app.md +++ b/diagram-sdk/blazor/getting-started-with-maui-app.md @@ -1,58 +1,77 @@ --- layout: post -title: Getting Started with Diagram in Blazor MAUI App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Diagram Component in Blazor MAUI App. +title: Getting Started with Blazor Diagram in Blazor MAUI App | Syncfusion® +description: Check out and learn about the documentation for getting started with Blazor Diagram Component in Blazor MAUI App. platform: diagram-sdk -control: Diagram Component +control: Diagram documentation: ug --- # Getting Started with the Diagram Component in the Blazor MAUI App -This guide walks through the step-by-step process of integrating the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component in a Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section explains the step-by-step process of integrating the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview). + +## Create a new Blazor MAUI App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Syncfusion® Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Run the following command to create a new Blazor MAUI App. -## Create a new Blazor MAUI App in Visual Studio +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet new maui-blazor -o MauiBlazorApp +cd MauiBlazorApp + +{% endhighlight %} +{% endtabs %} -Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Alternatively, create a **Blazor MAUI App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. {% endtabcontent %} -{% tabcontent Visual Studio Code %} +{% tabcontent .NET CLI %} -## Prerequisites +Run the following command to create a new Blazor MAUI App. -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -## Create a new Blazor MAUI App in Visual Studio Code +dotnet new maui-blazor -o MauiBlazorApp +cd MauiBlazorApp -Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +{% endhighlight %} +{% endtabs %} {% endtabcontent %} {% endtabcontents %} -## Install required Blazor packages +## Install the required Blazor packages + +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. 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. {% tabcontents %} {% tabcontent Visual Studio %} -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 → Select the package -> Install*). +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 them. -Alternatively, run the following commands in the Package Manager Console(*Tools → NuGet Package Manager → Package Manager Console*) to achieve the same. +Alternatively, you can install the same packages using the Package Manager Console with the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Syncfusion.Blazor.Diagram -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} @@ -64,16 +83,39 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% tabcontent Visual Studio Code %} -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 C# package management(*Right click the ".csproj" file, -> C# package management -> Add nuget package -> Select nuget package and version*) +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Diagram -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} {% endtabcontent %} -{% endtabcontents %} -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. +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Syncfusion.Blazor.Diagram -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces. +After the packages are installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -84,16 +126,15 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **~/MauiProgram.cs** file. +Open the **MauiProgram.cs** file in Blazor MAUI App and register the Blazor service. {% tabs %} -{% highlight c# tabtitle="~/MauiProgram.cs" %} +{% highlight c# tabtitle="MauiProgram.cs" %} .... using Syncfusion.Blazor; - .... public static class MauiProgram @@ -111,26 +152,22 @@ public static class MauiProgram ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. - -```html +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. - - ... - - - - .... - - +{% tabs %} +{% highlight html tabtitle="index.html" %} -``` +.... + +.... + -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Diagram component -Add the Diagram component in the **~/Pages/Home.razor** file. +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -263,9 +300,45 @@ Add the Diagram component in the **~/Pages/Home.razor** file. N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). -## How to run the sample on windows +## Run the application on Windows + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ![Run Windows machine](images/blazor-diagram-maui.webp) @@ -273,7 +346,7 @@ When the application is successfully launched, the Diagram component will seamle ![Run Windows machine](images/blazor-diagram-maui-page.webp) -## How to run the sample on Android +## Run the application on Android To run the Blazor Diagram component in a Blazor Android MAUI application using the Android emulator, follow these steps: @@ -281,10 +354,10 @@ To run the Blazor Diagram component in a Blazor Android MAUI application using t Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. -N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). ![Blazor Diagram Component](images/blazor-diagram-maui-andoid-page.webp ) ## See also -* [How to Create a Diagram Builder in MAUI platform](https://support.syncfusion.com/kb/article/11346/how-to-create-diagram-builder-in-maui-platform) +1. [How to Create a Diagram Builder in MAUI platform](https://support.syncfusion.com/kb/article/11346/how-to-create-diagram-builder-in-maui-platform) diff --git a/diagram-sdk/blazor/getting-started-with-wasm-app.md b/diagram-sdk/blazor/getting-started-with-wasm-app.md index e17ca2fb2c..b21e313885 100644 --- a/diagram-sdk/blazor/getting-started-with-wasm-app.md +++ b/diagram-sdk/blazor/getting-started-with-wasm-app.md @@ -1,64 +1,51 @@ --- layout: post -title: Getting Started with Diagram in Blazor WASM App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Diagram Component in Blazor WASM App. +title: Getting Started with Blazor Diagram in Blazor WASM App | Syncfusion® +description: Check out and learn about the documentation for getting started with Blazor Diagram Component in Blazor WASM App. platform: diagram-sdk -control: Diagram Component +control: Diagram documentation: ug --- # Getting Started with Diagram Component in the Blazor WASM App -This section explains the step-by-step process for integrating the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component into a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). +This section briefly explains how to include the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview). + +## Create a new Blazor WebAssembly (Standalone) App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio - -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). {% endtabcontent %} {% tabcontent Visual Studio Code %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio Code - -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WebAssembly Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. - -{% endtabcontent %} - -{% tabcontent .NET CLI %} - -## Prerequisites - -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet --version +dotnet new blazorwasm -o BlazorApp +cd BlazorApp {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor WebAssembly App. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp @@ -66,24 +53,25 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates a new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. - {% endtabcontent %} {% endtabcontents %} -## Install required Blazor packages +## Install the required Blazor packages + +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. 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. {% tabcontents %} {% tabcontent Visual Studio %} -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 → Select the package -> Install*). +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 them. -Alternatively, run the following commands in the Package Manager Console(*Tools → NuGet Package Manager → Package Manager Console*) to achieve the same. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Syncfusion.Blazor.Diagram -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} @@ -95,78 +83,86 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% tabcontent Visual Studio Code %} -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 C# package management(*Right click the ".csproj" file, -> C# package management -> Add nuget package -> Select nuget package and version*) +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Diagram -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} {% endtabcontent %} {% tabcontent .NET CLI %} -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 .NET CLI command. +Open the command prompt and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet add package Syncfusion.Blazor.Diagram --version {{ site.releaseversion }} -dotnet add 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 %} {% endtabcontent %} -{% endtabcontents %} -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. +{% endtabcontents %} ## Add import namespaces After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="_Imports.razor" %} -@using Syncfusion.Blazor; -@using Syncfusion.Blazor.Diagram; +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Diagram {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... -var builder = WebApplication.CreateBuilder(args); builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~wwwroot/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **~wwwroot/index.html** file. + +{% tabs %} +{% highlight html tabtitle="index.html" %} + + + +{% endhighlight %} +{% endtabs %} -```html - - ... - - - - .... - - -``` +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **~wwwroot/index.html** file to enable Diagram functionality. -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +{% tabs %} +{% highlight html tabtitle="index.html" %} + + + +{% endhighlight %} +{% endtabs %} ## Add Blazor Diagram component -Add the DiagramComponent to create an empty diagram. +Add the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component in the **~/Pages/*.razor** (for example, **Home.razor**) file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -176,6 +172,46 @@ Add the DiagramComponent to create an empty diagram. {% endhighlight %} {% endtabs %} +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + ## Create your first Diagram with nodes and connectors This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors. @@ -189,7 +225,8 @@ The following example creates a flowchart with four nodes: **Start**, **Process* -@code { +@code +{ DiagramObjectCollection nodes = new DiagramObjectCollection(); DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() @@ -273,6 +310,8 @@ The following example creates a flowchart with four nodes: **Start**, **Process* {% endhighlight %} {% endtabs %} +![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Wasm/Pages/GettingStarted/GettingStarted.razor) In this example: @@ -283,13 +322,3 @@ In this example: * [`SourceID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceID) and [`TargetID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetID) connect one node to another. * [`NodeCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) applies common width, height, fill color, and stroke color to all nodes. * [`ConnectorCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) applies common connector settings, such as orthogonal routing. - -## Run the application - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application in Visual Studio. -* Run the application using `dotnet run` command in Command prompt. -* This will render the Blazor Diagram component in the default web browser. - -The output will appear as follows: - -![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) diff --git a/diagram-sdk/blazor/getting-started-with-web-app.md b/diagram-sdk/blazor/getting-started-with-web-app.md index dd0acf77cf..6edb7d6183 100644 --- a/diagram-sdk/blazor/getting-started-with-web-app.md +++ b/diagram-sdk/blazor/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor Diagram in Web App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Diagram Component in Blazor Web App. +description: Check out and learn about the documentation for getting started with Blazor Diagram Component in Blazor Web App. platform: diagram-sdk component: Diagram documentation: ug @@ -11,92 +11,101 @@ documentation: ug This section briefly explains how to include the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor Web App in Visual Studio - -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. - -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 project. -
If you use the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), a sample application can be generated automatically. +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). {% endtabcontent %} {% tabcontent Visual Studio Code %} -## Prerequisites +Run the following command to create a new Blazor Web App. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -## Create a new Blazor Web App in Visual Studio Code +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% endhighlight %} +{% endtabs %} -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 project. -
If you use the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), a sample application can be generated automatically. +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. {% endtabcontent %} {% tabcontent .NET CLI %} -## Prerequisites - -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet --version +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +{% endtabcontents %} + +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install the required Blazor packages -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +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. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +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 them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp +Install-Package Syncfusion.Blazor.Diagram -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. - -N> See the [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) and [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) topics for more details. - {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -## Install required Blazor packages +Open the terminal and run the following commands. -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. +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -**Visual Studio (NuGet Package Manager)**: +dotnet add package Syncfusion.Blazor.Diagram -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -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. +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -**Visual Studio Code or .NET CLI**: +{% tabcontent .NET CLI %} -Open the terminal or command prompt and run the following commands: +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet add package Syncfusion.Blazor.Diagram -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} @@ -104,63 +113,62 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -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. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces. +After the packages are installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="_Imports.razor" %} -@using Syncfusion.Blazor; -@using Syncfusion.Blazor.Diagram; +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Diagram {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file. +Open the **Program.cs** file in Blazor Web App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Program.cs" %} +{% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... -var builder = WebApplication.CreateBuilder(args); builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. - ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **App.razor** file. + +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -```html - - ... - - - - .... - - -``` + -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} + +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **App.razor** file to enable Diagram functionality. + +{% tabs %} +{% highlight razor tabtitle="App.razor" %} + + + +{% endhighlight %} +{% endtabs %} ## Add Blazor Diagram Component -* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the 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`). +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component inside the razor file. -If your application uses `Per page/component` interactivity, add the render mode declaration at the top of **Pages/Home.razor**: +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -173,21 +181,49 @@ If your application uses `Per page/component` interactivity, add the render mode {% endhighlight %} {% endtabs %} -### Run the application +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -**Visual Studio**: +{% tabcontent .NET CLI %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Diagram component will render in your default web browser. +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. -**Visual Studio Code or .NET CLI**: +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% 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: +{% endtabcontent %} - ``` - dotnet run - ``` -3. The application will start and display in your default web browser. +{% endtabcontents %} ## Create your first Diagram with nodes and connectors @@ -202,7 +238,8 @@ The following example creates a flowchart with four nodes: **Start**, **Process* -@code { +@code +{ DiagramObjectCollection nodes = new DiagramObjectCollection(); DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() @@ -286,6 +323,8 @@ The following example creates a flowchart with four nodes: **Start**, **Process* {% endhighlight %} {% endtabs %} +![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/GettingStarted/GettingStarted.razor) In this example: @@ -296,13 +335,3 @@ In this example: * [`SourceID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceID) and [`TargetID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetID) connect one node to another. * [`NodeCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) applies common width, height, fill color, and stroke color to all nodes. * [`ConnectorCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) applies common connector settings, such as orthogonal routing. - -## Run the application - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application in Visual Studio. -* Run the application using `dotnet run` command in Command prompt. -* This will render the Blazor Diagram component in the default web browser. - -The output will appear as follows: - -![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) diff --git a/diagram-sdk/blazor/getting-started.md b/diagram-sdk/blazor/getting-started.md index 4b01bea3f6..b8705fb672 100644 --- a/diagram-sdk/blazor/getting-started.md +++ b/diagram-sdk/blazor/getting-started.md @@ -1,97 +1,79 @@ --- layout: post -title: Getting Started with Diagram in Blazor Server App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Diagram Component in Blazor Server App. +title: Getting Started with Blazor Diagram in Blazor Server App | Syncfusion® +description: Check out and learn about the documentation for getting started with Blazor Diagram Component in Blazor Server App. platform: diagram-sdk -control: Diagram Component +control: Diagram documentation: ug --- # Getting Started with Diagram Component in the Blazor Server App. -This section explains the step-by-step process of integrating the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component into your Blazor Server app using Visual Studio, Visual Studio Code and .NET CLI. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). +This section briefly explains how to include the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component in your Blazor Server app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio - -Create a **Blazor Server App** using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. - -N> Configure the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) is **Server** and Choose the appropriate [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a project. -
If you use the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), a sample application can be generated automatically. +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). {% endtabcontent %} {% tabcontent Visual Studio Code %} -## Prerequisites +Run the following command to create a new Blazor Server App. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -## Create a new Blazor App in Visual Studio Code +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +{% endhighlight %} +{% endtabs %} -N> Configure the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) is **Server** and Choose the appropriate [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a project. -
If you use the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), a sample application can be generated automatically. +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. {% endtabcontent %} {% tabcontent .NET CLI %} -## Prerequisites - -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Run the following command to create a new Blazor Server App. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet --version - -{% endhighlight %} -{% endtabs %} - -## Create a Blazor Server App using .NET CLI - -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. - -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} - -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates a new Blazor application and places it in a new directory called `BlazorApp` inside your current location. - -N> See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create), [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) and [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) topics for more details. - {% endtabcontent %} {% endtabcontents %} -## Install required Blazor packages +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 Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install the required Blazor packages + +Install the [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. 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. {% tabcontents %} {% tabcontent Visual Studio %} -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 → Select the package -> Install*). +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 them. -Alternatively, run the following commands in the Package Manager Console(*Tools → NuGet Package Manager → Package Manager Console*) to achieve the same. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Syncfusion.Blazor.Diagram -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} @@ -103,103 +85,139 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% tabcontent Visual Studio Code %} -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 C# package management(*Right click the ".csproj" file, -> C# package management -> Add nuget package -> Select nuget package and version*) +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Diagram -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} {% endtabcontent %} {% tabcontent .NET CLI %} -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 .NET CLI command. +Open the command prompt and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet add package Syncfusion.Blazor.Diagram --version {{ site.releaseversion }} -dotnet add 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 %} {% endtabcontent %} -{% endtabcontents %} -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. +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces. +After the packages are installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="_Imports.razor" %} -@using Syncfusion.Blazor; -@using Syncfusion.Blazor.Diagram; +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Diagram {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file. +Open the **Program.cs** file in Blazor Server App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... -var builder = WebApplication.CreateBuilder(args); builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **App.razor** file. -```html - - ... - - - - .... - - -``` +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. + -## Configure Render Mode +{% endhighlight %} +{% endtabs %} -If your create application uses `Per page/component` interactivity, add this at the top of **Pages/Home.razor**: +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **App.razor** file to enable Diagram functionality. {% tabs %} -{% highlight razor tabtitle="Home.razor" %} +{% highlight razor tabtitle="App.razor" %} -@* desired render mode define here *@ -@rendermode InteractiveServer + {% endhighlight %} {% endtabs %} -N> If the render mode is set to **None**, the diagram will not render. -
If the `Interactivity Location` is set to **Global**, this step is not required. - ## Add Blazor Diagram component -Add the DiagramComponent to create an empty diagram. +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component inside the razor file. + +N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveServer + {% endhighlight %} {% endtabs %} +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Diagram](https://www.syncfusion.com/diagram-sdk/blazor-diagram) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + ## Create your first Diagram with nodes and connectors This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors. @@ -213,7 +231,8 @@ The following example creates a flowchart with four nodes: **Start**, **Process* -@code { +@code +{ DiagramObjectCollection nodes = new DiagramObjectCollection(); DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() @@ -297,6 +316,8 @@ The following example creates a flowchart with four nodes: **Start**, **Process* {% endhighlight %} {% endtabs %} +![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/GettingStarted/GettingStarted.razor) In this example: @@ -308,12 +329,3 @@ In this example: * [`NodeCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) applies common width, height, fill color, and stroke color to all nodes. * [`ConnectorCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) applies common connector settings, such as orthogonal routing. -## Run the application - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application in Visual Studio. -* Run the application using `dotnet run` command in Command prompt. -* This will render the Blazor Diagram component in the default web browser. - -The output will appear as follows: - -![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) diff --git a/gantt-sdk/blazor/gantt-chart/getting-started-with-maui-app.md b/gantt-sdk/blazor/gantt-chart/getting-started-with-maui-app.md index 85ed39f662..8e3c390fc0 100644 --- a/gantt-sdk/blazor/gantt-chart/getting-started-with-maui-app.md +++ b/gantt-sdk/blazor/gantt-chart/getting-started-with-maui-app.md @@ -1,83 +1,110 @@ --- layout: post -title: Getting Started with GanttChart | Blazor MAUI App | Syncfusion -description: Checkout and learn about the documentation for getting started with Blazor GanttChart Component in Blazor MAUI App. +title: Getting Started with Gantt Chart in Blazor MAUI App | Syncfusion +description: Check out and learn about the documentation for getting started with Blazor Gantt Chart Component in Blazor MAUI App. platform: Blazor -control: GanttChart +control: Gantt Chart documentation: ug --- -# Getting Started with Blazor GanttChart +# Getting Started with Blazor Gantt Chart Component in Blazor MAUI App -This section explains you through the step-by-step process of integrating the [Syncfusion® Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component into your Blazor MAUI application using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section briefly explains how to include the [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component in your Blazor MAUI application using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview). + +## Create a new Blazor MAUI App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +{% endtabcontent %} -## Create a new Blazor MAUI app +{% tabcontent Visual Studio Code %} -Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Run the following command to create a new Blazor MAUI App. -## Install Syncfusion® Blazor packages +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -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. +dotnet new maui-blazor -o MauiBlazorApp +cd MauiBlazorApp -1. Go to **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** -2. Search for `Syncfusion.Blazor.Gantt` and install the latest version -3. Search for `Syncfusion.Blazor.Themes` and install the latest version +{% endhighlight %} +{% endtabs %} -Alternatively, run the following commands in the Package Manager Console: +Alternatively, create a **Blazor MAUI App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Run the following command to create a new Blazor MAUI App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new maui-blazor -o MauiBlazorApp +cd MauiBlazorApp {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% tabcontent Visual Studio Code %} +{% endtabcontents %} -## Prerequisites +## Install the required Blazor packages -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +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. 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. -## Create a new Blazor MAUI app +{% tabcontents %} -Create a Blazor MAUI app using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +{% tabcontent Visual Studio %} + +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 them. -Alternatively, create a MAUI application by using the following command in the integrated terminal (Ctrl+`): +Alternatively, you can install the same packages using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle="Blazor MAUI App" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new maui-blazor -o MauiBlazorApp -cd MauiBlazorApp +Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Gantt -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor packages +{% endtabcontent %} -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 integrated terminal. +{% tabcontent .NET CLI %} -Run the following commands in the integrated terminal (Ctrl+`): +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="VS Code Terminal" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }} -dotnet add 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 %} @@ -86,18 +113,28 @@ dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} {% endtabcontents %} -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. +## Add import namespaces + +After the packages are installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespaces. + +{% tabs %} +{% highlight razor tabtitle="~/_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Gantt + +{% endhighlight %} +{% endtabs %} -## Register Syncfusion® Blazor service +## Register the Blazor service -Register the Syncfusion® Blazor service in the **~/MauiProgram.cs** file. +Open the **MauiProgram.cs** file in Blazor MAUI App and register the Blazor service. {% tabs %} -{% highlight c# tabtitle="~/MauiProgram.cs" %} +{% highlight c# tabtitle="MauiProgram.cs" %} .... using Syncfusion.Blazor; - .... public static class MauiProgram @@ -115,23 +152,22 @@ public static class MauiProgram ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. - -- Add the **stylesheet reference inside the `` tag** of the `index.html` file. -- Add the **script reference inside the `` tag** of the `index.html` file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} +.... +.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Syncfusion® Blazor Gantt Chart component +## Add Blazor Gantt Chart component -Add the Syncfusion® Blazor Gantt Chart component in the **~/Pages/Home.razor** file. +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -143,7 +179,8 @@ Add the Syncfusion® Blazor Gantt Chart comp -@code { +@code +{ public List? TaskCollection { get; set; } protected override void OnInitialized() { @@ -183,20 +220,49 @@ Add the Syncfusion® Blazor Gantt Chart comp {% previewsample "https://blazorplayground.syncfusion.com/embed/BZBRZcLXBwzqJvDV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -### Run the application +## Run the application on Windows + +{% tabcontents %} -**Visual Studio**: +{% tabcontent Visual Studio %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the .NET MAUI Blazor Hybrid app. -The application will open as a native app. +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component will render in your default web browser. -### How to run the sample on Windows +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ![Blazor Gantt Chart Component](images/blazor-gantt-maui-app.webp) -### How to run the sample on Android +## Run the application on Android Run the sample in Android Emulator mode, and it will launch the Blazor MAUI application on the configured Android virtual device. @@ -206,10 +272,10 @@ To run the Blazor Gantt Chart in a Blazor Android MAUI application using the And Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. -N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +1. [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +2. [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/gantt-sdk/blazor/gantt-chart/getting-started-with-server-app.md b/gantt-sdk/blazor/gantt-chart/getting-started-with-server-app.md index 70561c2807..777cdef47c 100644 --- a/gantt-sdk/blazor/gantt-chart/getting-started-with-server-app.md +++ b/gantt-sdk/blazor/gantt-chart/getting-started-with-server-app.md @@ -1,127 +1,112 @@ --- layout: post -title: Getting Started with Blazor GanttChart Component | Syncfusion -description: Checkout and learn about getting started with Blazor GanttChart component in Blazor Server Application. +title: Getting Started with Blazor Gantt Chart in Server App | Syncfusion +description: Check out and learn about getting started with Blazor Gantt Chart component in Blazor Server Application. platform: Blazor -control: GanttChart +control: Gantt Chart documentation: ug --- # Getting started with Blazor Gantt Chart in Blazor server app -This section briefly explains about how to include [Syncfusion® Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor server app using Visual Studio and Visual Studio Code. +This section briefly explains about how to include the [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component in your Blazor server app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. - -## Install Syncfusion® Blazor packages - -Once the project is created, 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. +{% endtabcontent %} -1. Go to **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** -2. Search for `Syncfusion.Blazor.Gantt` and install the latest version -3. Search for `Syncfusion.Blazor.Themes` and install the latest version +{% tabcontent Visual Studio Code %} -Alternatively, run the following commands in the Package Manager Console: +Run the following command to create a new Blazor Server App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp {% endhighlight %} {% endtabs %} -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -## Prerequisites +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Server App. {% tabs %} -{% highlight c# tabtitle="Blazor Server App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor packages +{% endtabcontent %} -Then, 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 integrated terminal. +{% endtabcontents %} -Run the following commands in the integrated terminal (Ctrl+`): +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 Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -{% tabs %} -{% highlight C# tabtitle="VS Code Terminal" %} +## Install the required Blazor packages -dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} +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. 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. -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} +{% tabcontents %} -{% tabcontent .NET CLI %} +{% tabcontent Visual Studio %} -## Prerequisites +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 them. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor Server App +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +dotnet add package Syncfusion.Blazor.Gantt -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor packages +{% endtabcontent %} -Then, 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 using the .NET CLI. +{% tabcontent .NET CLI %} -Run the following commands in your command prompt, terminal, or command shell: +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }} -dotnet add 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 %} @@ -130,61 +115,63 @@ dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} {% endtabcontents %} -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 Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +## Add import namespaces + +After the packages are installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespaces. -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. +{% tabs %} +{% highlight C# tabtitle="_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Gantt -## Register Syncfusion® Blazor service +{% endhighlight %} +{% endtabs %} -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Server App. +## Register the Blazor service + +Open the **Program.cs** file in Blazor Server App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. - -- Add the **stylesheet reference inside the `` tag** of the `App.razor` file. -- Add the **script reference inside the `` tag** of the `App.razor` file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **App.razor** file. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -.... - - -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. -## Add Syncfusion® Blazor Gantt Chart component - -Add the Syncfusion® Blazor Gantt Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +{% endhighlight %} +{% endtabs %} -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **App.razor** file to enable Gantt Chart functionality. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="App.razor" %} -@* Define the desired render mode here *@ -@rendermode InteractiveServer + {% endhighlight %} {% endtabs %} +## Add Blazor Gantt Chart component + +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component inside the razor file. + +N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. + {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveServer @using Syncfusion.Blazor.Gantt @@ -192,7 +179,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati -@code { +@code +{ public List? TaskCollection { get; set; } protected override void OnInitialized() { @@ -232,22 +220,48 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBxDcVZJXhRLlgm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -### Run the application +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -**Visual Studio**: +Open the terminal and run the following command. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser. +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run -**Visual Studio Code or .NET CLI**: +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} -1. Open a terminal in the project directory and run the following command: - ``` - dotnet run - ``` -2. The application will start and display in your default web browser. +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +1. [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +2. [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/gantt-sdk/blazor/gantt-chart/getting-started-with-web-app.md b/gantt-sdk/blazor/gantt-chart/getting-started-with-web-app.md index 3e1bcdd7e5..c5fa6bc6cf 100644 --- a/gantt-sdk/blazor/gantt-chart/getting-started-with-web-app.md +++ b/gantt-sdk/blazor/gantt-chart/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Syncfusion Blazor Gantt Component in Web App -description: Checkout and learn about the documentation for getting started with Blazor Gantt Chart Component in Blazor Web App. +title: Getting Started with Blazor Gantt Chart in Web App | Syncfusion +description: Check out and learn about the documentation for getting started with Blazor Gantt Chart Component in Blazor Web App. platform: Blazor component: Gantt Chart documentation: ug @@ -9,185 +9,166 @@ documentation: ug # Getting Started with Blazor Gantt Chart Component in Blazor Web App -This section briefly explains about how to include [Syncfusion® Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include the [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor Web App +{% tabcontent Visual Studio Code %} -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Run the following command to create a new Blazor Web App. -## Install Syncfusion® Blazor packages +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -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. +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client -**Visual Studio (NuGet Package Manager)**: +{% endhighlight %} +{% endtabs %} -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. +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -**Visual Studio Code or .NET CLI**: +{% endtabcontent %} -Open the terminal or command prompt and run the following commands: +{% tabcontent .NET CLI %} + +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight C# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet add package Syncfusion.Blazor.Gantt -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. - {% endtabcontent %} -{% tabcontent Visual Studio Code %} +{% endtabcontents %} -## Prerequisites +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). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +## Install the required Blazor packages -## Create a new Blazor Web App +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. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% tabcontents %} + +{% tabcontent Visual Studio %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +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 them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor packages +{% endtabcontent %} -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 integrated terminal. +{% tabcontent Visual Studio Code %} -Run the following commands in the integrated terminal (Ctrl+`): +Open the terminal and run the following commands. {% tabs %} -{% highlight C# tabtitle="VS Code Terminal" %} +{% highlight razor tabtitle="Terminal" %} -dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }} -dotnet add 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 %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, run these commands in the client project directory. - {% endtabcontent %} {% tabcontent .NET CLI %} -## Prerequisites - -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Open the command prompt and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet --version +dotnet add package Syncfusion.Blazor.Gantt -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor Web App +{% endtabcontent %} + +{% endtabcontents %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +## Add import namespaces -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +After the packages are installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespaces. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle="_Imports.razor" %} -dotnet new blazor -o BlazorApp -int Auto -cd BlazorApp -cd BlazorApp.Client +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Gantt {% endhighlight %} {% endtabs %} -## 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 using the .NET CLI. +## Register the Blazor service -Run the following commands in your command prompt, terminal, or command shell: +Open the **Program.cs** file in Blazor Web App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} -{% highlight C# tabtitle=".NET CLI" %} +{% highlight C# tabtitle="Program.cs" %} -dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} +builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, run these commands in the client project directory. - -{% endtabcontent %} - -{% endtabcontents %} - -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). - -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. - -## Register Syncfusion® Blazor service +## Add stylesheet and script resources -Register the Syncfusion® Blazor Service in the **Program.cs** file of your Blazor Web App. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **App.razor** file. {% tabs %} -{% highlight c# tabtitle="Program.cs" %} +{% highlight razor tabtitle="App.razor" %} -.... -using Syncfusion.Blazor; -.... -builder.Services.AddSyncfusionBlazor(); -.... + {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. - -## Add stylesheet and script resources - -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **App.razor** file to enable Gantt Chart functionality. -- Add the **stylesheet reference inside the `` tag** of the `App.razor` file. -- Add the **script reference inside the `` tag** of the `App.razor` file. - -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} - -.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Syncfusion® Blazor Gantt Chart component +## Add Blazor Gantt Chart component -* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the 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`). +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component inside the `.Client` project razor file. -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. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -200,7 +181,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem -@code { +@code +{ public List? TaskCollection { get; set; } protected override void OnInitialized() { @@ -238,26 +220,54 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -### Run the application +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -**Visual Studio**: +{% tabcontent .NET CLI %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser. +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. -**Visual Studio Code or .NET CLI**: +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. -2. Run the following command: +cd .. +cd BlazorWebApp +dotnet run - ``` - dotnet run - ``` -3. The application will start and display in your default web browser. +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} {% previewsample "https://blazorplayground.syncfusion.com/embed/LDhdjcrXJjgihVLC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +3. [Getting Started with Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) diff --git a/gantt-sdk/blazor/gantt-chart/getting-started.md b/gantt-sdk/blazor/gantt-chart/getting-started.md index 0143986227..50be4a55df 100644 --- a/gantt-sdk/blazor/gantt-chart/getting-started.md +++ b/gantt-sdk/blazor/gantt-chart/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Blazor Gantt Chart Component | Syncfusion -description: Checkout and learn about getting started with Blazor Gantt Chart component in Blazor WebAssembly Application. +title: Getting Started with Blazor Gantt Chart in Blazor WASM App | Syncfusion +description: Check out and learn about getting started with Blazor Gantt Chart component in Blazor WebAssembly Application. platform: Blazor control: Gantt Chart documentation: ug @@ -9,111 +9,102 @@ documentation: ug # Getting started with Blazor Gantt Chart component -This section briefly explains about how to include [Syncfusion® Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include the [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview). + +## Create a new Blazor WebAssembly (Standalone) App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +{% endtabcontent %} -## Install Syncfusion® Blazor packages +{% tabcontent Visual Studio Code %} -Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution) or the Package Manager Console: +Run the following command to create a new Blazor WebAssembly App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp {% endhighlight %} {% endtabs %} -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} -## Install Syncfusion® Blazor packages +{% endtabcontent %} -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 integrated terminal. Run the following commands in the integrated terminal (Ctrl+`): +{% endtabcontents %} -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +## Install the required Blazor packages -dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} +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. 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. -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} +{% tabcontents %} -{% tabcontent .NET CLI %} +{% tabcontent Visual Studio %} -## Prerequisites +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 them. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.Gantt -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor packages +{% endtabcontent %} + +{% tabcontent .NET CLI %} -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 using the .NET CLI. +Open the command prompt and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }} -dotnet add 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 %} @@ -122,44 +113,56 @@ dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} {% endtabcontents %} -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. +## Add import namespaces -## Register Syncfusion® Blazor service +After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespaces. -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +{% tabs %} +{% highlight C# tabtitle="_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Gantt + +{% endhighlight %} +{% endtabs %} + +## Register the Blazor service + +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **~wwwroot/index.html** file. -- Add the **stylesheet reference inside the `` tag** of the `index.html` file. -- Add the **script reference inside the `` tag** of the `index.html` file. - -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} -.... - -``` +{% endhighlight %} +{% endtabs %} -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **~wwwroot/index.html** file to enable Gantt Chart functionality. -## Add Syncfusion® Blazor Gantt Chart component +{% tabs %} +{% highlight html tabtitle="index.html" %} -Add the Syncfusion® Blazor Gantt Chart component in the **~/Pages/Home.razor** file. + + +{% endhighlight %} +{% endtabs %} + +## Add Blazor Gantt Chart component + +Add the [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component in the **~/Pages/*.razor** (for example, **Home.razor**) file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -171,7 +174,8 @@ Add the Syncfusion® Blazor Gantt Chart comp -@code { +@code +{ public List? TaskCollection { get; set; } protected override void OnInitialized() { @@ -210,25 +214,51 @@ Add the Syncfusion® Blazor Gantt Chart comp {% endhighlight %} {% endtabs %} -### Run the application +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Gantt Chart](https://www.syncfusion.com/gantt-sdk/blazor-gantt-chart) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -**Visual Studio**: +dotnet run -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser. +{% endhighlight %} +{% endtabs %} -**Visual Studio Code or .NET CLI**: +{% endtabcontent %} -1. Open a terminal in the project directory and run the following command: - ``` - dotnet run - ``` -2. The application will start and display in your default web browser. +{% endtabcontents %} {% previewsample "https://blazorplayground.syncfusion.com/embed/BtLnjGrtTXAxUBbg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +2. [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/gantt-sdk/blazor/kanban/getting-started-with-server-app.md b/gantt-sdk/blazor/kanban/getting-started-with-server-app.md index 4fec272a12..aafbb1bfaf 100644 --- a/gantt-sdk/blazor/kanban/getting-started-with-server-app.md +++ b/gantt-sdk/blazor/kanban/getting-started-with-server-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor Kanban in Server App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Kanban Component in Blazor Server App. +description: Check out and learn about the documentation for getting started with Blazor Kanban Component in Blazor Server App. platform: gantt-sdk component: Kanban documentation: ug @@ -9,178 +9,167 @@ documentation: ug # Getting Started with Blazor Kanban Component in Blazor Server App -This section briefly explains about how to include [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Kanban](https://www.syncfusion.com/gantt-sdk/blazor-kanban-board) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. - -## Install required Blazor packages +{% endtabcontent %} -Install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using Visual Studio's NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution). +{% tabcontent Visual Studio Code %} -Alternatively, use the Package Manager Console: +Run the following command to create a new Blazor Server App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp {% endhighlight %} {% endtabs %} -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. +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. {% endtabcontent %} -{% tabcontent Visual Studio Code %} - -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio Code - -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Server App. {% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} - {% endtabs %} -## Install required Blazor packages +{% endtabcontent %} -From the integrated terminal, add the required packages of [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) to the project: +{% endtabcontents %} -{% tabs %} -{% highlight c# tabtitle="VS Code Terminal" %} +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 Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} +## Install the required Blazor packages -{% endhighlight %} -{% endtabs %} +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. 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. -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. - -{% endtabcontent %} +{% tabcontents %} -{% tabcontent .NET CLI %} +{% tabcontent Visual Studio %} -## Prerequisites +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 them. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor Server App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +dotnet add package Syncfusion.Blazor.Kanban -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Install required Blazor packages +{% endtabcontent %} + +{% tabcontent .NET CLI %} -Run the following commands to add the packages of [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): +Open the command prompt and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }} -dotnet add 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 %} -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. - {% endtabcontent %} {% endtabcontents %} -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 Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +## Add import namespaces -## Register Blazor service +After the packages are installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespaces. -Register the Blazor service in the **Program.cs** file of your Blazor Server App. +{% tabs %} +{% highlight C# tabtitle="_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Kanban + +{% endhighlight %} +{% endtabs %} + +## Register the Blazor service + +Open the **Program.cs** file in Blazor Server App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. - -- Add the **stylesheet reference inside the `` tag** of the `App.razor` file. -- Add the **script reference inside the `` tag** of the `App.razor` file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **App.razor** file. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -.... - - -``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. - -## Add Blazor Kanban component - -Add the Blazor Kanban component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +{% endhighlight %} +{% endtabs %} -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **App.razor** file to enable Kanban functionality. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="App.razor" %} -@* desired render mode define here *@ -@rendermode InteractiveServer + {% endhighlight %} {% endtabs %} +## Add Blazor Kanban component + +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Kanban](https://www.syncfusion.com/gantt-sdk/blazor-kanban-board) component inside the razor file. + +N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. + {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveServer @using Syncfusion.Blazor.Kanban @@ -193,7 +182,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati -@code { +@code +{ public class TasksModel { public string? Id { get; set; } @@ -220,21 +210,45 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% previewsample "https://blazorplayground.syncfusion.com/embed/hNrxtSWbKaleSUCK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Run the application +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Kanban](https://www.syncfusion.com/gantt-sdk/blazor-kanban-board) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -**Visual Studio**: +{% tabcontent .NET CLI %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser. +Open the command prompt and run the following command. -**Visual Studio Code or .NET CLI**: +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -1. Open a terminal in the project directory and run the following command: - ``` - dotnet run - ``` -2. The application will start and display in your default web browser. +dotnet run -N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the Kanban Board. +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ## See also diff --git a/gantt-sdk/blazor/kanban/getting-started-with-web-app.md b/gantt-sdk/blazor/kanban/getting-started-with-web-app.md index 26b7ef6a41..931bd17e28 100644 --- a/gantt-sdk/blazor/kanban/getting-started-with-web-app.md +++ b/gantt-sdk/blazor/kanban/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor Kanban Component in Web App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Kanban Component in Blazor Web App. +description: Check out and learn about the documentation for getting started with Blazor Kanban Component in Blazor Web App. platform: gantt-sdk component: Kanban documentation: ug @@ -9,129 +9,103 @@ documentation: ug # Getting Started with Blazor Kanban Component in Web App -This section briefly explains about how to include the [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Kanban](https://www.syncfusion.com/gantt-sdk/blazor-kanban-board) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor Web App in Visual Studio - -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install required Blazor packages +{% endtabcontent %} -Use Visual Studio's NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution) to install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +{% tabcontent Visual Studio Code %} -Alternatively, run the following in the Package Manager Console: +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is `WebAssembly` or `Auto`, install these packages in the Client project of the Blazor Web App. - -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. +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. {% endtabcontent %} -{% tabcontent Visual Studio Code %} - -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor Web App in Visual Studio Code - -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -## Install required Blazor packages - -From the integrated terminal, add the required packages of [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) to the project: - -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% endtabcontent %} -dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} +{% endtabcontents %} -{% endhighlight %} -{% endtabs %} +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). -N> If the **Interactive Render Mode** is `WebAssembly` or `Auto`, run the above commands in the Client project folder (for example, `BlazorWebApp.Client`). +## Install the required Blazor packages -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. +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. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. -{% endtabcontent %} +{% tabcontents %} -{% tabcontent .NET CLI %} +{% tabcontent Visual Studio %} -## Prerequisites +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 them. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +{% tabcontent Visual Studio Code %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +dotnet add package Syncfusion.Blazor.Kanban -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Install required Blazor packages - -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. - -**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. +{% endtabcontent %} -**Visual Studio Code or .NET CLI**: +{% tabcontent .NET CLI %} -Open the terminal or command prompt and run the following commands: +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet add package Syncfusion.Blazor.Kanban -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} @@ -139,57 +113,62 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is `WebAssembly` or `Auto`, execute the commands in the Client project (for example, `BlazorWebApp.Client`). - -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. - {% endtabcontent %} {% endtabcontents %} -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). +## Add import namespaces -## Register Blazor service +After the packages are installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespaces. -Register the Blazor service in the **Program.cs** file of your Blazor Web App. +{% tabs %} +{% highlight C# tabtitle="_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Kanban + +{% endhighlight %} +{% endtabs %} + +## Register the Blazor service + +Open the **Program.cs** file in Blazor Web App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Program.cs" %} +{% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. - ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. - -- Add the **stylesheet reference inside the `` tag** of the `App.razor` file. -- Add the **script reference inside the `` tag** of the `App.razor` file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **App.razor** file. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -.... - -``` +{% endhighlight %} +{% endtabs %} + +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **App.razor** file to enable Kanban functionality. + +{% tabs %} +{% highlight razor tabtitle="App.razor" %} + + -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Kanban component -* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the 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`). +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Kanban](https://www.syncfusion.com/gantt-sdk/blazor-kanban-board) component inside the `.Client` project razor file. -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. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -207,7 +186,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem -@code { +@code +{ public class TasksModel { public string? Id { get; set; } @@ -232,28 +212,54 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -### Run the application +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Kanban](https://www.syncfusion.com/gantt-sdk/blazor-kanban-board) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. -**Visual Studio**: +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Kanban component will render in your default web browser. +cd .. +cd BlazorWebApp +dotnet run -**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: +{% endtabcontent %} - ``` - dotnet run - ``` -3. The application will start and display in your default web browser. +{% endtabcontents %} {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVxNSMlqOnAbnrd?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/Kanban). -N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the Kanban Board. - ## See also 1. [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) diff --git a/gantt-sdk/blazor/kanban/getting-started.md b/gantt-sdk/blazor/kanban/getting-started.md index a58b2fad53..5fcde1eb09 100644 --- a/gantt-sdk/blazor/kanban/getting-started.md +++ b/gantt-sdk/blazor/kanban/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor Kanban Component | Syncfusion® -description: Checkout and learn about getting started with Blazor Kanban component in Blazor WebAssembly Application. +description: Check out and learn about getting started with Blazor Kanban component in Blazor WebAssembly Application. platform: gantt-sdk control: Kanban documentation: ug @@ -9,168 +9,165 @@ documentation: ug -# Getting Started with Blazor Kanban Component +# Getting Started with Blazor Kanban Component in the Blazor WASM App -This guide briefly explains about how to include [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This guide briefly explains how to include the [Blazor Kanban](https://www.syncfusion.com/gantt-sdk/blazor-kanban-board) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview). + +## Create a new Blazor WebAssembly (Standalone) App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. - -## Install required Blazor packages +{% endtabcontent %} -Use Visual Studio's NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution) to install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +{% tabcontent Visual Studio Code %} -Alternatively, run the following in the Package Manager Console: +Run the following command to create a new Blazor WebAssembly App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Terminal" %} -Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp {% endhighlight %} {% endtabs %} -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. +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. {% endtabcontent %} -{% tabcontent Visual Studio Code %} +{% tabcontent .NET CLI %} -## Prerequisites +Run the following command to create a new Blazor WebAssembly App. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -## Create a new Blazor App in Visual Studio Code +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% endhighlight %} +{% endtabs %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +{% endtabcontent %} -{% tabs %} +{% endtabcontents %} -{% highlight c# tabtitle="Blazor WASM App" %} +## Install the required Blazor packages -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +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. 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. -{% endhighlight %} +{% tabcontents %} -{% endtabs %} +{% tabcontent Visual Studio %} -## Install required Blazor packages +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 them. -From the integrated terminal, add the required packages of [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) to the project: +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -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. - {% endtabcontent %} -{% tabcontent .NET CLI %} - -## Prerequisites +{% tabcontent Visual Studio Code %} -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet --version +dotnet add package Syncfusion.Blazor.Kanban -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.Kanban -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Install required Blazor packages +{% endtabcontent %} + +{% endtabcontents %} + +## Add import namespaces -Run the following commands to add the packages of [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): +After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespaces. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle="_Imports.razor" %} -dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Kanban {% endhighlight %} {% endtabs %} -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. +## Register the Blazor service -{% endtabcontent %} - -{% endtabcontents %} - -## Register Blazor service - -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. - -- Add the **stylesheet reference inside the `` tag** of the `index.html` file. -- Add the **script reference inside the `` tag** of the `index.html` file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **~wwwroot/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} -.... - -``` +{% endhighlight %} +{% endtabs %} -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **~wwwroot/index.html** file to enable Kanban functionality. + +{% tabs %} +{% highlight html tabtitle="index.html" %} + + + +{% endhighlight %} +{% endtabs %} ## Add Blazor Kanban component -Add the Blazor Kanban component in the **~/Pages/Home.razor** file. +Add the [Blazor Kanban](https://www.syncfusion.com/gantt-sdk/blazor-kanban-board) component in the **~/Pages/*.razor** (for example, **Home.razor**) file. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Kanban @@ -184,7 +181,8 @@ Add the Blazor Kanban component in the **~/Pages/Home.razor** file. -@code { +@code +{ public class TasksModel { public string? Id { get; set; } @@ -211,26 +209,48 @@ Add the Blazor Kanban component in the **~/Pages/Home.razor** file. {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrxteMFgkJuRQhn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Run the application +## Run the application -**Visual Studio**: +{% tabcontents %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser. +{% tabcontent Visual Studio %} -**Visual Studio Code or .NET CLI**: +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Kanban](https://www.syncfusion.com/gantt-sdk/blazor-kanban-board) component will render in your default web browser. -1. Open a terminal in the project directory and run the following command: - ``` - dotnet run - ``` -2. The application will start and display in your default web browser. +{% endtabcontent %} -N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the Kanban Board. +{% tabcontent Visual Studio Code %} -## See also +Open the terminal and run the following command. -* [Getting Started with Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app) +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} -* [Getting Started with Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +## See also -* [Getting Started with Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app) \ No newline at end of file +1. [Getting Started with Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/grid-sdk/blazor/data-grid/getting-started-with-maui-app.md b/grid-sdk/blazor/data-grid/getting-started-with-maui-app.md index bcdcac6d48..0e1cc9fe21 100644 --- a/grid-sdk/blazor/data-grid/getting-started-with-maui-app.md +++ b/grid-sdk/blazor/data-grid/getting-started-with-maui-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with DataGrid in Blazor MAUI App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor DataGrid Component in Blazor MAUI App. +description: Check out and learn about the documentation for getting started with Blazor DataGrid Component in Blazor MAUI App. platform: grid-sdk control: DataGrid documentation: ug @@ -9,38 +9,43 @@ documentation: ug # Getting Started with Blazor DataGrid -This section explains you through the step-by-step process of integrating the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section explains you through the step-by-step process of integrating the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor MAUI App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview). + +## Create a new Blazor MAUI App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Syncfusion® Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +{% endtabcontent %} -## Create a new Blazor MAUI App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Run the following command to create a new Blazor MAUI App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new maui-blazor -o MauiBlazorApp +cd MauiBlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Alternatively, create a **Blazor MAUI App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. -## Create a new Blazor MAUI App in Visual Studio Code +{% endtabcontent %} -Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a MAUI application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor MAUI App. {% tabs %} -{% highlight c# tabtitle="Blazor MAUI App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new maui-blazor -o MauiBlazorApp cd MauiBlazorApp @@ -52,14 +57,21 @@ cd MauiBlazorApp {% endtabcontents %} -## Install required Blazor packages +## Install the required Blazor packages + +Install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +{% tabcontents %} + +{% tabcontent Visual Studio %} -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`). +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 them. -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Alternatively, you can install the same packages using the Package Manager Console with the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} @@ -67,11 +79,43 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -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. +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. +After the packages are installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -82,16 +126,15 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **~/MauiProgram.cs** file. +Open the **MauiProgram.cs** file in Blazor MAUI App and register the Blazor service. {% tabs %} -{% highlight c# tabtitle="~/MauiProgram.cs" %} +{% highlight c# tabtitle="MauiProgram.cs" %} .... using Syncfusion.Blazor; - .... public static class MauiProgram @@ -109,20 +152,22 @@ public static class MauiProgram ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} +.... +.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. +{% endhighlight %} +{% endtabs %} ## Add Blazor DataGrid component -Add the Blazor DataGrid component in the **~/Pages/Home.razor** file. +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -138,7 +183,8 @@ Add the Blazor DataGrid component in the **~/Pages/Home.razor** file. -@code { +@code +{ public List OrderData { get; set; } protected override void OnInitialized() { @@ -178,18 +224,54 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -### How to run the sample on windows +## Run the application on Windows + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ![Blazor DataGrid Component](images/blazor-datagrid-maui-page.webp) -### How to run the sample on android +## Run the application on Android To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps: Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. -N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). ![Blazor DataGrid Component](images/blazor-datagrid-maui-page.webp) \ No newline at end of file diff --git a/grid-sdk/blazor/data-grid/getting-started-with-server-app.md b/grid-sdk/blazor/data-grid/getting-started-with-server-app.md index 13e731048a..084fd8c398 100644 --- a/grid-sdk/blazor/data-grid/getting-started-with-server-app.md +++ b/grid-sdk/blazor/data-grid/getting-started-with-server-app.md @@ -1,110 +1,123 @@ --- layout: post title: Getting Started with DataGrid in the Blazor Server App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor DataGrid Component in Blazor Server App. +description: Check out and learn about the documentation for getting started with Blazor DataGrid Component in Blazor Server App. platform: grid-sdk control: DataGrid documentation: ug --- -# Getting Started with Blazor DataGrid in Server App +# Getting Started with Blazor DataGrid Component in Blazor Server App -This section briefly explains about how to include [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Run the following command to create a new Blazor Server App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Server App. {% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} -## Prerequisites +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 Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +## Install the required Blazor packages -{% tabs %} -{% highlight c# tabtitle=".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. 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. -dotnet --version +{% tabcontents %} -{% endhighlight %} -{% endtabs %} +{% tabcontent Visual Studio %} -## Create a Blazor Server App using .NET CLI +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 them. -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -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 Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} -## Install required Blazor packages +{% endtabcontent %} -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. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -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 %} -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. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. +After the packages are installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -115,54 +128,50 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Server App. +Open the **Program.cs** file in Blazor Server App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **~/Components/App.razor** file. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -.... - - -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. -## Add Blazor DataGrid component - -Add the Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +{% endhighlight %} +{% endtabs %} -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **~/Components/App.razor** file to enable DataGrid functionality. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="App.razor" %} -@* desired render mode define here *@ -@rendermode InteractiveServer + {% endhighlight %} {% endtabs %} +## Add Blazor DataGrid component + +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component inside the razor file. + +N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. + {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveServer @using Syncfusion.Blazor.Grids @@ -174,7 +183,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati -@code { +@code +{ public List OrderData { get; set; } protected override void OnInitialized() { @@ -214,6 +224,44 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor DataGrid in your default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} {% previewsample "https://blazorplayground.syncfusion.com/embed/htrHZdNkKnhrXYsw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} diff --git a/grid-sdk/blazor/data-grid/getting-started-with-web-app.md b/grid-sdk/blazor/data-grid/getting-started-with-web-app.md index 420de7bd71..a3baae30ba 100644 --- a/grid-sdk/blazor/data-grid/getting-started-with-web-app.md +++ b/grid-sdk/blazor/data-grid/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor DataGrid in Web App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor DataGrid in Blazor Web App. +description: Check out and learn about the documentation for getting started with Blazor DataGrid in Blazor Web App. platform: grid-sdk component: DataGrid documentation: ug @@ -9,40 +9,46 @@ documentation: ug # Getting Started with Blazor DataGrid Component in Blazor Web App -This guide explains how to integrate the [ Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor component](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor Web App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Run the following command to create a new Blazor Web App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor Web App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp cd BlazorWebApp.Client @@ -51,67 +57,72 @@ cd BlazorWebApp.Client {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} -## Prerequisites +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +## Install the required Blazor packages -{% tabs %} -{% highlight c# tabtitle=".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. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. -dotnet --version +{% tabcontents %} -{% endhighlight %} -{% endtabs %} +{% tabcontent Visual Studio %} -## Create a Blazor Web App using .NET CLI +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 them. -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. - {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -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). +Open the terminal and run the following commands. -## Install required Blazor packages +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -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. +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -Alternatively, run the following commands in the Package Manager Console: +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -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 %} -For Blazor Web Apps running in `WebAssembly` or `Auto` render mode, the solution includes both **Server** and **Client** projects. To fully support client-side features, ensure that all required packages are installed in the **Client project**. +{% endtabcontent %} -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. +{% endtabcontents %} ## Add import namespaces After the packages are installed, open the **~/_Imports.razor** file in the **Client** project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Grids @@ -119,56 +130,50 @@ After the packages are installed, open the **~/_Imports.razor** file in the **Cl {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Web App. +Open the **Program.cs** file in Blazor Web App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Program.cs" %} +{% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. - ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **~/Components/App.razor** file. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -.... - -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. - -## Add Blazor DataGrid component +{% endhighlight %} +{% endtabs %} -Add the Blazor DataGrid component in the **~/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`). +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **~/Components/App.razor** file to enable DataGrid functionality. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="App.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. +## Add Blazor DataGrid component + +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component inside the `.Client` project razor file. + +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveAuto @using Syncfusion.Blazor.Grids @@ -180,7 +185,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem -@code { +@code +{ public List OrderData { get; set; } protected override void OnInitialized() { @@ -222,9 +228,47 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/htrHZdNkKnhrXYsw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -**Run the Application** +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} -* **Visual Studio** → Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Grid component in the default web browser. +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component will render in your default web browser. -* **VS Code / CLI** → Run **dotnet run** in the project directory using the terminal. This will build and launch the application, and you can open the displayed localhost URL in your browser to view the Blazor Grid component. +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} diff --git a/grid-sdk/blazor/data-grid/getting-started.md b/grid-sdk/blazor/data-grid/getting-started.md index 8db4392d62..e44b3ac524 100644 --- a/grid-sdk/blazor/data-grid/getting-started.md +++ b/grid-sdk/blazor/data-grid/getting-started.md @@ -10,96 +10,109 @@ documentation: ug # Getting Started with Blazor DataGrid in WASM App -This section briefly explains about how to include [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in a Blazor webAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in a Blazor webAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview). + +## Create a new Blazor WebAssembly (Standalone) App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Run the following command to create a new Blazor WebAssembly App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +## Install the required Blazor packages + +Install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +{% tabcontents %} -## Prerequisites +{% tabcontent Visual Studio %} + +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 them. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install 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. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -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 %} -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. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces @@ -114,41 +127,46 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) at the end of the `` section in the **~wwwroot/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} -.... + +{% endhighlight %} +{% endtabs %} + +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **~wwwroot/index.html** file to enable DataGrid functionality. + +{% tabs %} +{% highlight html tabtitle="index.html" %} + -``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. +{% endhighlight %} +{% endtabs %} ## Add Blazor DataGrid component -Add the Blazor DataGrid component in the **~/Pages/Index.razor** file. +Add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in the **~/Pages/*.razor** (for example, **Home.razor**) file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Grids @@ -199,6 +217,44 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor DataGrid in your default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} {% previewsample "https://blazorplayground.syncfusion.com/embed/htrHZdNkKnhrXYsw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}