diff --git a/blazor-toc.html b/blazor-toc.html index 5a587b7fc6..57a9495437 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -364,8 +364,18 @@
  • HTML Attributes
    • -
  • - Deployment +
  • Deployment +
  • CDN Fallback diff --git a/blazor/common/deployment/deployment-azure.md b/blazor/common/deployment/deployment-azure.md new file mode 100644 index 0000000000..d5184cc05e --- /dev/null +++ b/blazor/common/deployment/deployment-azure.md @@ -0,0 +1,82 @@ +--- +layout: post +title: Deploy a Blazor Web App to Azure App Service | Syncfusion +description: Learn here all about deploying the Blazor application with Syncfusion Blazor Components to Azure App Service. +platform: Blazor +component: Common +documentation: ug +--- + +# Deploy Blazor Web App to Azure App Service + +This section provides information about deploying a Blazor Web applications with the Syncfusion Blazor components to Azure App Service. + +Refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio) topic for more information. + +## Deployment procedure + +If you don’t have a login for Azure, [sign up](https://azure.microsoft.com/en-in/free/) to access the Azure Portal. + +### Create a resource in Azure + +* Click **Create a resource** in Azure Portal to create a resource group. + +![Create new resource](../images/create-new-resource.png) + +* Select **Web App** Azure application service. + +![Select web app](../images/web-app.png) + +* After selecting Web App option, choose an appropriate resource group name and instance details. + +* Once this is done, click **Review + create**. + +![Create resource](../images/create-resource.png) + +* After configuring the Web App service. Select the created web app service (blazor-web-publish). + +![Created resource](../images/created-resource.png) + +* Now, select the **overview** section, click on **Download publish profile**, and save the profile locally. + +![Download publish profile](../images/download-publish-profile.png) + +### Publish the Application in Azure + +#### Using Azure account login + +* To publish the project, right-click on it and choose **Publish** from the context menu. + +![Publish menu](../images/publish-menu.png) + +* Select **Azure** as the target and **Azure App Service (Windows)** as the specific target. + +![Publish target](../images/publish-target.png) + +![Publish specific target](../images/publish-specific-target.png) + +* You need to log into your Azure account and choose the web app service (blazor-web-publish) that you have created. Then, click **Publish**. + +![Created azure app service](../images/created-azure-resource.png) + +![Publish App](../images/publish-azure.png) + +#### Using Import Profile option + +* To publish the project, right-click on it and choose **Publish** from the context menu. + +![Publish menu](../images/publish-menu.png) + +* Select **Import Profile** as the target and browse the downloaded publish folder. Then, click **Publish** + +![Publish target](../images/target-import-profile.png) + +![Publish App](../images/publish-azure.png) + +* Now, the application will be deployed and will be available in the specified URL: https://blazor-web-publish.azurewebsites.net/. + +![Output-Azure](../images/output-azure.png) + +## See also + +Refer [here](https://learn.microsoft.com/en-us/azure/app-service/quickstart-dotnetcore?tabs=net70&pivots=development-environment-vs#publish-your-web-app) for publishing the application to Azure App Service using Visual Studio. \ No newline at end of file diff --git a/blazor/common/deployment/deployment-iis.md b/blazor/common/deployment/deployment-iis.md new file mode 100644 index 0000000000..65f0dde1cc --- /dev/null +++ b/blazor/common/deployment/deployment-iis.md @@ -0,0 +1,46 @@ +--- +layout: post +title: Deploy a Blazor Web App to IIS | Syncfusion +description: Learn here all about deploying the Blazor application with Syncfusion Blazor Components to IIS server. +platform: Blazor +component: Common +documentation: ug +--- + +# Deploy Blazor Web App to IIS server + +This section provides information about deploying a Blazor Web applications with the Syncfusion Blazor components to IIS server. + +Refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio) topic for more information. + +## Create an IIS Site + +* [Enable IIS](https://learn.microsoft.com/en-us/previous-versions/dynamicsnav-2018-developer/How-to--Install-and-Configure-Internet-Information-Services-for-Microsoft-Dynamics-NAV-Web-Client)in Windows Features. + +* [Enable WebSockets](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/websockets?view=aspnetcore-7.0#enabling-websockets-on-iis) in IIS. + +* Now, publish the application for deployment in Release configuration by referring to [this](https://blazor.syncfusion.com/documentation/common/deployment). + +* Open Internet Information Services (IIS) Manager and then right-click on "Sites," followed by selecting "Add Website." + +![Add site in IIS](../images/add-site.png) + +* In the Add Website dialog, fill in the required field values such as site name, physical path and customized port value and then click OK. + +Set the physical path to the location where your sample application is developed. + +![Add Website in IIS](../images/add-website.png) + +## Run the Published Application + +* Open Internet Information Services (IIS) Manager. Expand the `Sites` node to verify that the published application is running. Click `Browse` to open the application in your browser. + +![Browse application](../images/browser-website.png) + +* Now, application runs in the specified browser port(8080). + +![Output-IIS](../images/iis-output.png) + +## See also + +Refer [here](https://learn.microsoft.com/en-us/aspnet/core/tutorials/publish-to-iis?view=aspnetcore-7.0&tabs=visual-studio) for publishing the application to IIS Service using Visual Studio. \ No newline at end of file diff --git a/blazor/common/deployment.md b/blazor/common/deployment/publish.md similarity index 78% rename from blazor/common/deployment.md rename to blazor/common/deployment/publish.md index 1b708f5df9..0a79881f76 100644 --- a/blazor/common/deployment.md +++ b/blazor/common/deployment/publish.md @@ -11,25 +11,25 @@ documentation: ug This section provides information about publishing and deploying Blazor applications with the Syncfusion Blazor components. -For more information, see [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy). +Refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio) topic for more information. ## Publish Blazor Application with Visual Studio * Right-click on the project in the `Solution Explorer` and select `Publish`. -![Solution Explorer in Blazor](./images/publish.png) +![Solution Explorer in Blazor](../images/publish.png) * Then, select the `Folder` option and select the publishing target location. -![Publish Location in Blazor](./images/folder.png) +![Publish Location in Blazor](../images/folder.png) * Check the configuration as Release by clicking the `Advanced...` option below the target location. -![Release Configuration in Blazor](./images/config.png) +![Release Configuration in Blazor](../images/config.png) * For `Blazor Server side application`, set Deployment Mode as `Self-Contained`. Because some dependencies are not loaded properly when the published folder is hosted. -![Deploy Mode in Blazor](./images/deploy.png) +![Deploy Mode in Blazor](../images/deploy.png) * Then, click `Save` and `Publish`. @@ -59,7 +59,7 @@ dotnet publish -c Release --self-contained true -r win-x86 {% endhighlight %} {% endtabs %} -Refer to [dotnet publish arguments](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-publish#arguments) to learn about optional arguments. Use the following command to specify the output directory path. +Refer to the [dotnet publish - arguments](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-publish?tabs=netcore21#arguments) to learn about various optional arguments. Use the following command to specify the path for the output directory. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -75,7 +75,7 @@ If the path is relative, the output directory generated is relative to the proje ## Ahead-of-time (AOT) compilation in Blazor WebAssembly -Blazor WebAssembly supports ahead-of-time (AOT) compilation, which improves runtime performance at the expense of a larger app size. For details and enable steps, see [Ahead-of-time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly#ahead-of-time-aot-compilation). +Blazor WebAssembly supports ahead-of-time (AOT) compilation which provides improved runtime performance at the expense of a larger app size. Refer to [Ahead-of-time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#ahead-of-time-aot-compilation) topic to learn more about how it works and how to enable. ### Enable AOT in the application diff --git a/blazor/common/images/add-site.png b/blazor/common/images/add-site.png new file mode 100644 index 0000000000..9ab0fab5f9 Binary files /dev/null and b/blazor/common/images/add-site.png differ diff --git a/blazor/common/images/add-website.png b/blazor/common/images/add-website.png new file mode 100644 index 0000000000..a819b5ce26 Binary files /dev/null and b/blazor/common/images/add-website.png differ diff --git a/blazor/common/images/browser-website.png b/blazor/common/images/browser-website.png new file mode 100644 index 0000000000..292f44ad61 Binary files /dev/null and b/blazor/common/images/browser-website.png differ diff --git a/blazor/common/images/create-new-resource.png b/blazor/common/images/create-new-resource.png new file mode 100644 index 0000000000..cddad65653 Binary files /dev/null and b/blazor/common/images/create-new-resource.png differ diff --git a/blazor/common/images/create-resource.png b/blazor/common/images/create-resource.png new file mode 100644 index 0000000000..0648410955 Binary files /dev/null and b/blazor/common/images/create-resource.png differ diff --git a/blazor/common/images/created-azure-resource.png b/blazor/common/images/created-azure-resource.png new file mode 100644 index 0000000000..2790bbf7f8 Binary files /dev/null and b/blazor/common/images/created-azure-resource.png differ diff --git a/blazor/common/images/created-resource.png b/blazor/common/images/created-resource.png new file mode 100644 index 0000000000..89b7d382b3 Binary files /dev/null and b/blazor/common/images/created-resource.png differ diff --git a/blazor/common/images/download-publish-profile.png b/blazor/common/images/download-publish-profile.png new file mode 100644 index 0000000000..02f4ca3ea7 Binary files /dev/null and b/blazor/common/images/download-publish-profile.png differ diff --git a/blazor/common/images/iis-output.png b/blazor/common/images/iis-output.png new file mode 100644 index 0000000000..692f19cfe1 Binary files /dev/null and b/blazor/common/images/iis-output.png differ diff --git a/blazor/common/images/output-azure.png b/blazor/common/images/output-azure.png new file mode 100644 index 0000000000..2576d83def Binary files /dev/null and b/blazor/common/images/output-azure.png differ diff --git a/blazor/common/images/publish-azure.png b/blazor/common/images/publish-azure.png new file mode 100644 index 0000000000..6eff2effdb Binary files /dev/null and b/blazor/common/images/publish-azure.png differ diff --git a/blazor/common/images/publish-menu.png b/blazor/common/images/publish-menu.png new file mode 100644 index 0000000000..3f363230ec Binary files /dev/null and b/blazor/common/images/publish-menu.png differ diff --git a/blazor/common/images/publish-specific-target.png b/blazor/common/images/publish-specific-target.png new file mode 100644 index 0000000000..c33ec49154 Binary files /dev/null and b/blazor/common/images/publish-specific-target.png differ diff --git a/blazor/common/images/publish-target.png b/blazor/common/images/publish-target.png new file mode 100644 index 0000000000..424a3f12dc Binary files /dev/null and b/blazor/common/images/publish-target.png differ diff --git a/blazor/common/images/target-import-profile.png b/blazor/common/images/target-import-profile.png new file mode 100644 index 0000000000..240083146c Binary files /dev/null and b/blazor/common/images/target-import-profile.png differ diff --git a/blazor/common/images/web-app.png b/blazor/common/images/web-app.png new file mode 100644 index 0000000000..50e9c32e06 Binary files /dev/null and b/blazor/common/images/web-app.png differ diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index 92b97bbace..baaaddd40e 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Syncfusion Blazor DatePicker Component in WebApp +title: Getting Started with Syncfusion Blazor DatePicker Component in Web App description: Checkout and learn about the documentation for getting started with Blazor DatePicker Component in Blazor Web App. platform: Blazor component: DatePicker @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DatePicker Component in Web App -This section briefly explains about how to include [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor DatePicker](https://w ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the application. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add **Blazor DatePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DatePicker** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor packages in the client project of the Blazor Web App. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-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-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the application. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, for a Blazor Web App with the `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) topic. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the command is run in the project directory that contains the `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | +| Server | Open **~/_Imports.razor** in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendar` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendar` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (server and client) of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -173,6 +173,8 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} +N> A valid Syncfusion license is required. For details on generating and registering a license, refer to the [License key registration](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview) documentation. + ## 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 reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -189,11 +191,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to 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. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for different ways to reference themes ([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 script reference options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor DatePicker component -Add the Syncfusion® Blazor DatePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DatePicker component in a `.razor` file inside the `Pages` folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +204,7 @@ Add the Syncfusion® Blazor DatePicker compo | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,13 +223,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DatePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor DatePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LXVptWruKtEfoXQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DatePicker Component](./images/blazor-datepicker-component.png)" %} ## Setting the Value and Min and Max dates -The following example demonstrates how to set the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Value) and [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) dates on initializing the DatePicker. Here, you can select a date within the range from 5th to 27th of this month. `TValue` specifies the type of the DatePicker component. +The following example demonstrates how to set the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Value), [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min), and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) dates when initializing the DatePicker. In this example, a date can be selected within the range from the 5th to the 27th of the current month. `TValue` specifies the type of the DatePicker component. {% tabs %} {% highlight razor %} @@ -251,4 +253,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 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-web-app) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/gantt-chart/column-resizing.md b/blazor/gantt-chart/column-resizing.md index 442cbf8921..6b9cc72129 100644 --- a/blazor/gantt-chart/column-resizing.md +++ b/blazor/gantt-chart/column-resizing.md @@ -146,4 +146,4 @@ The screenshot below illustrates column resizing on a touch device. ![Column resize](images/blazor-gantt-chart-column-resizing.png) -> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt Chart. \ No newline at end of file +> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt Chart. diff --git a/blazor/gantt-chart/task-dependencies.md b/blazor/gantt-chart/task-dependencies.md index 3429c6c03b..781230da88 100644 --- a/blazor/gantt-chart/task-dependencies.md +++ b/blazor/gantt-chart/task-dependencies.md @@ -9,11 +9,11 @@ documentation: ug # Task Dependencies in Blazor Gantt Chart Component -Task Dependencies are a crucial feature in project management that define relationships between tasks, ensuring they are executed in a logical sequence. In the [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component, task dependencies provide a powerful way to visualize and manage the interconnections between various project activities. +Task dependencies define the logical order in which tasks must be executed, helping ensure accurate scheduling and streamlined project workflows. In the Blazor Gantt Chart component, task relationships are represented visually to support structured planning and coordination across the project timeline. ## Understanding task dependencies -Task dependencies establish the order in which tasks should be completed, creating a structured workflow within your project. By implementing dependencies, you can: +Task dependencies determine the execution sequence of tasks, forming a structured workflow that enhances project clarity and coordination. By implementing dependencies, you can: 1. Ensure tasks are executed in the correct sequence 2. Automatically adjust schedules when related tasks change @@ -22,44 +22,37 @@ Task dependencies establish the order in which tasks should be completed, creati ## Types of task relationships -The Blazor Gantt Chart supports four types of task relationships, each serving a specific purpose in project scheduling: - -1. **Finish-to-start (FS)**: The most common type, where a task can only begin after its predecessor is completed. - - Example: In software development, coding (Task B) can only start after the design phase (Task A) is finished. - ![Blazor Gantt Chart displays Finish to Start Task Relationship](images/blazor-gantt-chart-finish-to-start-relation.png) - -2. **Start-to-start (SS)**: Tasks begin simultaneously or with a specified lag. - +Task relationships are categorized into four types based on start and finish dates: +- **Start to Start (SS)**: Successor starts with predecessor. Example: In event planning, venue decoration (Task B) can start as soon as venue setup (Task A) begins. ![Blazor Gantt Chart displays Start to Start Task Relationship](images/blazor-gantt-chart-start-to-start-relation.png) -3. **Finish-to-finish (FF)**: Tasks must finish together or with a specified lag. - - Example: In publishing, proof reading (Task B) must finish when or shortly after content writing (Task A) is completed. - ![Blazor Gantt Chart displays Finish to Finish Task Relationship](images/blazor-gantt-chart-finish-to-finish-relation.png) - -4. **Start-to-finish (SF)**: A task can't finish until its predecessor starts. - - Example: In shift work, the night shift (Task B) can't end until the day shift (Task A) begins. +- **Start to Finish (SF)**: Successor finishes when predecessor starts. + Example: In shift work, the night shift (Task B) can't end until the day shift (Task A) begins. ![Blazor Gantt Chart displays Start to Finish Task Relationship](images/blazor-gantt-chart-start-to-finish-relation.png) -## Implementing task dependencies - -To implement task dependencies in your Blazor Gantt Chart, follow these steps: +- **Finish to Start (FS)**: Successor starts after predecessor finishes (default). + Example: In software development, coding (Task B) can only start after the design phase (Task A) is finished. + ![Blazor Gantt Chart displays Finish to Start Task Relationship](images/blazor-gantt-chart-finish-to-start-relation.png) -1. **Define the dependency field**: In your data source, create a field to hold dependency information. +- **Finish to Finish (FF)**: Successor finishes with predecessor. + Example: In publishing, proof reading (Task B) must finish when or shortly after content writing (Task A) is completed. + ![Blazor Gantt Chart displays Finish to Finish Task Relationship](images/blazor-gantt-chart-finish-to-finish-relation.png) -2. **Map the dependency field**: Use the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property of [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) to map your dependency field. +## Implementing task dependencies -3. **Specify dependencies**: For each task, specify its dependencies by indicating the **Predecessor's Task ID** followed by the **Dependency Type** (e.g., Finish-to-Start, Start-to-Start). +To implement task dependencies in the Blazor Gantt Chart, follow these steps: -4. **Predecessor configuration**: The [DependencyTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DependencyTypes) property manages task dependencies, using [DependencyType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.DependencyType.html) enums to define relationships. You can configure the order of predecessor types such as FS, SS, FF, and SF. +- **Define the dependency field**: Add a field in the data source to store task dependency values. +- **Map the dependency field**: Use the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property in [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) to bind the dependency field. +- **Specify dependencies**: Assign values using the predecessor's Task ID followed by the dependency type (e.g., `2FS`, `6SS`, `7SF`, `3FF`). +- **Predecessor configuration**: Use the [DependencyTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DependencyTypes) property to define relationships between tasks using supported types such as `FS`, `SS`, `SF`, and `FF` through [DependencyType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.DependencyType.html) enums. The following code snippets demonstrate how to define and configure task dependencies in the Gantt Chart component. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.DropDowns @@ -68,14 +61,14 @@ The following code snippets demonstrate how to define and configure task depende - + ParentID="ParentID"> @code { @@ -117,32 +110,35 @@ The following code snippets demonstrate how to define and configure task depende { TaskCollection = new List { - new TaskData { TaskId = 1, TaskName = "Project Initiation", StartDate = new DateTime(2023, 04, 02), EndDate = new DateTime(2023, 04, 21) }, - new TaskData { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = "4", Progress = 40, Predecessor = "2FS", ParentId = 1 }, - new TaskData { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = "0", Progress = 30, Predecessor = "3FF", ParentId = 1 }, - new TaskData { TaskId = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), EndDate = new DateTime(2023, 04, 21) }, - new TaskData { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 40, Predecessor = "6SS", ParentId = 5 }, - new TaskData { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 04, 04), Duration = "0", Progress = 30, Predecessor = "7SF", ParentId = 5 } + new TaskData { TaskID = 1, TaskName = "Project Initiation", StartDate = new DateTime(2023, 04, 02), EndDate = new DateTime(2023, 04, 06) }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = "4", Progress = 40, Predecessor = "2FS", ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = "0", Progress = 30, Predecessor = "3FF", ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), EndDate = new DateTime(2023, 04, 06) }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 40, Predecessor = "6SS", ParentID = 5 }, + new TaskData { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 04, 04), Duration = "0", Progress = 30, Predecessor = "7SF", ParentID = 5 } }; } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public string Predecessor { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` -The example initially sets the `DependencyTypes` property with all task dependency types: Finish-to-Start (FS), Start-to-Start (SS), Start-to-Finish (SF), and Finish-to-Finish (FF). A dropdown allows you to dynamically change which types are active. As you select different options, the Gantt Chart immediately updates the dependencies based on the current `DependencyTypes` configuration. -![Blazor Gantt Chart with predecessor configuration](images/predecessor-configuration.gif) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBIjEBoKCoYgxst?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +The example initially sets the `DependencyTypes` property with all task dependency types: Finish-to-Start (FS), Start-to-Start (SS), Start-to-Finish (SF), and Finish-to-Finish (FF). A dropdown allows you to dynamically change which types are active. As you select different options, the Gantt Chart immediately updates the dependencies based on the current `DependencyTypes` configuration. ## Relationship between task levels @@ -192,17 +188,17 @@ A negative offset allows a task to start before its predecessor completes, creat ## Understanding dependency string structure -The dependency string in the Gantt Chart follows a specific structure to define relationships between tasks. Let's break down an example: +Dependency strings in the Gantt Chart follow a structured format to define task relationships and scheduling offsets. Let's break down an example: **2FS+3d** -- **2**: This is the TaskId of the predecessor task. It corresponds to the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) field mapped in the `GanttTaskFields`. +- **2**: This is the TaskID of the predecessor task. It corresponds to the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) field mapped in the `GanttTaskFields`. - **FS**: This represents the dependency type (Finish-to-Start in this case). - **+3d**: This is the offset, indicating a 3-day lag after the predecessor finishes. Here's a detailed explanation of each component: -1. **TaskId**: +1. **TaskID**: - This is the unique identifier of the predecessor task. - It must match the `Id` field specified in your `GanttTaskFields` mapping. @@ -227,20 +223,21 @@ Here's a detailed explanation of each component: The Gantt Chart component allows you to configure complex task dependencies to handle intricate project workflows. The following code snippets demonstrate how to define and set up such dependencies. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt + ParentID="ParentID"> @@ -251,31 +248,34 @@ The Gantt Chart component allows you to configure complex task dependencies to h { TaskCollection = new List { - new TaskData { TaskId = 1, TaskName = "Project Initiation", StartDate = new DateTime(2023, 04, 02), EndDate = new DateTime(2023, 04, 21) }, - new TaskData { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = "4", Progress = 40, Predecessor = "2FS", ParentId = 1 }, - new TaskData { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = "0", Progress = 30, Predecessor = "3FF", ParentId = 1 }, - new TaskData { TaskId = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), EndDate = new DateTime(2023, 04, 21) }, - new TaskData { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 40, Predecessor = "6SS", ParentId = 5 }, - new TaskData { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 04, 04), Duration = "0", Progress = 30, Predecessor = "7FF+2d", ParentId = 5 } + new TaskData { TaskID = 1, TaskName = "Project Initiation", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 06) }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 03), Duration = "4", Progress = 40, Predecessor = "2FS", ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 06), Duration = "0", Progress = 30, Predecessor = "3FF", ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 04), EndDate = new DateTime(2023, 04, 10) }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 40, Predecessor = "6SS", ParentID = 5 }, + new TaskData { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 04, 10), Duration = "0", Progress = 30, Predecessor = "7FF+2d", ParentID = 5 } }; } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public string Predecessor { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` -![Blazor Gantt Chart displays Complex Dependencies](images/blazor-gantt-chart-complex-dependencies.png) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZroXYBeqWFyLlcL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} In this example: - Tasks 2, 3, and 4 are child tasks of Task 1 (Project Initiation). @@ -289,20 +289,20 @@ In this example: Tasks can have multiple dependencies, allowing for complex project structures. Specify multiple dependencies by separating them with commas. -The following code snippets demonstrate how to define and configure multiple dependencies: +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + ParentID="ParentID"> @@ -313,29 +313,32 @@ The following code snippets demonstrate how to define and configure multiple dep { TaskCollection = new List { - new TaskData { TaskId = 1, TaskName = "Project Kickoff", StartDate = new DateTime(2023, 04, 02), Duration = "2", Progress = 20 }, - new TaskData { TaskId = 2, TaskName = "Planning", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 40, ParentId = 1 }, - new TaskData { TaskId = 3, TaskName = "Design", StartDate = new DateTime(2023, 04, 09), Duration = "2", ParentId = 1 }, - new TaskData { TaskId = 4, TaskName = "Implementation", StartDate = new DateTime(2023, 04, 13), Duration = "3", ParentId = 1 }, - new TaskData { TaskId = 5, TaskName = "Testing", StartDate = new DateTime(2023, 04, 18), Duration = "2", ParentId = 1 }, - new TaskData { TaskId = 6, TaskName = "Review", StartDate = new DateTime(2023, 04, 20), Duration = "2", Predecessor = "4FS,5SS" } + new TaskData { TaskID = 1, TaskName = "Project Kickoff", StartDate = new DateTime(2023, 04, 04), Duration = "2", Progress = 20 }, + new TaskData { TaskID = 2, TaskName = "Planning", StartDate = new DateTime(2023, 04, 04), Duration = "3", Progress = 40, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Design", StartDate = new DateTime(2023, 04, 10), Duration = "2", ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Implementation", StartDate = new DateTime(2023, 04, 13), Duration = "3", ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Testing", StartDate = new DateTime(2023, 04, 18), Duration = "2", ParentID = 1 }, + new TaskData { TaskID = 6, TaskName = "Review", StartDate = new DateTime(2023, 04, 18), Duration = "2", Predecessor = "4FS,5SS" } }; } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public string Predecessor { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` -![Blazor Gantt Chart displays Multiple Task Dependencies](images/blazor-gantt-chart-multiple-task-dependencies.png) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBotkhoAMkvqVvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} In this example, the "Review" task starts after the "Implementation" task finishes (Finish-to-Start relationship) and starts simultaneously with the "Testing" task (Start-to-Start relationship). @@ -345,21 +348,26 @@ The Gantt Chart automatically renders dependency lines between related tasks. Th ## Customizing dependency appearance -The Gantt Chart includes styling options that enable you to customize the appearance of dependency lines. The [ConnectorLineBackground](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ConnectorLineBackground) property allows you to set the color of the connector lines using CSS color values, such as "#ff00ff". Additionally, the [ConnectorLineWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ConnectorLineWidth) property lets you adjust the thickness of these lines in pixels, defaulting to 1 pixel. These properties are designed to enhance the visual clarity and appeal of task dependencies within the chart. +To customize the appearance of dependency lines in the Gantt Chart: + +- Use the [ConnectorLineBackground](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ConnectorLineBackground) property to set the line color using CSS values (e.g., `#ff00ff`). +- Use the [ConnectorLineWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ConnectorLineWidth) property to define the line thickness in pixels (default is `1`). + +These properties help visually distinguish task relationships and improve chart readability. -Here is a code snippet that shows how to modify the color of dependency lines: +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + ParentID="ParentID"> @code { @@ -369,28 +377,32 @@ Here is a code snippet that shows how to modify the color of dependency lines: { TaskCollection = new List { - new TaskData { TaskId = 1, TaskName = "Research Phase", StartDate = new DateTime(2023, 05, 01) }, - new TaskData { TaskId = 2, TaskName = "Literature Review", StartDate = new DateTime(2023, 05, 01), Duration = "4", Progress = 50, ParentId = 1 }, - new TaskData { TaskId = 3, TaskName = "Data Collection", StartDate = new DateTime(2023, 05, 05), Duration = "3", Progress = 0, Predecessor = "2FS", ParentId = 1 }, - new TaskData { TaskId = 4, TaskName = "Concurrent Task Preparation", StartDate = new DateTime(2023, 05, 11), Duration = "3", Progress = 0, Predecessor = "3SS" }, - new TaskData { TaskId = 5, TaskName = "Data Analysis", StartDate = new DateTime(2023, 05, 14), Duration = "3", Progress = 0, Predecessor = "4FF" }, - new TaskData { TaskId = 6, TaskName = "Report Writing", StartDate = new DateTime(2023, 05, 18), Duration = "4", Progress = 0, Predecessor = "5SF" } + new TaskData { TaskID = 1, TaskName = "Research Phase", StartDate = new DateTime(2023, 05, 01) }, + new TaskData { TaskID = 2, TaskName = "Literature Review", StartDate = new DateTime(2023, 05, 01), Duration = "4", Progress = 50, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Data Collection", StartDate = new DateTime(2023, 05, 05), Duration = "3", Progress = 0, Predecessor = "2FS", ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Concurrent Task Preparation", StartDate = new DateTime(2023, 05, 05), Duration = "3", Progress = 0, Predecessor = "3SS" }, + new TaskData { TaskID = 5, TaskName = "Data Analysis", StartDate = new DateTime(2023, 05, 05), Duration = "3", Progress = 0, Predecessor = "4FF" }, + new TaskData { TaskID = 6, TaskName = "Report Writing", StartDate = new DateTime(2023, 05, 01), Duration = "4", Progress = 0, Predecessor = "5SF" } }; } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public string Predecessor { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBIjaVygrWoZlhs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} Additionally, you can modify the colors of the dependency lines and arrows using CSS for better visualization: @@ -405,7 +417,6 @@ Additionally, you can modify the colors of the dependency lines and arrows using } ``` -![Blazor Gantt Chart displays Customizing Dependency Appearance](images/blazor-gantt-chart-dependency-appearance.png) This customization makes the dependency lines and arrows red and thicker for better visibility in the Gantt Chart. @@ -448,4 +459,4 @@ For more advanced topics related to task dependencies and project management in 5. [Timeline](https://blazor.syncfusion.com/documentation/gantt-chart/time-line): Understand how to customize the timeline view to better visualize your project schedule and dependencies. -For more detailed information and advanced usage scenarios, refer to the [Syncfusion® Blazor Gantt Chart documentation](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started). +For more detailed information and advanced usage scenarios, refer to the [Syncfusion® Blazor Gantt Chart documentation](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started). \ No newline at end of file diff --git a/blazor/gantt-chart/virtualization.md b/blazor/gantt-chart/virtualization.md index c9772c7b54..8b215573c6 100644 --- a/blazor/gantt-chart/virtualization.md +++ b/blazor/gantt-chart/virtualization.md @@ -9,20 +9,22 @@ documentation: ug # Virtualization in Blazor Gantt Chart Component -Gantt Chart allows you to load a large amount of data without performance degradation. +Virtual scrolling in the Blazor Gantt Chart improves performance by rendering only visible rows, columns, and timeline segments, reducing DOM operations for large datasets or extended timelines. Row virtualization handles large task volumes (e.g. displaying 10,000 tasks in a project), timeline virtualization loads timeline cells on-demand during horizontal scrolling (e.g. navigating multi-year timelines), and column virtualization renders only the columns currently in view. These techniques enable efficient and scalable project management. -## Row virtualization +## Configure row virtualization -The `EnableRowVirtualization` property allows you to render only the rows that are visible in the content viewport at load time. Rows are loaded while scrolling vertically, which optimizing memory usage by rendering only the rows that are visible, resulting in faster rendering and scrolling and efficiently handling large datasets in your Gantt chart without sacrificing performance or user experience. To enable row virtualization using this API, simply set [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) to true. +Row virtualization, enabled by setting [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) to **true**, renders only tasks visible in the Gantt’s viewport, determined by the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height) property in pixels (e.g., “450px”). All tasks are fetched initially but rendered on-demand during vertical scrolling, reducing load times for large datasets. For example, a project with 10,000 tasks renders only the 50 visible tasks, improving performance. Ensure the `Height` property is set explicitly to control the viewport size. -The number of records displayed in the Gantt chart is determined implicitly by the height of the content area. +The following example enables row virtualization for a large dataset: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```csharp @using Syncfusion.Blazor.Gantt - + @@ -34,13 +36,12 @@ The number of records displayed in the Gantt chart is determined implicitly by t - + @code { private SfGantt Obj { get; set; } - private string DateFormat = "MM/dd/yyyy"; private DateTime ProjectStartDate = new DateTime(2000, 1, 1); private DateTime ProjectEndDate = new DateTime(2025, 12, 31); private bool autoCalculateDateScheduling = false; @@ -91,7 +92,7 @@ The number of records displayed in the Gantt chart is determined implicitly by t Assignee = assignee[j - 1], Reporter = reporter[j - 1], Progress = 50, - ParentId = Parent.ID, + ParentID = Parent.ID, }); } } @@ -108,14 +109,20 @@ The number of records displayed in the Gantt chart is determined implicitly by t public string Assignee { get; set; } public string Reporter { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public string Predecessor { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBeDasmfrkOvUON?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Managing records count + + By default, the number of records rendered per page will be twice the Gantt chart's height. You can customize the row rendering count using the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_PageSize) and [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_OverscanCount) properties. Here's an explanation of these properties: * `PageSize`: @@ -125,13 +132,15 @@ By default, the number of records rendered per page will be twice the Gantt char • The `OverscanCount` property is used to render additional rows before and after the Gantt Chart's current page rows. • During both virtual scrolling and initial rendering, extra rows are rendered to provide a buffer around the current page area. This minimizes the need for frequent rendering during scrolling, providing a smoother user experience. -```csharp +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -201,7 +210,7 @@ By default, the number of records rendered per page will be twice the Gantt char Assignee = assignee[j - 1], Reporter = reporter[j - 1], Progress = rand.Next(100), - ParentId = Parent.ID, + ParentID = Parent.ID, Predecessor = j > 1 ? (x - 1) + "FS" : "" }); } @@ -219,27 +228,28 @@ By default, the number of records rendered per page will be twice the Gantt char public string Assignee { get; set; } public string Reporter { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public string Predecessor { get; set; } } } -``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLKWMBZrKaVXJhQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% endhighlight %} +{% endtabs %} -## Column virtualization +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBSjuWwppImKWKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Column virtualization allows you to load more columns with high performance. It renders only the columns in the viewport, while other columns render on-demand during horizontal scrolling. +## Configure column virtualization -To enable the column virtualization, set the [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableColumnVirtualization) properties as **true**. +Column virtualization, enabled by setting [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableColumnVirtualization) to **true**, renders only the columns visible in the viewport while other columns are loaded on-demand during horizontal scrolling. This approach ensures high-performance rendering when working with a large number of columns. -```csharp +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + @@ -285,7 +295,7 @@ To enable the column virtualization, set the [EnableRowVirtualization](https://h ProjectEndDate = new DateTime(2022, 1, 13), ProjectDuration = "10", ProjectProgress = 50, - ParentId = null, + ParentID = null, Predecessor = null, }; DataCollection.Add(Parent); @@ -300,7 +310,7 @@ To enable the column virtualization, set the [EnableRowVirtualization](https://h ProjectEndDate = new DateTime(2022, 1, 13), ProjectDuration = "10", ProjectProgress = 50, - ParentId = Parent.ProjectId, + ParentID = Parent.ProjectId, Predecessor = i + "FS", Field1 = Names[name], FIELD2 = 1967 + 10, @@ -328,7 +338,7 @@ To enable the column virtualization, set the [EnableRowVirtualization](https://h public DateTime? ProjectEndDate { get; set; } public string ProjectDuration { get; set; } public int ProjectProgress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public string Predecessor { get; set; } public string Field1 { get; set; } public int FIELD2 { get; set; } @@ -344,23 +354,28 @@ To enable the column virtualization, set the [EnableRowVirtualization](https://h public int Field12 { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDryXYCmpzdIEKPs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> Column's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width) is required for column virtualization. If the column's width is not defined, then the Gantt Chart will consider its value as **150px**. -![Blazor GanttChart with cloumn virtualization](./images/Column_Virtual.gif) +## Configure Timeline Virtualization -## Timeline virtualization +Timeline virtualization, enabled by setting [EnableTimelineVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableTimelineVirtualization) to **true**, initially renders twice times the width of the Gantt element and loads additional timeline cells on demand during horizontal scrolling. This improves performance for wide timelines, such as multi-year projects, by rendering only the visible segments. The rendering behavior depends on `TimelineSettings`, which defines the scale (e.g., monthly or daily tiers). -Timeline virtualization allows you to load data sources having a large timespan with high performance. Initially, it renders the timeline with twice the width of the gantt element, while other timeline cells render on-demand during horizontal scrolling. To enable timeline virtualization using this API, simply set [EnableTimelineVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableTimelineVirtualization) to true. +The following example enables timeline virtualization for a wide timeline: -```csharp +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + If an Interactivity Location is set to `Global` and the **Render Mode** is se * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} diff --git a/blazor/installation/install-nuget-packages.md b/blazor/installation/install-nuget-packages.md index 5adbf2b4b5..5ae692d06d 100644 --- a/blazor/installation/install-nuget-packages.md +++ b/blazor/installation/install-nuget-packages.md @@ -28,7 +28,7 @@ The NuGet **Package Manager UI** allows you to search, install, uninstall, and u 2. The Manage NuGet Packages window will open. Navigate to the **Browse** tab, then search for the Syncfusion® Blazor NuGet packages using a term like **"Syncfusion® Blazor"** and select the appropriate Syncfusion® Blazor NuGet package for your development. - N> The [nuget.org](https://api.nuget.org/v3/index.json) package source is selected by default. If Visual Studio does not have nuget.org configured, follow the instructions in the [Microsoft documents](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-visual-studio#package-sources) to set up the nuget.org feed URL. + N> The [nuget.org]([nuget.org](https://api.nuget.org/v3/index.json)) package source is selected by default. If Visual Studio does not have nuget.org configured, follow the instructions in the [Microsoft documents](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-visual-studio#package-sources) to set up the nuget.org feed URL. ![Search for Syncfusion Blazor packages in the Browse tab](images/NuGetsearch.png) diff --git a/blazor/listbox/getting-started.md b/blazor/listbox/getting-started.md index 8d19a9687a..462d935aa1 100644 --- a/blazor/listbox/getting-started.md +++ b/blazor/listbox/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor ListBox Component -This section briefly explains about how to include [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide explains how to add the [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code. -To get start quickly with ListBox Component using Blazor, check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListBox) sample: +To get started quickly with the ListBox component in Blazor, watch the following video or explore the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListBox) sample: {% youtube "youtube:https://www.youtube.com/watch?v=-nZ1n8zFIPI"%} @@ -26,11 +26,11 @@ To get start quickly with ListBox Component using Blazor, check on this video or ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.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-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -To add **Blazor ListBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor ListBox** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and then restore packages. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now register the Syncfusion® Blazor service in **~/Program.cs** of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -129,7 +129,7 @@ await builder.Build().RunAsync(); ## 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 `` section of the **~/index.html** file. +The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references to the `` section of **~/index.html**: ```html @@ -138,11 +138,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to 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. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods to reference themes ([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 script references, refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor ListBox component -Add the Syncfusion® Blazor ListBox component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor ListBox component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -154,7 +154,7 @@ Add the Syncfusion® Blazor ListBox componen ## Binding data source -After initializing, populate the ListBox with data using the `DataSource` property. Here, an array of object values is passed to the ListBox component. +After initialization, populate the ListBox using the `DataSource` property. In the following example, an array of objects is bound and fields are mapped via `ListBoxFieldSettings`. {% tabs %} {% highlight razor %} @@ -183,14 +183,14 @@ After initializing, populate the ListBox with data using the `DataSource` proper {% endhighlight %} {% endtabs %} -N> `TValue` is the type of value in the datasource to resolve type inference. It is generic type and can be given as string[], int[]. +N> `TValue` specifies the value type of the data source for type inference. It is a generic type and can be specified as string[], int[], and so on. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ListBox component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor ListBox component will render in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhJNsLEzexthhCN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListBox Component](./images/blazor-listbox.png)" %} ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [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-web-app) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/multicolumn-combobox/getting-started.md b/blazor/multicolumn-combobox/getting-started.md index 2126841eb9..14c35e958d 100644 --- a/blazor/multicolumn-combobox/getting-started.md +++ b/blazor/multicolumn-combobox/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor MultiColumn ComboBox Component -This section briefly explains about how to include [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide explains how to include the [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get started quickly with Blazor MultiColumn ComboBox component, you can check out below video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiColumnComboBox) sample. +To get started quickly with the Blazor MultiColumn ComboBox component, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiColumnComboBox). {% youtube "https://www.youtube.com/watch?v=2B5ctnHw4vk" %} @@ -25,11 +25,11 @@ To get started quickly with Blazor MultiColumn ComboBox component, you can check ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.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-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor MultiColumnComboBox and Themes NuGet in the App -To add **Blazor MultiColumn ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the Blazor MultiColumn ComboBox component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -52,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -69,9 +69,9 @@ cd BlazorApp ## Install Syncfusion® Blazor MultiColumnComboBox and Themes NuGet in the App -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +- Press Ctrl+` to open the integrated terminal in Visual Studio Code. +- Ensure the current directory contains the project `.csproj` file. +- Run the following commands to install [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore packages. {% tabs %} @@ -85,7 +85,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -93,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -104,7 +104,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now register the Syncfusion® Blazor service in **~/Program.cs** for the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -128,7 +128,7 @@ await builder.Build().RunAsync(); ## 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 `` section of the **~/index.html** file. +Access the theme stylesheet and script from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references in the `` section of **~/index.html**. ```html @@ -137,11 +137,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to 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. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to reference themes ([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 script reference options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor MultiColumn ComboBox component -Add the Syncfusion® Blazor MultiColumn ComboBox component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor MultiColumn ComboBox component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -151,7 +151,7 @@ Add the Syncfusion® Blazor MultiColumn Comb {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor MultiColumn ComboBox component in your default web browser. +- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor MultiColumn ComboBox component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hthpNuiEUXUBXNYa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox Component](./images/blazor-multicolumncombobox-component.png)" %} @@ -195,7 +195,7 @@ After initialization, populate the MultiColumn ComboBox with data using the [Dat ## Configuring the Columns -The MultiColumn ComboBox supports auto-generating columns, which simplifies the process by automatically creating columns based on the data source. Additionally, you can customize the column header text to reflect specific data, adjust the column [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Width) for optimal display, and set the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_TextAlign) (left, center, or right) to enhance readability. +The MultiColumn ComboBox supports auto-generating columns, which automatically creates columns based on the data source. You can also customize the column header text to reflect specific data, adjust [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Width) for optimal display, and set [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_TextAlign) (left, center, or right) to enhance readability. {% tabs %} {% highlight razor %} @@ -215,7 +215,7 @@ The MultiColumn ComboBox supports auto-generating columns, which simplifies the ## Configuring the popup list -By default, the width of the popup list automatically adjusts to match the width of the MultiColumn ComboBox input element, and the height is set to `350px`. Both the height and width of the popup list can be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupWidth) properties, respectively. +By default, the popup list automatically matches the width of the MultiColumn ComboBox input element, and the height is set to `350px`. Customize both using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupWidth) properties. {% tabs %} {% highlight razor %} @@ -229,6 +229,6 @@ By default, the width of the popup list automatically adjusts to match the width ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/toast/getting-started.md b/blazor/toast/getting-started.md index a15dab006e..704bd51621 100644 --- a/blazor/toast/getting-started.md +++ b/blazor/toast/getting-started.md @@ -91,7 +91,7 @@ Open `~/_Imports.razor` and import the `Syncfusion.Blazor` and `Syncfusion.Blazo Register the Syncfusion® Blazor service in `~/Program.cs` of the Blazor WebAssembly app: {% tabs %} -{% highlight c# tabtitle="~/Program.cs" hl_lines="3 11" %} +{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; diff --git a/blazor/treegrid/editing/batch-editing.md b/blazor/treegrid/editing/batch-editing.md index d58c6a0c10..8e26f07774 100644 --- a/blazor/treegrid/editing/batch-editing.md +++ b/blazor/treegrid/editing/batch-editing.md @@ -153,4 +153,4 @@ The following GIF shows the confirmation dialog displayed during batch operation N> - Batch mode stages edits on the client. Click Update on the toolbar or save programmatically to commit changes; Cancel discards staged edits. - A primary key column (IsPrimaryKey=true) is required for editing. -- Confirmation dialogs are available only when the TreeGridEditSettings Mode is set to **Batch**. If ShowConfirmDialog is false, no confirmation dialog is shown for save; use ShowDeleteConfirmDialog to control delete confirmations separately. \ No newline at end of file +- Confirmation dialogs are available only when the TreeGridEditSettings Mode is set to **Batch**. If ShowConfirmDialog is false, no confirmation dialog is shown for save; use ShowDeleteConfirmDialog to control delete confirmations separately. diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index 9a5d274b0f..b9db0c60a4 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -547,3 +547,4 @@ The following code example shows how to use the [OnActionFailure](https://help.s * [Getting Started with Syncfusion® ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc) + diff --git a/blazor/visual-studio-code-integration/upgrade-project.md b/blazor/visual-studio-code-integration/upgrade-project.md index 14dc7c649e..b081715e76 100644 --- a/blazor/visual-studio-code-integration/upgrade-project.md +++ b/blazor/visual-studio-code-integration/upgrade-project.md @@ -1,7 +1,7 @@ --- layout: post title: Upgrade a project to the latest version | Syncfusion -description: Learn here about how to upgrade a project to the latest version using the Syncfusion Blazor extension for Visual Studio Code. Explore to more details. +description: Learn here about how to upgrade the project to the latest version using the Syncfusion Blazor extension for Visual Studio Code. Explore to more details platform: Blazor control: Common documentation: ug