diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md index 2bb14059a5..4f0228b3b1 100644 --- a/blazor/button/getting-started-with-web-app.md +++ b/blazor/button/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Button Component in Blazor Web App description: Checkout and learn about the documentation for getting started with Blazor Button Component in Blazor Web App. platform: Blazor -component: Button +control: Button documentation: ug --- # Getting Started with Blazor Button Component in Blazor Web App -This section briefly explains about how to include [Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains how to include the [Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Button](https://www.s ## 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 a Blazor Web Application. ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor Button** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Button** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) 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 you use `WebAssembly` or `Auto` render modes in the Blazor Web App, install the Syncfusion® Blazor component NuGet packages in the client project. -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.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 %} @@ -54,9 +54,9 @@ 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 a Blazor Web Application. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -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 more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Buttons 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 you use `WebAssembly` or `Auto` render modes in the Blazor Web App, 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) 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 your `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and ensure all dependencies are installed. {% 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.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 %} @@ -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** in the client project. | +| Server | Open **~/Components/_Imports.razor** in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` 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(s) of your 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 of your 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`, your project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -189,11 +189,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> 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, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for different approaches to adding script references. ## Add Syncfusion® Blazor Button component -Add the Syncfusion® Blazor Button component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Button component in the **~/Pages/YourPage.razor** file. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the `~/Pages/YourPage.razor` component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Button component | | 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,7 +221,7 @@ 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 Button component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Button component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLftsrepgKpagFy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button Component](./images/blazor-button-component.png)" %} @@ -234,5 +234,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Button example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?) that shows you how to render and configure the button. - +N> You can also explore our [Blazor Button example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?) that shows you how to render and configure the button. \ No newline at end of file diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index aabee81635..45d3ac90a2 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor CheckBox Component in Web App -This section briefly explains about how to include [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) 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 CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) 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 CheckBox](https://www ## 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 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. ## Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web App -To add **Blazor CheckBox** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor CheckBox** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) 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 in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project. -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. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ 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 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. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -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 [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Buttons 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 in a Blazor Web App, install 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project directory containing the `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) 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. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details. {% 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 Components/_Imports.razor from the Client project. | +| Server | Open Components/_Imports.razor in the Server project (Components folder). | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` 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 `WebAssembly` or `Auto`, register the 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 `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## 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: +The theme stylesheet and script are provided via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `` and the script reference at the end of the `` in **~/Components/App.razor** as shown: ```html @@ -189,11 +189,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> Refer to [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) for Static Web Assets, CDN, and CRG options. See [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for script reference approaches. ## Add Syncfusion® Blazor CheckBox component -Add the Syncfusion® Blazor CheckBox 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 CheckBox component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component`, define a render mode at the top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor CheckBox compone | | 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 `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in `App.razor` by default. {% tabs %} {% highlight razor %} @@ -226,11 +226,11 @@ 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 CheckBox component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor CheckBox component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpNsLuinxRTsQp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CheckBox). +N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CheckBox). ## See also diff --git a/blazor/chip/customization.md b/blazor/chip/customization.md index 0987e3277b..a5292bb75c 100644 --- a/blazor/chip/customization.md +++ b/blazor/chip/customization.md @@ -9,19 +9,21 @@ documentation: ug # Customization in Blazor Chip Component -This section explains the customization of styles, leading icons, avatar, and trailing icons in Chip control. +This section explains how to customize the Chip component, including predefined styles, leading icons and avatars, trailing icons, and templates. ## Styles -The Chip control has the following predefined styles that can be defined using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_CssClass) property. +The Chip component provides predefined visual styles that can be applied using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_CssClass) property. Apply `CssClass` on: +- SfChip: to affect all chips in the list +- ChipItem: to style a specific chip | Class | Description | | -------- | -------- | | e-primary | Represents a primary chip. | | e-success | Represents a positive chip. | -| e-info | Represents an informative chip. | -| e-warning | Represents a chip with caution. | -| e-danger | Represents a negative chip. | +| e-info | Represents an informative chip. | +| e-warning | Represents a chip that requires caution. | +| e-danger | Represents a negative or destructive chip. | ```cshtml @using Syncfusion.Blazor.Buttons @@ -40,11 +42,13 @@ The Chip control has the following predefined styles that can be defined using t {% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKsrBcBIwnwbXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing Blazor Chip Styles](./images/blazor-chip-style.png) +![Customizing Blazor Chip styles with predefined variants](./images/blazor-chip-style.png) + +N> Multiple style classes can be combined (for example, `e-outline e-primary`) to achieve the desired appearance. ## Leading icon -You can add and customize the leading icon of chip using the [`LeadingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingIconCss) property. +Add and customize a leading icon for a chip using the [`LeadingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingIconCss) property. ```cshtml @using Syncfusion.Blazor.Buttons @@ -79,11 +83,13 @@ You can add and customize the leading icon of chip using the [`LeadingIconCss`]( {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLeDksEzbMVhnKc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing LeadingIcon of Blazor Chip](./images/blazor-chip-leading-icon.gif) +![Customizing the leading icon in a Blazor Chip](./images/blazor-chip-leading-icon.gif) + +N> Ensure that each icon has clear text content in the chip (`Text`) for accessible names. When using decorative icons, consider appropriate CSS background images and contrast. ## Avatar -You can add and customize the avatar of chip using the [`LeadingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingIconCss) property. +Display an avatar as the leading visual using the [`LeadingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingIconCss) property. ```csharp @@ -118,11 +124,11 @@ You can add and customize the avatar of chip using the [`LeadingIconCss`](https: {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrItusapbhiLdgI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +N> Avatars are typically circular thumbnails. Provide meaningful chip text or an `aria-label` if the avatar conveys essential context. ## Leading content -You can add and customize the avatar content of chip using the [`LeadingText`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingText) property. +Show text content inside the leading avatar area using the [`LeadingText`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_LeadingText) property (for example, user initials). ```cshtml @using Syncfusion.Blazor.Buttons @@ -138,12 +144,11 @@ You can add and customize the avatar content of chip using the [`LeadingText`](h ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VXrqCLrQrovxnFxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Avatar Text of Blazor Chip](./images/blazor-chip-avatar-content.gif) +![Customizing avatar text for a Blazor Chip](./images/blazor-chip-avatar-content.gif) ## Trailing icon -You can add and customize the trailing icon of chip using the [`TrailingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_TrailingIconCss) property. +Add and customize a trailing icon for a chip using the [`TrailingIconCss`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_TrailingIconCss) property (commonly used for secondary actions, such as delete). ```cshtml @using Syncfusion.Blazor.Buttons @@ -160,12 +165,13 @@ You can add and customize the trailing icon of chip using the [`TrailingIconCss` {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVUiBhwBekjUuOz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Customizing the trailing icon in a Blazor Chip](./images/blazor-chip-trailing-icon.png) -![Customizing Blazor Chip TrailingIcon](./images/blazor-chip-trailing-icon.png) +N> Deletable chips can also be configured using `EnableDelete="true"`. Ensure the trailing icon and delete affordance do not conflict. ## Outline chip -Outline chip has the border with the background transparent. It can be set using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_CssClass) property. +An outline chip has a visible border and a transparent background. Apply the outline style using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html#Syncfusion_Blazor_Buttons_SfChip_CssClass) property. ```cshtml @using Syncfusion.Blazor.Buttons @@ -181,15 +187,13 @@ Outline chip has the border with the background transparent. It can be set using ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VtVgshrQrokgrCJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor Outline Chip with Transparent Background](./images/blazor-outline-chip-transparent-background.gif) +![Blazor outline chips with transparent background](./images/blazor-outline-chip-transparent-background.gif) ## Template -The Chips Template property allows users to customize the layout and design of each chip. Users can include any custom HTML elements, icons, links, or additional content by specifying them in the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_Template) or as direct child content inside the [ChipItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem) of the SfChip component. +The ChipItem `Template` property enables full control over the chip’s layout and content. Custom HTML elements, icons, links, or additional content can be provided via the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem_Template) property or as direct child content of the [ChipItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChipItem.html#Syncfusion_Blazor_Buttons_ChipItem). -The following code example demonstrates how to customize the layout and design of chips by adding direct child content inside the `ChipItem`. +The following example customizes the layout and design by adding direct child content inside each `ChipItem`. ```cshtml @@ -248,4 +252,6 @@ The following code example demonstrates how to customize the layout and design o ``` -![Template in Blazor Chip component](./images/blazor-chip-template.png) \ No newline at end of file +![Using a custom template in the Blazor Chip component](./images/blazor-chip-template.png) + +N> When adding interactive elements (links, buttons) inside chip templates, ensure keyboard focus order, accessible names, and sufficient contrast are maintained. \ No newline at end of file diff --git a/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md b/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md index 47383e55f2..1d2a3abada 100644 --- a/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md +++ b/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md @@ -1,23 +1,25 @@ --- layout: post -title: Optimize Performance in Blazor WASM using AOT Compilation - Syncfusion -description: Check out the documentation for Optimize Performance using AOT Compilation in Blazor WebAssembly in Blazor +title: Optimize Blazor WASM performance with AOT compilation - Syncfusion +description: Enable AOT compilation in Blazor WebAssembly to improve performance, understand trade-offs, and review size versus performance considerations and more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Optimize Performance in Blazor WebAssembly using AOT Compilation +# Optimize Blazor WebAssembly performance with AOT compilation -This article explains how to improve the performance of **Blazor WebAssembly (WASM)** applications using **Ahead-of-Time (AOT) compilation**, specifically for applications using **Syncfusion® Blazor components**. +This article explains how to improve the performance of Blazor WebAssembly (WASM) Apps using **Ahead-of-Time (AOT) compilation**, including apps that use Syncfusion® Blazor components. ## AOT Compilation Overview -Blazor WebAssembly applications run entirely in the browser via WebAssembly. By default, the app’s .NET assemblies are downloaded and executed using a **Just-In-Time (JIT)** interpreter. However, enabling **AOT compilation** ahead of time converts the .NET Intermediate Language (IL) into native WebAssembly at build time, resulting in significant performance gains. +Blazor WebAssembly Apps run entirely in the browser via WebAssembly. By default, the app’s .NET assemblies are downloaded and executed using a **Just-In-Time (JIT)** interpreter. Enabling AOT compilation converts .NET Intermediate Language (IL) into native WebAssembly at build time, which can provide significant performance gains. ## Enable AOT Compilation -Follow the steps below to configure AOT for your Blazor WASM project. +Follow these steps to configure AOT for a Blazor WebAssembly App. + +**Prerequisites:** Target .NET 8 or later and publish in Release configuration. ### Step 1: Target .NET 8+ @@ -62,7 +64,7 @@ bin/Release/net8.0/publish/wwwroot/ --- ## Size vs Performance Tradeoff -The following table compares performance and size metrics for Blazor WebAssembly with and without AOT, using a Syncfusion® Grid with paging enabled. +The following sample metrics compare performance and size for Blazor WebAssembly with and without AOT, using a Syncfusion® Grid with paging enabled. | Metric | Without AOT | With AOT | |----------------------------|----------------------|----------------------| @@ -71,32 +73,32 @@ The following table compares performance and size metrics for Blazor WebAssembly | Bundle Size (Brotli) | ~114 MB | ~192 MB | | Memory Usage | Slightly lower | Slightly higher | -> [AOT compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-9.0#ahead-of-time-aot-compilation) increases the application size but significantly improves load time, interactivity and overall runtime performance in Blazor WebAssembly applications. +> [AOT compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot#ahead-of-time-aot-compilation) increases app size but can significantly improve load time, interactivity, and overall runtime performance in Blazor WebAssembly apps. --- ## Limitations -- **Longer Build Time:** AOT compilation is slower compared to standard builds. -- **Increased Bundle Size:** Final WebAssembly size is larger. -- **Higher Memory Usage:** While AOT improves performance, it may result in slightly higher memory usage at runtime due to native code execution. -- **Reduced Flexibility:** Dynamic features (e.g., reflection) may require additional handling. -- **More Complex Debugging:** Source map support is limited. -- **Slower Iterations:** Any code change needs full rebuild, affecting dev productivity. +- **Longer build time:** compared to standard builds. +- **Increased bundle size:** Final WebAssembly size is larger. +- **Higher memory usage:** While AOT improves performance, it may result in slightly higher memory usage at runtime due to native code execution. +- **Reduced flexibility:** Dynamic features (e.g., reflection) may require additional handling. +- **More complex debugging:** Source map support is limited. +- **Slower iterations:** Any code change needs full rebuild, affecting dev productivity. --- ## Considerations -- **Better Performance:** Native WebAssembly improves execution speed and UI responsiveness. -- **Enhanced Security:** Native code is harder to reverse-engineer than Intermediate Language code. -- **Cross-Platform Consistency:** Consistent behavior across browsers and devices. +- **Better performance:** Native WebAssembly improves execution speed and UI responsiveness. +- **Enhanced security:** Native code is harder to reverse-engineer than Intermediate Language code. +- **Cross-platform consistency:** Consistent behavior across browsers and devices. --- ## Specific Recommendations -To further reduce published output size, [enable linker and trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming) options in your `.csproj`: +To further reduce published output size, [enable linker and trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming) options in the `.csproj`. ```xml true diff --git a/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md b/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md index 06aed7ced6..1f1bdf8e16 100644 --- a/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md +++ b/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md @@ -1,23 +1,23 @@ --- layout: post -title: Reduce Size of Blazor WebAssembly Application - Syncfusion -description: Check out the documentation for reduce size of blazor webassembly application in blazor using various techniques +title: Reduce size of Blazor WebAssembly Applications - Syncfusion +description: Learn here all about how to reduce Syncfusion Blazor WebAssembly (WASM) App size using trimming and linker configuration. Explore here to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Reduce Size of Blazor WebAssembly Application +# Reduce size of Blazor WebAssembly Application -This article explains how to reduce the size of **Blazor WebAssembly (WASM)** applications. Although [Ahead-of-Time (AOT)](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-9.0#ahead-of-time-aot-compilation) compilation improves performance, it also increases the app size. To help reduce this, you can enable code trimming options in our projects. Trimming automatically removes unused code from the final output, which helps lower the bundle size without affecting functionality. This is especially helpful when using large projects. +This article explains how to reduce the size of **Blazor WebAssembly (WASM)** applications. Although [Ahead-of-Time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot#ahead-of-time-aot-compilation) improves performance, it also increases app size. To reduce size, enable code trimming options in projects. Trimming removes unused code from the final output, helping lower the bundle size without affecting functionality. ## Configure the Linker for ASP.NET Core Blazor -Blazor WebAssembly uses [Intermediate Language (IL) linking](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-9.0#trim-net-il-after-ahead-of-time-aot-compilation) to trim unused code from the final output during build. This process is **only enabled in Release builds** and is **disabled in Debug configuration** by default. To take full advantage of trimming and reduce the size of the published application, it is recommended to **build your app in Release mode** before deployment. +Blazor WebAssembly uses [Intermediate Language (IL) linking](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot#trim-net-il-after-ahead-of-time-aot-compilation) to trim unused code from the final output during build. This process is only enabled in Release builds and is disabled in Debug by default. To take full advantage of trimming and reduce the size of the published app, publish in Release mode before deployment. > Always publish your Blazor WebAssembly app using the `Release` configuration to enable trimming and optimize performance. -### Disable Intermediate Language Linking (Optional) +### Disable Intermediate Language linking (optional) To manually disable Intermediate Language linking, add the following MSBuild property in your `.csproj` file: @@ -28,7 +28,7 @@ To manually disable Intermediate Language linking, add the following MSBuild pro ``` ## Enable trimming -**PublishTrimmed** property enables code trimming for self-contained publishing.It automatically disables features that aren’t compatible with trimming and provides warnings about trimming conflicts during build. +The **PublishTrimmed** property enables code trimming for self-contained publishing. It automatically disables features that are not compatible with trimming and provides warnings about trimming conflicts during build. To [enable trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming), add the following to your `.csproj` file: @@ -40,11 +40,11 @@ To [enable trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/tri ## Trim mode -For all assemblies in a Blazor application, trimming is enabled by default from the.NET 8 target framework. Trim warnings may cause problems for applications that have previously used `PublishTrimmed=true` and `TrimMode=partial`. However, if your application compiles without any trim warnings, this default behavior shouldn't interfere with functionality or cause issues. For more information, refer to the [trim configuration](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/configure-trimmer?view=aspnetcore-9.0) documentation to achieve this. +For all assemblies in a Blazor application, trimming is enabled by default starting with the .NET 8 target framework. Trim warnings may occur for apps that previously used `PublishTrimmed=true` and `TrimMode=partial`. If the app compiles without trim warnings, this default behavior should not affect functionality. For more information, refer to the [trim configuration](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/configure-trimmer) documentation. ### To Resolve trim warnings -Partial trimming is less aggressive and may be safer for applications that use reflection. To ensure smooth builds, resolve all trim warnings in our application, make the below changes in our `.csproj` to resolve the trim warnings +Partial trimming is less aggressive and may be safer for applications that use reflection. To ensure smooth builds, resolve all trim warnings in the application. If needed, make the following change in the `.csproj` file: ```xml partial @@ -52,9 +52,9 @@ Partial trimming is less aggressive and may be safer for applications that use r ## Enable Link Trimming -To control **Intermediate Language (IL)** trimming on a per-assembly basis by supplying an XML configuration file. This approach allows you to explicitly preserve assemblies, types, or members that may be trimmed, even if they are not directly referenced in your application code. +Control Intermediate Language (IL) trimming on a per-assembly basis by supplying an XML configuration file. This approach allows explicitly preserving assemblies, types, or members that may be trimmed, even if they are not directly referenced in application code. -To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/prepare-libraries-for-trimming#enable-project-specific-trimming) in a Syncfusion® Blazor application, update the project file as shown below. This example demonstrates how to safely configure trimming using the Grid paging feature. +To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/prepare-libraries-for-trimming#enable-project-specific-trimming) in a Syncfusion® Blazor application, update the project file as shown below. This example demonstrates how to configure trimming using the Grid paging feature. #### How to Enable Intermediate Language Trimming Safely for Syncfusion® Blazor Grid @@ -107,7 +107,7 @@ To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dot ``` -3. Prevent Trimming of .NET Core Runtime Types. If your app uses reflection, LINQ expressions, or dynamic operations, consider including a LinkerConfig.xml to preserve critical system libraries. It is completely optional. +3. Prevent trimming of .NET runtime types. If the app uses reflection, LINQ expressions, or dynamic operations, consider including a LinkerConfig.xml to preserve critical system libraries (optional). ```xml diff --git a/blazor/common/how-to/add-blazor-component-to-the-toolbox.md b/blazor/common/how-to/add-blazor-component-to-the-toolbox.md index fb92846351..4bffcc612a 100644 --- a/blazor/common/how-to/add-blazor-component-to-the-toolbox.md +++ b/blazor/common/how-to/add-blazor-component-to-the-toolbox.md @@ -1,31 +1,32 @@ --- layout: post -title: Adding Blazor component to the toolbox - Syncfusion -description: Checkout and learn here all about the documentation for adding Syncfusion Blazor component to the toolbox in Blazor +title: Add Syncfusion Blazor components to the Toolbox | Syncfusion +description: Learn how to add the Syncfusion Blazor component snippets to the Visual Studio Toolbox in a Blazor project on Windows and explore here to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# How to add Syncfusion® Component to the toolbox in Blazor Application +# Add Syncfusion® Blazor components to the Visual Studio Toolbox -This section provides step-by-step guidance on how to add Syncfusion® Blazor components to the Visual Studio Toolbox. By default, the Toolbox displays HTML elements and Bootstrap snippets. To customize it for Blazor development, open the Toolbox by pressing `Ctrl + Alt + X` or by navigating to **View → Toolbox** from the top menu. +This guide explains how to add Syncfusion® Blazor component snippets to the Visual Studio Toolbox on Windows. By default, the Toolbox shows HTML elements and Bootstrap snippets. Open the Toolbox with Ctrl+Alt+X or navigate to **View → Toolbox**. To include Syncfusion® components for Blazor in the Toolbox, follow these steps: -1. Right-click anywhere within the Visual Studio Toolbox window, select **Add Tab** from the context menu. Enter a name for the new tab such as Syncfusion® Blazor Components and press Enter to create it. +1. Right-click anywhere within the Visual Studio Toolbox, select **Add Tab**, then name the tab (for example, "Syncfusion Blazor Components") and press Enter. ![Add new tab in toolbox](images/new-tab-toolbox.png) -2. In the code editor, **write or paste a Blazor component snippet**, such as the Syncfusion® SfCalendar. Once the code is in place, **select the entire code snippet**, then **drag and drop it** into the newly created tab in the Visual Studio Toolbox. +2. In the code editor, write or paste a Blazor component snippet (for example, the Syncfusion® `SfCalendar`). Select the entire snippet, then drag and drop it into the new tab in the Toolbox. ![Add code snippet to toolbox](images/add-snippet.gif) -3. Once the code snippet is added, the Toolbox will automatically assign it a default name based on the snippet content. -To improve clarity, right-click the item, select **Rename**, and enter a more descriptive name—such as **SfCalendar**. +3. After the snippet is added, the Toolbox assigns a default name. Right-click the item, select **Rename**, and enter a descriptive name (for example, "SfCalendar"). ![Update name](images/update-name.png) -4. After adding the component to the Toolbox, simply **drag the component from the Toolbox into your code editor** to seamlessly use it into your Blazor project. +4. Drag the component from the Toolbox into the code editor to insert the snippet into your Blazor project. + +N> Dragging a Toolbox item inserts code into the editor. Ensure required namespaces and services are present in the project (for example, `@using Syncfusion.Blazor` and registering Syncfusion services in Program.cs). ![Drag component to editor](images/drag-component.gif) diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index ecf66d95f5..06c344ca8e 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 %} @@ -252,4 +254,3 @@ 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) - diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 25fc1063fe..bea1f635a3 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about actions of annotation in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to create, add, remove, and update annotation for nodes and connectors in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,18 +9,18 @@ documentation: ug # Annotation in Blazor Diagram Component -The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a node or connector. +The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a single node or connector. -## How to Create Annotation +## How to Create an Annotation -An annotation can be added to a node or connector by defining the annotation object and adding it to the annotation collection of the node or connector. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the annotation defines the text to be displayed. +An annotation can be added to a node or connector by defining the annotation object and adding it to the `Annotation` collection of the parent object. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the annotation defines the text to be displayed. -To create and add annotation to Nodes and Connectors using the Blazor Diagram, refer to the below video link, +To create and add annotations to nodes and connectors using the Blazor Diagram, refer to the following video: {% youtube "youtube:https://www.youtube.com/watch?v=f7Jnl5hSy7I" %} -The following code explains how to create an annotation. +The following code example demonstrates how to create an annotation for a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -69,18 +69,20 @@ The following code explains how to create an annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjroijNRrQAsIOIt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) ![Blazor Diagram Node with Annotation](../images/blazor-diagram-node-with-annotation.png) -N>* [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) for each annotation should be unique and so it is further used to find the annotation at runtime and do any customization. -
* By default, node’s annotation positioned in center point of the shape. -
* By default, connector’s path annotation positioned in center point of its path. +N>* Each annotation's [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) should be unique. It can be used to find and customize the annotation at runtime. +
* By default, a node's annotation is positioned at the center of the shape. +
* By default, a connector’s path annotation positioned at the center of its path. >**Note:** Do not use underscores(_) for annotation's id. -## How to Add Annotation at Runtime +## How to Add an Annotation at Runtime -You can add an annotation at runtime to the Annotations collection of the node/connector in the diagram component by using the `Add` method. +An annotation can be added to the `Annotations` collection of a node or connector at runtime by using the `Add` method. The following code explains how to add an annotation to a node at runtime by using `Add` method. @@ -122,7 +124,9 @@ The following code explains how to add an annotation to a node at runtime by usi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIMjtxrwUyoCqW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) Also, the annotations can be added at runtime by using the [AddAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramObjectCollection-1.html#Syncfusion_Blazor_Diagram_DiagramObjectCollection_1_AddAsync__0_) method. The `await` operator suspends the evaluation of the enclosing async method until the asynchronous operation represented by its operand completes. @@ -136,13 +140,13 @@ public async void AddLabel() await(diagram.Nodes[0].Annotations as DiagramObjectCollection).AddAsync(annotation); } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) ![Adding Annotation in Blazor Diagram](../images/blazor-diagram-add-annotation.png) -## How to Remove Annotation at Runtime +## How to Remove an Annotation at Runtime -A collection of annotations can be removed from a node by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. +An annotation can be removed from a node or connector's `Annotations` collection by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -186,9 +190,11 @@ A collection of annotations can be removed from a node by using the `RemoveAt` m } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjByiXZHBwzKleyR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Also, a collection of annotations can be removed from the node by using the `Remove` method. +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) + +Also, The `Remove` method can also be used to remove a specific annotation object. ```cshtml // Method to remove annotation at runtime using Remove method. @@ -200,13 +206,13 @@ Also, a collection of annotations can be removed from the node by using the `Rem ``` N>* You can delete multiple annotations from a node to pass the collection of annotation objects as argument. -
* The `Add`, `Remove`, and `RemoveAt` methods are applicable for connectors too. +
* The `Add`, `AddAsync`, `Remove`, and `RemoveAt` methods are applicable for connectors too. -## How to Update Annotation at Runtime +## How to Update an Annotation at Runtime -You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. +An annotation can be updated at runtime by retrieving it from the node or connector's Annotations collection and modifying its properties. -The following code sample shows how the annotation of the node changed at runtime. +The following code sample shows how to change the content of a node's annotation at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -250,7 +256,9 @@ The following code sample shows how the annotation of the node changed at runtim } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBIitZxBcSXRxWo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) ## See also @@ -258,9 +266,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the annotation](./appearance) -* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) +* [How to animate connectors using annotation template in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotation template-in-angular-diagram ) * [How to dynamically create and connect diagram nodes with annotations via ports in syncfusion® blazor diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram)  -* [How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram?](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) +* [How to Prevent text Overflow and display excess Content on hover in a diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) -* [How to generate a hierarchical layout with annotation at runtime?](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file +* [How to generate a hierarchical layout with annotations at runtime](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file diff --git a/blazor/diagram/interaction.md b/blazor/diagram/interaction.md index 988f95ff85..ba96e062c7 100644 --- a/blazor/diagram/interaction.md +++ b/blazor/diagram/interaction.md @@ -1,7 +1,7 @@ --- layout: post title: Connector Interactions in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about connector interaction in Syncfusion Blazor Diagram component and much more details. +description: Checkout and learn here all about diagram interaction in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -11,16 +11,16 @@ documentation: ug ## Selection -[DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) provides a visual representation of selected elements. It behaves like a container and allows to update the size, position, and rotation angle of the selected elements through interaction and by using program. Single or multiple elements can be selected at a time. +[DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) provides the visual representation of selected elements. It behaves like a container and allows to update the size, position, and rotation angle of the selected elements through interaction or programmatic changes. Single or multiple elements can be selected at a time. ## How to Perform Single Selection -An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented. +Select an element by clicking it. A single click clears any previous selection and selects the clicked item. The following image shows the selected elements are visually represented. ![Single Selection in Blazor Diagram](images/blazor-diagram-single-selection.gif) -* While selecting the diagram elements, the following events can be used to do your customization. -* When selecting/unselecting the diagram elements, the following events get triggered and do customization on those events. +* Use the following events to customize selection behavior: +* When selecting or unselecting the diagram elements, the following events get triggered and do customization on those events. | Events | EventArgs | Description | |----------------|--------------|--------------| @@ -62,15 +62,17 @@ An element can be selected by clicking that element. During single click, all pr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSelectionEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLSMDtPLbKuecIg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSelectionEvent) ## How to Select a Group -When a child element of any group is clicked, its contained group is selected instead of the child element. With consecutive clicks on the selected element, the selection is changed from top to bottom in the hierarchy of the parent group to its children. +When a child element of a group is clicked, its contained group is selected instead of the child element. With consecutive clicks on the selected element, the selection is changed from top to bottom in the hierarchy of the parent group to its children. ## How to Perform Multiple Selection -Multiple elements can be selected with the following ways: +Multiple elements can be selected in the following ways: * Ctrl+Click @@ -84,11 +86,11 @@ Clicking and dragging the diagram area allows to create a rectangular region. Th The Diagram Element Highlighter feature enhances the selection process by visually distinguishing selected elements and indicating which elements are part of a selection when performing multiple selection actions. -* Rubber Band Selection: The first added diagram element will be highlighted with a 2px stroke width, while other selected elements will have a 1px stroke width. +* Rubber band selection: The first added diagram element will be highlighted with a 2px stroke width, while other selected elements will have a 1px stroke width. * Ctrl+Click: The first selected element will have a 2px stroke width, while other selected elements will have a 1px stroke width. -* Single Selection: The selection highlighter is not applicable. +* Single Selection: The selection highlighter does not apply. For more information about customizing the Diagram Element Highlighter, refer [Customize Highlights for Selected Diagram Elements](./style#how-to-customize-highlights-for-selected-diagram-elements). @@ -96,13 +98,13 @@ For more information about customizing the Diagram Element Highlighter, refer [C ## How to Select and Unselect Elements Using Program -The [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) and [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) methods help to select or clear the selection of the elements at runtime. +Use [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) to programmatically select elements and [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) methods help to select or clear the selection of the elements at runtime. Get the currently selected items from the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Connectors) collection of the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) property of the diagram model. ## How to Toggle Selection of Elements at Runtime -You can toggle the selection state of diagram elements, including nodes, connectors, groups, and swimlanes, by clicking on them at runtime. The [CanToggleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_CanToggleSelection) property in [DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) determines whether the selection state of a diagram element should toggle with a mouse click at runtime. By default, this property is set to false. +Toggle selection state of diagram elements, including nodes, connectors, groups, and swimlanes, by clicking on them at runtime. The [CanToggleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_CanToggleSelection) property in [DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) determines whether the selection state of a diagram element should toggle with a mouse click at runtime. By default, this property is set to false. In the following example, the node can be selected with the first click and unselected with the second click. ```cshtml @@ -132,7 +134,9 @@ In the following example, the node can be selected with the first click and unse } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/UnSelectSample) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLSiNDbBbpTKpzu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/UnSelectSample) ![Toggle Selection in Blazor Diagram](images/UnselectSample.gif) @@ -148,16 +152,16 @@ The [RubberBandSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.B **1. CompleteIntersect Mode** When RubberBandSelectionMode is set to [CompleteIntersect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RubberBandSelectionMode.html#Syncfusion_Blazor_Diagram_RubberBandSelectionMode_CompleteIntersect): -* Only elements that are completely covered by the rubber band selection rectangle are selected +* Only elements completely covered by the rubber band selection rectangle are selected * Elements that are partially intersected by the selection rectangle are excluded from selection * This provides precise selection control, ensuring only fully enclosed elements are selected **2. PartialIntersect Mode** When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RubberBandSelectionMode.html#Syncfusion_Blazor_Diagram_RubberBandSelectionMode_PartialIntersect): -* Elements that are partially intersected by the rubber band selection are included in the selection +* Elements partially intersected by the rubber band selection are included in the selection * Any element that touches or overlaps with the selection rectangle, even partially, gets selected -* his provides more flexible selection, making it easier to select multiple elements +* This provides more flexible selection, making it easier to select multiple elements. **Implementation Example** @@ -168,7 +172,7 @@ When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusio @using System.Collections.ObjectModel @using Syncfusion.Blazor.Buttons - + @functions { @@ -258,10 +262,12 @@ When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusio } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/RubberBandSelectionMode) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthysXZvLFILllHo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/RubberBandSelectionMode) ## Getting Current Selected Objects -You can access all currently selected elements through the diagram's SelectionSettings property. +Access all currently selected elements through the diagram's SelectionSettings property. The DiagramSelectionSettings provides access to: @@ -365,10 +371,13 @@ The DiagramSelectionSettings provides access to: } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CurrentSelection) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSsDjFhlxZSZvL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CurrentSelection) ### How to clone the selected nodes and connector at runtime -Clone is a virtual method of the node that is used to create a copy of a diagram object. After cloning, it is necessary to set a unique ID for the cloned nodes and connectors. The following code demonstrates how to clone selected nodes during runtime. + +Clone is a virtual method of the node used to create a copy of a diagram object. After cloning, it is necessary to set a unique ID for the cloned nodes and connectors. The following code demonstrates how to clone selected nodes during runtime. ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel @@ -377,7 +386,7 @@ Clone is a virtual method of the node that is used to create a copy of a diagram - + @functions { public string ID = "diagram"; @@ -570,11 +579,13 @@ Clone is a virtual method of the node that is used to create a copy of a diagram } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CloneSelectedItems) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVICNXlrlnvNlVu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CloneSelectedItems) ![Grouping in Blazor Diagram](images/CloneSelection.gif) ### How to Access and Modify Selected Nodes and Connectors at Runtime -You can access and update the properties of selected nodes and connectors using the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) API in Syncfusion® Blazor's [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html). This allows you to respond to user selections and dynamically modify diagram elements at runtime. The following code demonstrates how to access and modify the selected Node and selected connector during runtime. +Access and update the properties of selected nodes and connectors using the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) API in Syncfusion® Blazor's [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html). This allows to respond to user selections and dynamically modify diagram elements at runtime. The following code demonstrates how to access and modify the selected Node and selected connector during runtime. ``` @page "/" @using Syncfusion.Blazor.Diagram @@ -625,7 +636,9 @@ SelectionChanged="OnSelectionChanged"> } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SelectedElements) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBIMDNbBPcaeybR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SelectedElements) ## How to Drag Elements * An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements moves every selected element. @@ -671,7 +684,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramPositionEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLosXtvrPFdHwTo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramPositionEvent) For more information about dragging, refer [Node Drag](./nodes/interaction#how-to-drag-the-node) ## How to Resize Elements @@ -721,7 +736,9 @@ For more information about dragging, refer [Node Drag](./nodes/interaction#how-t } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSizeEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVostNPrvOZhuso?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSizeEvent) For more information about resizing, refer [Node Resize](./nodes/interaction#how-to-resize-the-node) @@ -775,7 +792,9 @@ N> While dragging and resizing, the objects are snapped towards the nearest obje } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramRotateEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBIiZZlhvYIDpvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramRotateEvent) For more information about resizing, refer [Node Rotate](./nodes/interaction#how-to-rotate-the-node) @@ -785,12 +804,12 @@ For more information about resizing, refer [Node Rotate](./nodes/interaction#how ## How to Adjust Connector End Point Handles -Source and target points of the selected connectors are represented by two handles. Clicking and dragging those handles help you to adjust the source and target points. +Source and target points of the selected connectors are represented by two handles. Clicking and dragging those handles helps to adjust the source and target points. For more information, refer [End Point Dragging](./connectors/interactions#end-point-dragging) -* If you drag the connector end points, then the following events can be used to do your customization. -* When you connect connector with ports/node or disconnect from it, the following events are triggered. +* Drag the connector end points, then the following events can be used to do your customization. +* Connect connector with ports or node or disconnect from it, the following events are triggered. | Events | EventArgs | Description | |----------------|--------------|--------------| @@ -869,7 +888,9 @@ For more information, refer [End Point Dragging](./connectors/interactions#end-p } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramConnectionEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLIiDDFLkXDqWqS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramConnectionEvent) ## How to Edit Straight Connector Segments @@ -951,7 +972,9 @@ For more information about straight segment editing, refer [Straight Segment Edi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SegmentEditing) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLoiNXFhEtTKrJy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SegmentEditing) For more information about orthogonal segment editing, refer [Orthogonal Segment Editing](./connectors/segments/orthogonal#orthogonal-segment-editing). @@ -966,7 +989,7 @@ User handles can be aligned relative to the node boundaries. It has [Margin](htt ## How to Position User Handle -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of a [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) is used to align the user handle based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of a [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) is used to align the user handle based on fractions. 0 represents top or left corner, 1 represents bottom or right corner, and 0.5 represents half of width or height. ## HHow to Align User Handles Based on Connector Boundary @@ -1023,15 +1046,17 @@ The diagram component notifies the mouse button clicked. For example, whenever t } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/MouseClick) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoWNtPgqsPzFca?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/MouseClick) ## How to Customize the Appearance of User Handle -The appearance of the user handle can be customized by using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Size), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BorderColor), [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BackgroundColor), [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Visible), [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathData), and [PathColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathColor) properties of the [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html). +The appearance of the user handle can be customized using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Size), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BorderColor), [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BackgroundColor), [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Visible), [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathData), and [PathColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathColor) properties of the [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html). ## How to Zoom and Pan the Diagram -* When a large diagram is loaded, only certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the diagram. +* When a large diagram is loaded, only certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the diagram. * The diagram can be zoomed in or out by using Ctrl + mouse wheel. ![Zoom Pan in Blazor Diagram](images/blazor-diagram-zoom-pan.gif) diff --git a/blazor/file-manager/amazon-S3-cloud-file-provider.md b/blazor/file-manager/amazon-S3-cloud-file-provider.md index fc3445200f..372730aaac 100644 --- a/blazor/file-manager/amazon-S3-cloud-file-provider.md +++ b/blazor/file-manager/amazon-S3-cloud-file-provider.md @@ -1,15 +1,15 @@ --- layout: post -title: Amazon S3 cloud Provider in Blazor File Manager Component | Syncfusion +title: Amazon S3 Cloud Provider in Blazor File Manager Component | Syncfusion description: Checkout and learn here all about Amazon S3 cloud file provider in Syncfusion Blazor File Manager component and more. platform: Blazor control: File Manager documentation: ug --- -# Amazon S3 cloud file provider +# Amazon S3 Cloud File Provider -The Amazon ***S3*** (*Simple Storage Service*) cloud file provider allows the users to access and manage a server hosted file system as collection of objects stored in the Amazon S3 Bucket. To get started, clone the [Amazon S3 File Provider](https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider) using the following command +The Amazon ***S3*** (*Simple Storage Service*) cloud file provider enables users to access and manage a server-hosted file system as a collection of objects stored in an Amazon S3 bucket. To get started, clone the [Amazon S3 File Provider](https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider) using the following command ``` @@ -17,9 +17,9 @@ git clone https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provi ``` -N> To learn more about creating and configuring an Amazon S3 bucket, refer to this [link](https://docs.aws.amazon.com/AmazonS3/latest/userguide/creating-buckets-s3.html). +N> To learn more about creating and configuring an Amazon S3 bucket, refer to the [link](https://docs.aws.amazon.com/AmazonS3/latest/userguide/creating-buckets-s3.html). -After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register Amazon S3 client account details like *awsAccessKeyId*, *awsSecretKeyId* and *awsRegion* details in **RegisterAmazonS3** method in the File Manager controller to perform the file operations. +After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register Amazon S3 client account details, including *awsAccessKeyId*, *awsSecretKeyId* and *awsRegion* details in **RegisterAmazonS3** method within the File Manager controller to enable file operations. ```csharp @@ -27,7 +27,7 @@ After cloning, open the project in Visual Studio and restore the NuGet packages. ``` -After registering the Amazon client account details, just build and run the project. Now, the project will be hosted in `http://localhost:{port}:{port}` and just mapping the **ajaxSettings** property of the File Manager component to the appropriate controller methods allows to manage the Amazon ***S3*** (*Simple Storage Service*) bucket's objects storage. +Once the Amazon client account details are registered, build and run the project. The application will be hosted at `http://localhost:{port}`. Map the `ajaxSettings` property of the File Manager component to the appropriate controller methods to manage the Amazon S3 bucket's object storage. ```cshtml @@ -45,8 +45,8 @@ After registering the Amazon client account details, just build and run the proj ``` -To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion® Blazor File Manager component using the Amazon S3 cloud file provider, you need to initialize the Amazon S3 cloud file provider in the controller. +To perform file operations such as read, create, rename, delete, get file details, search, copy, move, upload, download, and get image in the Syncfusion® Blazor File Manager component using the Amazon S3 cloud file provider, initialize the provider in the controller. -To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `AmazonS3ProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider/blob/master/Controllers/AmazonS3ProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository. +To set up a local service for these file operations, create a folder named `Controllers` in the server project. Add a new `.cs` file inside the `Controllers` folder and include the necessary file operations code from the `AmazonS3ProviderController.cs` available at this [GitHub link](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider/blob/master/Controllers/AmazonS3ProviderController.cs). Refer to the repository for details on all supported file operation methods. -N> To learn more about the file actions that can be performed with Amazon S3 Cloud File provider, refer to this [link](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider#key-features) \ No newline at end of file +N> For more information about the file actions available with the Amazon S3 Cloud File Provider, see the [feature list](https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider.git#key-features). \ No newline at end of file diff --git a/blazor/file-manager/getting-started-with-server-app.md b/blazor/file-manager/getting-started-with-server-app.md index 83e878e5ca..09a686c7aa 100644 --- a/blazor/file-manager/getting-started-with-server-app.md +++ b/blazor/file-manager/getting-started-with-server-app.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor File Manager Component in Server App -This section briefly explains about how to include [Blazor FileManager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor FileManager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component into a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. {% tabcontents %} @@ -23,7 +23,7 @@ This section briefly explains about how to include [Blazor FileManager](https:// ## Create a new Blazor App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. ## Install Syncfusion® Blazor File Manager and Themes NuGet in the App @@ -48,11 +48,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor Server App in Visual Studio Code -You can create a **Blazor Server 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +A **Blazor Server App** can be created 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). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). +Alternatively, a Server application can be created using the following command in the terminal (Ctrl+`): {% tabs %} @@ -68,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor File Manager 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. +* Ensure the current directory is the project root directory where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -91,7 +91,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,7 +114,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor FileManager and Themes NuGet in the App @@ -130,7 +130,7 @@ dotnet restore {% 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 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 with component details. {% endtabcontent %} @@ -151,7 +151,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Server App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} @@ -172,9 +172,9 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## 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 in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: +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 in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: ```html @@ -191,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> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. -## Add Blazor File Manager component +## Add Blazor File Manager Component -Add the Syncfusion® Blazor File Manager component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +Add the Syncfusion® Blazor File Manager component in the **~/Components/Pages/Home.razor** file. If an interactivity location is set to `per page/component`, define a render mode at the top of the `Home.razor` page. N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. @@ -228,7 +228,7 @@ Create a new folder named `Models` in the server project. Add the necessary mode To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder. -Make sure your controller `FileManagerController.cs` uses the model classes you've created. Import the model namespace at the top of your controller file +Make sure the controller `FileManagerController.cs` uses the model classes that were created. Import the model namespace at the top of the controller file. File Manager's base functions are available in the below namespace. ```cshtml @@ -327,7 +327,7 @@ app.UseRouting(); app.MapControllers(); ``` -This will configure and map the controller in your Blazor App. +This configures and maps the controller in the Blazor App. ## Create Web Server App @@ -349,9 +349,9 @@ Add the Syncfusion® Blazor File Manager com {% endhighlight %} {% endtabs %} -Add your required files and folders under the `wwwroot\Files` directory. -* In your project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project. -* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly. +Add required files and folders under the `wwwroot\Files` directory. +* In the project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of the server project. +* Inside the `wwwroot` directory, create a new folder named `Files`. This is used to store static files like images, documents, or other resources that are served directly. * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Manager component in your default web browser. ![Blazor File Manager Component](images/blazor-filemanager-component.png) diff --git a/blazor/file-manager/getting-started-with-wasm-app.md b/blazor/file-manager/getting-started-with-wasm-app.md index 5742e2c33e..2a13be0d20 100644 --- a/blazor/file-manager/getting-started-with-wasm-app.md +++ b/blazor/file-manager/getting-started-with-wasm-app.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor File Manager Component in WASM App -This section briefly explains about how to include [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component into a Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. {% tabcontents %} @@ -23,7 +23,7 @@ This section briefly explains about how to include [Blazor File Manager](https:/ ## 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-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +A **Blazor WebAssembly App** can be created using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). ## Install Syncfusion® Blazor File Manager and Themes NuGet in the App @@ -50,9 +50,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-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). +A **Blazor WebAssembly App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, a WebAssembly application can be created using the following command in the terminal (Ctrl+`): {% tabs %} @@ -68,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor File Manager 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. +* Ensure the current directory is the project root directory where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -91,7 +91,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,7 +114,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor FileManager and Themes NuGet in the App @@ -173,9 +173,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## 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). Reference the stylesheet and script in the `` of the main page as follows: +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 references within the `` section and script references in `` section of the **~/index.html** file. * For Blazor WebAssembly app, include it in the **~/index.html** file. @@ -183,12 +183,16 @@ 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. -## Add Blazor File Manager component +## Add Blazor File Manager Component Add the Syncfusion® Blazor File Manager component in the **~/Pages/Index.razor** file. @@ -212,7 +216,7 @@ Add the Syncfusion® Blazor File Manager com Create a new folder named `Models` in the server project. Add the necessary model files to this folder for handling file operations. Download the `PhysicalFileProvider.cs` and `Base` folder from this [repository](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/tree/master/Models) and place them in the Models folder. -## Create a new folder controller +## Create a New Folder Controller To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder. @@ -231,7 +235,7 @@ using Syncfusion.EJ2.FileManager.PhysicalFileProvider; File Manager supports the basic file actions like Read, Delete, Copy, Move, Get Details, Search, Rename, and Create New Folder. -For standalone Blazor WASM applications, you can use the service from this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/). For other types of applications like ASP hosted applications, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder and add the following code in that file. +For standalone Blazor WASM applications, a service from this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/) can be used. For other types of applications like ASP hosted applications, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder and add the following code in that file. {% tabs %} {% highlight cs tabtitle="Controllers/FileManagerController.cs" %} @@ -326,10 +330,11 @@ Add the Syncfusion® Blazor File Manager com {% endhighlight %} {% endtabs %} -Add your required files and folders under the `wwwroot\Files` directory. -* In your project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project. -* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Manager component in your default web browser. +Add required files and folders under the `wwwroot\Files` directory. + +* In the project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of the server project. +* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that are served directly. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Manager component in default web browser. ![Blazor File Manager Component](images/blazor-filemanager-component.png) diff --git a/blazor/file-manager/getting-started-with-web-app.md b/blazor/file-manager/getting-started-with-web-app.md index ce73a6b78c..5bbffb9161 100644 --- a/blazor/file-manager/getting-started-with-web-app.md +++ b/blazor/file-manager/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor File Manager Component in Web App -This section briefly explains about how to include [Blazor FileManager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor FileManager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. {% tabcontents %} @@ -19,11 +19,13 @@ This section briefly explains about how to include [Blazor FileManager](https:// * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## 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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +A **Blazor Web App** can be created 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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -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. +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) need to be configured while creating a Blazor Web Application. + +![Create Blazor Web App](images/blazor-create-web-app.png) ![Create Blazor Web App](images/blazor-create-web-app.png) @@ -31,9 +33,9 @@ You need to configure the corresponding [Interactive render mode](https://learn. To add **Blazor FileManager** 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.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) 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 `WebAssembly` or `Auto` render modes are used in the Blazor Web App, the Syncfusion Blazor components NuGet packages need to be installed within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -54,11 +56,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +## 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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +A **Blazor Web App** can be created 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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +The appropriate interactive render mode and interactivity location should be configured when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,11 +76,11 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor File Manager 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 `WebAssembly` or `Auto` render modes are used in the Blazor Web App, the Syncfusion® Blazor components NuGet packages need to be installed within 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.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the current directory is the project root directory where the `.csproj` file is located. +* Run the following command to install the [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -100,7 +102,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,7 +116,7 @@ dotnet --version Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +The appropriate interactive render mode and interactivity location should be configured when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: @@ -128,13 +130,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ## Install Syncfusion® Blazor FileManager and Themes NuGet in the App -Here's an example of how to add **Blazor FileManager** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add **Blazor FileManager** component to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install the [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -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 `WebAssembly` or `Auto` render modes are used in the Blazor Web App, the Syncfusion® Blazor components NuGet packages need to be installed within the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -167,9 +169,9 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, the Syncfusion® Blazor service must be registered in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -219,7 +221,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to 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> 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 a Blazor application. ## Add Syncfusion® Blazor File Manager component @@ -266,7 +268,7 @@ Create a new folder named `Models` in the server project. Add the necessary mode To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder. -Make sure your controller `FileManagerController.cs` uses the model classes you've created. Import the model namespace at the top of your controller file +Make sure the controller `FileManagerController.cs` uses the model classes that were created. Import the model namespace at the top of the controller file. File Manager's base functions are available in the below namespace. ```cshtml @@ -368,7 +370,7 @@ app.MapControllers(); ``` -This will configure and map the controller in your Blazor App. +This configures and maps the controller in the Blazor App. ## Create Web App @@ -396,7 +398,7 @@ Blazor supports different interactive modes for server-side rendering: * Interactive Server Render Mode: This mode allows Blazor components to be rendered on the server, sending the HTML to the client while maintaining interactive capabilities. It provides a balance between server-side processing and client-side responsiveness. -* To enable this mode, configure the `Program.cs` file in your Blazor project using the `AddInteractiveServerRenderMode` method. +* To enable this mode, configure the `Program.cs` file in the Blazor project using the `AddInteractiveServerRenderMode` method. ````cshtml builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); @@ -412,11 +414,11 @@ Define a render mode at top of the component, as follows: {% endhighlight %} {% endtabs %} -Add your required files and folders under the `wwwroot\Files` directory. +Add required files and folders under the `wwwroot\Files` directory. -* In your project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project. -* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Manager component in your default web browser. +* In the project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of the server project. +* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that are served directly. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor File Manager component in the default web browser. ![Blazor File Manager Component](images/blazor-filemanager-component.png) diff --git a/blazor/getting-started/blazor-web-app.md b/blazor/getting-started/blazor-web-app.md index d59932937c..ac69afd96a 100644 --- a/blazor/getting-started/blazor-web-app.md +++ b/blazor/getting-started/blazor-web-app.md @@ -129,7 +129,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -### Create a Blazor Web App using .NET CLI +## Create a Blazor Web App using .NET CLI Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). @@ -147,7 +147,7 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ### Install Syncfusion® Blazor Navigations and Themes NuGet in the App diff --git a/blazor/image-editor/annotation.md b/blazor/image-editor/annotation.md index 0df7350817..fe96d30b9c 100644 --- a/blazor/image-editor/annotation.md +++ b/blazor/image-editor/annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation with Blazor Image Editor Component | Syncfusion -description: Checkout the Annotation available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore annotation features in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,55 +9,53 @@ documentation: ug # Annotations in the Blazor Image Editor component -The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component allows adding annotations to the image, including text, freehand drawings, and shapes like rectangles, ellipses, arrows, paths, and lines. This gives the flexibility to mark up the image with notes, sketches, and other visual elements as needed. These annotation tools can help to communicate and share ideas more effectively. Users are allowed to draw multiple annotations simultaneously, enhancing creative flexibility. Furthermore, every action, including customizations, will be tracked in the undo/redo collection, ensuring a seamless user experience and making it easier to experiment with different designs. +The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports annotations including text, freehand drawings, and shapes such as rectangles, ellipses, arrows, paths, and lines. These tools enable effective visual markup for notes and sketches. Multiple annotations can be drawn simultaneously. All actions, including customizations, are tracked in the undo/redo collection to support iterative editing. ## Text annotation -Text annotation feature in the Blazor Image Editor component provides the capability to add and customize labels, captions, and other text elements directly onto the image. With this feature, you can easily insert text at specific locations within the image and customize various aspects of the text to meet your requirements. +The text annotation feature enables adding labels, captions, and other text elements directly on the image with customizable options. -You have control over the customization options including text content, font family, font style, font color, fill color, stroke color, stroke width and font size for the text annotation. +Customization options include text content, font family, font style, font color, fill color, stroke color, stroke width, and font size. ### Add a text -The [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method in the Blazor Image Editor component allows you to insert a text annotation into the image with specific customization options. This method accepts the following parameters: +The [DrawTextAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method inserts a text annotation into the image with specific customization options. Parameters: -* x - Specifies the x-coordinate of the text, determining its horizontal position within the image. +- x - Specifies the x-coordinate of the text, determining its horizontal position within the image. -* y - Specifies the y-coordinate of the text, determining its vertical position within the image. +- y - Specifies the y-coordinate of the text, determining its vertical position within the image. -* text - Specifies the actual text content to be added to the image. +- text - Specifies the actual text content to be added to the image. -* fontFamily - Specifies the font family of the text, allowing you to choose a specific typeface or style for the text. +- fontFamily - Specifies the font family of the text. -* fontSize - Specifies the font size of the text, determining its relative size within the image. +- fontSize - Specifies the font size of the text. -* bold - Specifies whether the text should be displayed in bold style. Set to true for bold text, and false for regular text. +- bold - Specifies whether the text is displayed in bold style. Set to true for bold text, and false for regular text. -* italic - Specifies whether the text should be displayed in italic style. Set to true for italic text, and false for regular text. +- italic - Specifies whether the text is displayed in italic style. Set to true for italic text, and false for regular text. -* color - Specifies the font color of the text, allowing you to define the desired color using appropriate color values or names. +- color - Specifies the font color of the text. -* isSelected: Specifies to show the text in the selected state. +- isSelected - Specifies whether the text is shown in the selected state. -* degree: Specifies the degree to rotate the text. +- degree - Specifies the degree to rotate the text. -* fillColor: Specifies the background color of the text. +- fillColor - Specifies the background color of the text. -* strokeColor: Specifies the outline color of the text annotation. +- strokeColor - Specifies the outline color of the text annotation. -* strokeWidth: Specifies the outline stroke width of the text annotation. +- strokeWidth - Specifies the outline stroke width of the text annotation. -* transformCollection: Specifies the transform collection of the text annotation. +- transformCollection - Specifies the transform collection of the text annotation. -* underline — Specifies whether the text should be underlined. +- underline - Specifies whether the text is underlined. -* strikethrough — Specifies whether the text should have a strikethrough. +- strikethrough - Specifies whether the text has a strikethrough. -By utilizing the `DrawTextAsync` method with these parameters, you can precisely position and customize text annotations within the image. This provides the flexibility to add labels, captions, or other text elements with specific font styles, sizes, and colors, enhancing the visual presentation and clarity of the image. +By using `DrawTextAsync`, text annotations can be precisely positioned and customized to enhance clarity and presentation. -Here is an example of adding a text in a button click using `DrawTextAsync` method. - -In the following example, you can using the DrawTextAsync method in the button click event. +Here is an example of adding a text in a button click using `DrawTextAsync`. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -101,13 +99,13 @@ In the following example, you can using the DrawTextAsync method in the button c } ``` -![Blazor Image Editor with Draw text an image](./images/blazor-image-editor-draw-text.png) +![Blazor Image Editor with text annotation](./images/blazor-image-editor-draw-text.png) ### Multiline text -The [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method in the Blazor Image Editor component is commonly used to insert text annotations into an image. If the provided text parameter contains a newline character (\n), the text will be automatically split into multiple lines, with each line appearing on a separate line in the annotation. +The [DrawTextAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method supports multiline text when the provided text contains newline characters (\n). Each line is rendered on a separate line in the annotation. -Here is an example of adding a multiline text in a button click using `DrawTextAsync` method. +Here is an example of adding a multiline text in a button click using `DrawTextAsync`. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -137,17 +135,15 @@ Here is an example of adding a multiline text in a button click using `DrawTextA } ``` -![Blazor Image Editor with Draw multiline text an image](./images/blazor-image-editor-draw-multiline-text.png) +![Blazor Image Editor with multiline text annotation](./images/blazor-image-editor-draw-multiline-text.png) ### Delete a text -The [`DeleteShapeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteShapeAsync_System_String_) method allows you to remove a text annotation from the Blazor Image Editor component. To use this method, you need to pass the [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html#Syncfusion_Blazor_ImageEditor_ShapeSettings_ID) of the annotation as a parameter. - -The `ID` is a unique identifier assigned to each text annotation within the Blazor Image Editor. It serves as a reference to a specific annotation, enabling targeted deletion of the desired text element. By specifying the `ID` associated with the text annotation you want to remove, you can effectively delete it from the image editor. +The [DeleteShapeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteShapeAsync_System_String_) method removes a text annotation by passing its [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html#Syncfusion_Blazor_ImageEditor_ShapeSettings_ID). -To retrieve the inserted text annotations, you can utilize the [`GetShapesAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetShapesAsync) method, which provides a collection of annotations represented by [`ShapeSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html). This method allows you to access and work with the annotations that have been inserted into the image. +The `ID` is a unique identifier assigned to each text annotation in the Image Editor and enables targeted deletion. The [GetShapesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetShapesAsync) method returns a collection of annotations represented by [ShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html). -Here is an example of deleting a text in a button click using `DeleteShapeAsync` method. +Here is an example of deleting a text in a button click using `DeleteShapeAsync`. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -183,15 +179,13 @@ Here is an example of deleting a text in a button click using `DeleteShapeAsync` } ``` -![Blazor Image Editor with Delete text an image](./images/blazor-image-editor-delete-text.png) +![Blazor Image Editor deleting a text annotation](./images/blazor-image-editor-delete-text.png) ### Customize font family and text color -The [`ShapeChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ShapeChanging) event in the Blazor Image Editor component is triggered when a text annotation is being modified or changed through the toolbar interaction. This event provides an opportunity to make alterations to the text's color and font family by adjusting the relevant properties. +The [ShapeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ShapeChanging) event triggers when a text annotation is modified through toolbar interaction. This event enables customization of text color and font family by updating the relevant properties. -By leveraging the `ShapeChanging` event, you can enhance the customization options for text annotations and provide a more tailored and interactive experience within the Image Editor component. - -Here is an example of changing the text color using the `ShapeChanging` event. +Here is an example of changing the text color and font family using `ShapeChanging`. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -218,19 +212,16 @@ Here is an example of changing the text color using the `ShapeChanging` event. } ``` -![Blazor Image Editor with Custom text an image](./images/blazor-image-editor-custom-text.png) - -### Add additional font family +![Blazor Image Editor with custom text styling](./images/blazor-image-editor-custom-text.png) -The [`ImageEditorFontFamily`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorFontFamily.html) option in the Blazor Image Editor component provides the flexibility to incorporate supplementary font families, expanding your options for text styling and ensuring a broader range of fonts can be utilized within your design or content. +### Add additional font families -This enhancement offers a more personalized and dynamic interaction, empowering users to tailor their text styles for a truly engaging editing experience. +The [ImageEditorFontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorFontFamily.html) option allows adding additional font families for broader text styling choices. -Here is an example of adding additional font family using the `ImageEditorFontFamily` options in an image editor component. +Here is an example of adding additional font families using `ImageEditorFontFamily`. ```cshtml @using Syncfusion.Blazor.ImageEditor -@using Syncfusion.Blazor.Buttons @@ -254,16 +245,13 @@ Here is an example of adding additional font family using the `ImageEditorFontFa } ``` -![Blazor Image Editor with Custom font family in an image](./images/blazor-image-editor-font.png) - -### Formatting Text with Bold, Italic, Underline, and Strikethrough - -The [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method in the Blazor Image Editor component allows you to insert a text annotation into the image with specific customization options. Applying these styles enhances the text by improving readability and emphasizing key information, where bold increases visual weight to highlight important points, italic adds a slanted emphasis or creative touch, underline draws a line beneath the text for clarity or separation, and strikethrough places a line through text to indicate removal or outdated content. These formatting options enable users to make their annotations more visually distinctive and effective in conveying information +![Blazor Image Editor with custom font family](./images/blazor-image-editor-font.png) +### Formatting text with bold, italic, underline, and strikethrough -Here is an example of adding a text in a button click using `DrawTextAsync` method. +The [DrawTextAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method inserts a text annotation with customization options. Bold increases visual weight to highlight important content, italic adds slanted emphasis, underline draws a line beneath text, and strikethrough indicates removal or outdated content. These options enhance readability and emphasis. -In the following example, you can using the DrawTextAsync method in the button click event. +Here is an example of adding a formatting text in a button click using `DrawTextAsync`. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -406,19 +394,19 @@ In the following example, you can using the DrawTextAsync method in the button c } ``` -![Blazor Image Editor with Draw text an image](./images/blazor-image-editor-formatting-text.png) +![Blazor Image Editor with formatted text](./images/blazor-image-editor-formatting-text.png) ## Freehand drawing -The Freehand Draw annotation tool in the Blazor Image Editor component is a versatile feature that allows users to draw and sketch directly on the image using mouse or touch input. This tool provides a flexible and creative way to add freehand drawings or annotations to the image. +The Freehand Draw annotation tool enables drawing and sketching directly on the image using mouse or touch input. -To enable or disable the freehand drawing option, the Blazor Image Editor component provides two methods: +Freehand drawing can be enabled or disabled using the following methods: -[`EnableFreehandDrawAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_EnableFreehandDrawAsync): This method is used to enable the freehand drawing option in the Image Editor. Once enabled, users can start drawing freely on the image using their mouse or touch input. +- [EnableFreehandDrawAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_EnableFreehandDrawAsync) - Enables freehand drawing. -[`DisableFreehandDrawAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DisableFreehandDrawAsync): This method is used to disable the freehand drawing option in the Image Editor. When disabled, users will no longer be able to perform freehand drawings on the image. +- [DisableFreehandDrawAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DisableFreehandDrawAsync) - Disables freehand drawing. -Here is an example of using the `EnableFreehandDrawAsync` and `DisableFreehandDrawAsync` methods in a button click event. +Here is an example of using `EnableFreehandDrawAsync` and `DisableFreehandDrawAsync` in button click events. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -450,15 +438,13 @@ Here is an example of using the `EnableFreehandDrawAsync` and `DisableFreehandDr } ``` -![Blazor Image Editor with Freehandraw](./images/blazor-image-editor-Freehanddraw.png) +![Blazor Image Editor with freehand drawing](./images/blazor-image-editor-Freehanddraw.png) -### Adjust a stroke width and color +### Adjust stroke width and color -The [`ShapeChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ShapeChanging) event in the Blazor Image Editor component is triggered when a freehand annotation is being modified or changed through the toolbar interaction. This event provides an opportunity to make alterations to the freehand annotation’s color and stroke width by adjusting the relevant properties. +The [ShapeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ShapeChanging) event triggers when a freehand annotation is modified through toolbar interaction. Use this event to update stroke color and stroke width. -By leveraging the `ShapeChanging` event, you can enhance the customization options for freehand annotations and provide a more tailored and interactive experience within the Blazor Image Editor component. - -Here is an example of changing the freehand draw stroke width and color using the `ShapeChanging` event. +Here is an example of changing the freehand draw stroke width and color using `ShapeChanging`. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -484,18 +470,13 @@ Here is an example of changing the freehand draw stroke width and color using th } ``` -![Blazor Image Editor with Adjust the stroke width and color](./images/blazor-image-editor-adjust-stroke-color.png) +![Blazor Image Editor adjusting stroke width and color](./images/blazor-image-editor-adjust-stroke-color.png) ### Delete a freehand drawing -The [`DeleteShapeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteShapeAsync_System_String_) method allows you to remove a freehand annotation from the Blazor Image Editor component. To use this method, you need to pass the [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html#Syncfusion_Blazor_ImageEditor_ShapeSettings_ID) of the annotation as a parameter. - -The `ID` is a unique identifier assigned to each freehand annotation within the Blazor Image Editor. It serves as a reference to a specific annotation, enabling targeted deletion of the desired text element. By specifying the `ID` associated with the text annotation you want to remove, you can effectively delete it from the image editor. - -To retrieve the inserted freehand drawings, you can utilize the [`GetShapesAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetShapesAsync) method, which provides a collection of annotations represented by [`ShapeSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html). This method allows you to access and work with the annotations that have been inserted into the image. - -Here is an example of deleting a freehand annotation in a button click using `DeleteShapeAsync` method. +The [DeleteShapeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteShapeAsync_System_String_) method removes a freehand annotation by passing its [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html#Syncfusion_Blazor_ImageEditor_ShapeSettings_ID). The `ID` uniquely identifies each freehand annotation and enables targeted deletion. The [GetShapesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetShapesAsync) method returns a collection of annotations represented by [ShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html). +Here is an example of deleting a freehand annotation in a button click using `DeleteShapeAsync`. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -527,113 +508,113 @@ Here is an example of deleting a freehand annotation in a button click using `De } ``` -![Blazor Image Editor with Delete Freehanddraw an image](./images/blazor-image-editor-delete-shape.png) +![Blazor Image Editor deleting a freehand drawing](./images/blazor-image-editor-delete-freehanddraw.jpg) ## Shape annotation -The Blazor Image Editor component provides the ability to add shape annotations to an image. These shape annotations include rectangles, ellipses, arrows, paths, and lines, allowing you to highlight, emphasize, or mark specific areas or elements within the image. +The Image Editor provides the ability to add shape annotations including rectangles, ellipses, arrows, paths, and lines. -### Add a rectangle /ellipse / line / arrow / path +### Add a rectangle / ellipse / line / arrow / path -The [`DrawRectangleAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRectangleAsync_System_Double_System_Double_System_Int32_System_Int32_System_Int32_System_String_System_String_System_Double_System_Boolean_System_Double_) method is used to draw rectangle in the Blazor Image Editor component. Rectangle annotations are valuable tools for highlighting, emphasizing, or marking specific areas of an image to draw attention or provide additional context. +The [DrawRectangleAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRectangleAsync_System_Double_System_Double_System_Int32_System_Int32_System_Int32_System_String_System_String_System_Double_System_Boolean_System_Double_) method draws a rectangle. -The `DrawRectangleAsync` method in the Image Editor component takes ten parameters to define the properties of the rectangle annotation: +Parameters: -* x: Specifies the x-coordinate of the top-left corner of the rectangle. +- x - Specifies the x-coordinate of the top-left corner. -* y: Specifies the y-coordinate of the top-left corner of the rectangle. +- y - Specifies the y-coordinate of the top-left corner. -* width: Specifies the width of the rectangle. +- width - Specifies the width of the rectangle. -* height: Specifies the height of the rectangle. +- height - Specifies the height of the rectangle. -* strokeWidth: Specifies the stroke width of the rectangle's border. +- strokeWidth - Specifies the stroke width of the border. -* strokeColor: Specifies the stroke color of the rectangle's border. +- strokeColor - Specifies the stroke color of the border. -* fillColor: Specifies the fill color of the rectangle. +- fillColor - Specifies the fill color of the rectangle. -* degree: Specifies the degree to rotate the rectangle. +- degree - Specifies the degree to rotate the rectangle. -* isSelected: Specifies to show the rectangle in the selected state. +- isSelected - Specifies whether the rectangle is shown in the selected state. -* borderRadius: Specifies the radius to apply border radius to rectangle. +- borderRadius - Specifies the radius to apply border radius to the rectangle. -The [`DrawEllipseAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawEllipseAsync_System_Double_System_Double_System_Double_System_Double_System_Double_System_String_System_String_System_Double_System_Boolean_) method in the Blazor Image Editor component is used to draw an ellipse. Ellipse annotations are valuable for highlighting, emphasizing, or marking specific areas of an image. +The [DrawEllipseAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawEllipseAsync_System_Double_System_Double_System_Double_System_Double_System_Double_System_String_System_String_System_Double_System_Boolean_) method draws an ellipse. -The `DrawEllipseAsync` method in the Image Editor component takes seven parameters to define the properties of the ellipse annotation: +Parameters: -* x: Specifies the x-coordinate of the center of the ellipse. +- x - Specifies the x-coordinate of the center of the ellipse. -* y: Specifies the y-coordinate of the center of the ellipse. +- y - Specifies the y-coordinate of the center of the ellipse. -* radiusX: Specifies the horizontal radius (radiusX) of the ellipse. +- radiusX - Specifies the horizontal radius of the ellipse. -* radiusY: Specifies the vertical radius (radiusY) of the ellipse. +- radiusY - Specifies the vertical radius of the ellipse. -* strokeWidth: Specifies the width of the ellipse's stroke (border). +- strokeWidth - Specifies the width of the ellipse stroke. -* strokeColor: Specifies the color of the ellipse's stroke (border). +- strokeColor - Specifies the color of the ellipse stroke. -* fillColor: Specifies the fill color of the ellipse. +- fillColor - Specifies the fill color of the ellipse. -* degree: Specifies the degree to rotate the ellipse. +- degree - Specifies the degree to rotate the ellipse. -* isSelected: Specifies to show the ellipse in the selected state. +- isSelected - Specifies whether the ellipse is shown in the selected state. -The [`DrawLineAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawLineAsync_System_Double_System_Double_System_Double_System_Double_System_Double_System_String_System_Boolean_) method is used to draw line in the Blazor Image Editor component. Line annotations are valuable for highlighting, emphasizing, or marking specific areas of an image. +The [DrawLineAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawLineAsync_System_Double_System_Double_System_Double_System_Double_System_Double_System_String_System_Boolean_) method draws a line. -The `DrawLineAsync` method in the Image Editor component takes seven parameters to define the properties of the ellipse annotation: +Parameters: -* startX - Specifies the x-coordinate of the start point. +- startX - Specifies the x-coordinate of the start point. -* startY - Specifies the y-coordinate of the start point. +- startY - Specifies the y-coordinate of the start point. -* endX - Specifies the x-coordinate of the end point. +- endX - Specifies the x-coordinate of the end point. -* endY - Specifies the y-coordinate of the end point. +- endY - Specifies the y-coordinate of the end point. -* strokeWidth - Specifies the stroke width of the line. +- strokeWidth - Specifies the stroke width of the line. -* strokeColor - Specifies the stroke color of the line. +- strokeColor - Specifies the stroke color of the line. -* isSelected: Specifies to show the line in the selected state. +- isSelected - Specifies whether the line is shown in the selected state. -The [`DrawArrowAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawArrowAsync_System_Double_System_Double_System_Double_System_Double_System_Double_System_String_Syncfusion_Blazor_ImageEditor_ImageEditorArrowHeadType_Syncfusion_Blazor_ImageEditor_ImageEditorArrowHeadType_System_Boolean_) method is used to draw arrow in the Blazor Image Editor component. Arrow annotations are valuable for highlighting, emphasizing, or marking specific areas of an image. +The [DrawArrowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawArrowAsync_System_Double_System_Double_System_Double_System_Double_System_Double_System_String_Syncfusion_Blazor_ImageEditor_ImageEditorArrowHeadType_Syncfusion_Blazor_ImageEditor_ImageEditorArrowHeadType_System_Boolean_) method draws an arrow. -The `DrawArrowAsync` method in the Image Editor component takes seven parameters to define the properties of the ellipse annotation: +Parameters: -* startX - Specifies the x-coordinate of the start point. +- startX - Specifies the x-coordinate of the start point. -* startY - Specifies the y-coordinate of the start point. +- startY - Specifies the y-coordinate of the start point. -* endX - Specifies the x-coordinate of the end point. +- endX - Specifies the x-coordinate of the end point. -* endY - Specifies the y-coordinate of the end point. +- endY - Specifies the y-coordinate of the end point. -* strokeWidth - Specifies the stroke width of the arrow. +- strokeWidth - Specifies the stroke width of the arrow. -* strokeColor - Specifies the stroke color of the arrow. +- strokeColor - Specifies the stroke color of the arrow. -* arrowStart - Specifies the arrowhead as ImageEditorArrowHeadType at the start of arrow. +- arrowStart - Specifies the arrowhead type at the start of the arrow. -* arrowEnd - Specifies the arrowhead as ImageEditorArrowHeadType at the end of the arrow. +- arrowEnd - Specifies the arrowhead type at the end of the arrow. -* isSelected: Specifies to show the arrow in the selected state. +- isSelected - Specifies whether the arrow is shown in the selected state. -The [`DrawPathAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawPathAsync_Syncfusion_Blazor_ImageEditor_ImageEditorPoint___System_Double_System_String_System_Boolean_) method is used to draw path in the Blazor Image Editor component. Line annotations are valuable for highlighting, emphasizing, or marking specific areas of an image. +The [DrawPathAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawPathAsync_Syncfusion_Blazor_ImageEditor_ImageEditorPoint___System_Double_System_String_System_Boolean_) method draws a path. -The `DrawPathAsync` method in the Image Editor component takes three parameters to define the properties of the ellipse annotation: +Parameters: -* points - Specifies collection of x and y coordinates as ImageEditorPoint to draw a path. +- points - Specifies a collection of coordinates `ImageEditorPoint` to draw a path. -* strokeWidth - Specifies the stroke width of the path. +- strokeWidth - Specifies the stroke width of the path. -* strokeColor - Specifies the stroke color of the path. +- strokeColor - Specifies the stroke color of the path. -* isSelected: Specifies to show the path in the selected state. +- isSelected - Specifies whether the path is shown in the selected state. -Here is an example of inserting rectangle, ellipse, arrow, path, and line in a button click event. +Here is an example of inserting rectangle, ellipse, arrow, path, and line in button click events. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -695,17 +676,13 @@ Here is an example of inserting rectangle, ellipse, arrow, path, and line in a b } ``` -![Blazor Image Editor with Annotation an image](./images/blazor-image-editor-annotation.png) +![Blazor Image Editor with shape annotations](./images/blazor-image-editor-annotation.png) -### Delete a shape +### Delete a shape -The [`DeleteShapeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteShapeAsync_System_String_) method allows you to remove a shape annotation from the Blazor Image Editor component. To use this method, you need to pass the [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html#Syncfusion_Blazor_ImageEditor_ShapeSettings_ID) of the annotation as a parameter. +The [DeleteShapeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteShapeAsync_System_String_) method removes a shape annotation by passing its [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html#Syncfusion_Blazor_ImageEditor_ShapeSettings_ID). The `ID` uniquely identifies each shape annotation and enables targeted deletion. The [GetShapesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetShapesAsync) method returns a collection of annotations represented by [ShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html). -The `ID` is a unique identifier assigned to each shape annotation within the Blazor Image Editor. It serves as a reference to a specific annotation, enabling targeted deletion of the desired text element. By specifying the `ID` associated with the text annotation you want to remove, you can effectively delete it from the image editor. - -To retrieve the inserted shapes, you can utilize the [`GetShapesAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetShapesAsync) method, which provides a collection of annotations represented by [`ShapeSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html). This method allows you to access and work with the annotations that have been inserted into the image. - -Here is an example of deleting rectangle, ellipse, arrow, path, and line in a button click event. +Here is an example of deleting ellipse in a button click event. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -738,11 +715,11 @@ Here is an example of deleting rectangle, ellipse, arrow, path, and line in a bu } ``` -![Blazor Image Editor with Delete text an image](./images/blazor-image-editor-delete-shape.jpg) +![Blazor Image Editor deleting a shape](./images/blazor-image-editor-delete-shape.jpg) -### Customize default stroke color for shapes +### Customize default stroke color for shapes -We provide default settings for stroke color, stroke width, fill color, and other customizations. If users wish to modify only the default options while preserving their previously selected customizations, they can do so by utilizing the [`ShapeChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ShapeChanging) event. Within this event, users can update the values in the [`CurrentShapeSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_ShapeChangeEventArgs_CurrentShapeSettings) object to apply their own preferences instead of the defaults. This approach allows conditional updates to the `CurrentShapeSettings`, ensuring that only the desired defaults are changed while maintaining the other settings. +Default settings are provided for stroke color, stroke width, fill color, and other options. To modify only the default options while preserving previously selected customizations, handle the [ShapeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ShapeChanging) event and update values in [CurrentShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_ShapeChangeEventArgs_CurrentShapeSettings). This approach conditionally updates defaults while maintaining other settings. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -757,7 +734,7 @@ We provide default settings for stroke color, stroke width, fill color, and othe { await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); } - private async void ShapeChangingAsync(ShapeChangeEventArgs args) + private void ShapeChangingAsync(ShapeChangeEventArgs args) { if (args.Action == "insert" && args.CurrentShapeSettings?.Type == ShapeType.Rectangle) { @@ -766,37 +743,37 @@ We provide default settings for stroke color, stroke width, fill color, and othe } } ``` -![Blazor Image Editor with Default Color](./images/blazor-image-editor-default-stroke-color.jpg) +![Blazor Image Editor with default stroke color customization](./images/blazor-image-editor-default-stroke-color.jpg) ## Image annotation -The image annotation feature in the Image Editor provides the capability to add and customize images directly onto the image. With this feature, you can easily insert image or icons at specific locations within the image and customize various aspects of the image to meet your requirements. You have control over the customization options including rotate, flip, transparency for the image annotation. +Image annotation enables inserting and customizing images or icons directly on the image. Options include rotate, flip, and transparency. ### Add an image annotation -The [`DrawImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawImageAsync_System_String_System_Double_System_Double_System_Int32_System_Int32_System_Boolean_System_Double_System_Double_System_Boolean_) method serves the purpose of inserting an image into the Image Editor control, allowing for image annotations to be added. These image annotations can be used for various purposes, such as adding logos, watermarks, or decorative elements to the image. +The [DrawImageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawImageAsync_System_String_System_Double_System_Double_System_Int32_System_Int32_System_Boolean_System_Double_System_Double_System_Boolean_) method inserts an image for adding logos, watermarks, or decorative elements. -The `DrawImageAsync` method in the Image Editor control takes six parameters to define the properties of the Image annotation: +Parameters: -* data: Specified the image data or url of the image to be inserted. +- data - Specifies the image data or URL of the image to be inserted. -* x: Specifies the x-coordinate of the top-left corner of the image. +- x - Specifies the x-coordinate of the top-left corner of the image. -* y: Specifies the y-coordinate of the top-left corner of the image. +- y - Specifies the y-coordinate of the top-left corner of the image. -* width: Specifies the width of the image. +- width - Specifies the width of the image. -* height: Specifies the height of the image. +- height - Specifies the height of the image. -* isAspectRatio: Specifies whether the image is rendered with aspect ratio or not. +- isAspectRatio - Specifies whether the image maintains aspect ratio. -* degree: Specifies the degree to rotate the image. +- degree - Specifies the degree to rotate the image. -* opacity: Specifies the value for the image. +- opacity - Specifies the opacity value for the image. -* isSelected: Specifies to show the image in the selected state. +- isSelected - Specifies whether the image is shown in the selected state. -In the following example, you can use the `DrawImageAsync` method in the button click event. +Here is an example of adding a image in a button click using `DrawImageAsync`. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -825,11 +802,11 @@ In the following example, you can use the `DrawImageAsync` method in the button } ``` -![Blazor Image Editor with Add Image in an image](./images/blazor-image-editor-add-image.png) +![Blazor Image Editor with an image annotation](./images/blazor-image-editor-add-image.png) ## Show or hide the annotation options -Using the [`Toolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_Toolbar) property of image editor component, you can hide or show the annotation options from annotation dropdown menu. +Using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_Toolbar) property, annotation options can be shown or hidden from the annotation dropdown. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -865,8 +842,9 @@ Using the [`Toolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Im } ``` -![Blazor Image Editor with annotation option](./images/blazor-image-editor-annotation-option.png) + +![Blazor Image Editor with annotation options](./images/blazor-image-editor-annotation-option.png) ## See Also -* [Identify Inserted Annotations](https://support.syncfusion.com/kb/article/21449/how-to-identify-inserted-annotations-in-blazor-image-editor) \ No newline at end of file +- [Identify Inserted Annotations](https://support.syncfusion.com/kb/article/21449/how-to-identify-inserted-annotations-in-blazor-image-editor) diff --git a/blazor/image-editor/getting-started-with-web-app.md b/blazor/image-editor/getting-started-with-web-app.md index 94b41a70b3..0679b8ad2f 100644 --- a/blazor/image-editor/getting-started-with-web-app.md +++ b/blazor/image-editor/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Syncfusion Blazor ImageEditor Component in WebApp -description: Checkout and learn about the documentation for getting started with Blazor Image Editor Component in Blazor Web App. +description: Learn how to add and configure the Syncfusion Blazor Image Editor component in a Blazor Web App using Visual Studio or Visual Studio Code. platform: Blazor component: Image Editor documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Image Editor Component in Web App -This section briefly explains about how to include [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) 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 Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. -To get start quickly with the Blazor Image Editor component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/imageEditor) sample: +To get started quickly with the Blazor Image Editor component, refer to this video or the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/imageEditor) sample: {% youtube "youtube:https://www.youtube.com/watch?v=lBB8oHvTuII"%} @@ -25,17 +25,17 @@ To get start quickly with the Blazor Image Editor component, you can check on th ## 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 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 the Blazor Web App. ## Install Syncfusion® Blazor ImageEditor and Themes NuGet in the Blazor Web App -To add **Blazor Image Editor** 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.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Image Editor** 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.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor/) 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. +When using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following package manager commands to install the packages. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -46,7 +46,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 %} @@ -58,9 +58,9 @@ 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 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 the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -78,11 +78,11 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® Blazor ImageEditor 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. +When using `WebAssembly` or `Auto` render modes in a Blazor Web App, install 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.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the current directory is the project root where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and ensure all dependencies are restored. {% tabs %} @@ -96,7 +96,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 %} @@ -106,10 +106,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 **~/Components/_Imports.razor** located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ImageEditor` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ImageEditor` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -120,9 +120,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ImageEditor` 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 of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -156,7 +156,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 **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -193,11 +193,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> Refer to 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 a Blazor application. Also, refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references. ## Add Syncfusion® Blazor Image Editor component -Add the Syncfusion® Blazor Image Editor 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 Image Editor component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -206,7 +206,7 @@ Add the Syncfusion® Blazor Image Editor com | | 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 set to `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -225,12 +225,11 @@ 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 Image Editor component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Image Editor component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLfZMhEziJhvXKH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Image Editor Component](./images/blazor-image-editor-component.jpg)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrICNDYqKacaGsS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Image Editor Component](./images/blazor-image-editor-component.jpg)" %} ## See also 1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) - diff --git a/blazor/image-editor/images/blazor-image-editor-add-watermark.jpg b/blazor/image-editor/images/blazor-image-editor-add-watermark.jpg new file mode 100644 index 0000000000..864db8b317 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-add-watermark.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-delete-freehanddraw.jpg b/blazor/image-editor/images/blazor-image-editor-delete-freehanddraw.jpg new file mode 100644 index 0000000000..38593964c7 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-delete-freehanddraw.jpg differ diff --git a/blazor/image-editor/localization.md b/blazor/image-editor/localization.md index 32b91c70a1..bad0747e6b 100644 --- a/blazor/image-editor/localization.md +++ b/blazor/image-editor/localization.md @@ -1,15 +1,14 @@ --- layout: post title: Localization with Blazor Image Editor Component | Syncfusion -description: Checkout the Localization available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the localization support available in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug --- - # Localization in the Blazor Image Editor component -[Blazor Image editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. -N> You can also explore our [Blazor Image editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to know how to render and configure the image editor. \ No newline at end of file +N> Explore the [Blazor Image Editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to see how to render and configure the Image Editor. \ No newline at end of file diff --git a/blazor/image-editor/open-save.md b/blazor/image-editor/open-save.md index 774c3af6d7..8fc38bc6d9 100644 --- a/blazor/image-editor/open-save.md +++ b/blazor/image-editor/open-save.md @@ -1,32 +1,31 @@ --- layout: post title: Open save with Blazor Image Editor Component | Syncfusion -description: Checkout the Open save available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Learn how to open, edit, and save images in the Blazor Image Editor component in Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug --- - # Open and Save in the Blazor Image Editor component -The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports to import an image into the canvas, it must first be converted into a blob object. The Uploader component can be used to facilitate the process of uploading an image from the user interface. Once the image has been uploaded, it can then be converted into a blob and drawn onto the canvas. +The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports importing an image into the canvas by converting it into a blob object. The Uploader component facilitates uploading an image from the user interface. After the upload, the image can be converted into a blob and drawn onto the canvas. ## Supported image formats -The Image Editor control supports five common image formats: PNG, JPEG, SVG, WEBP and BMP. These formats allow you to work with a wide range of image files within the Image Editor. +The Image Editor control supports five common image formats: PNG, JPEG, SVG, WEBP, and BMP. These formats enable working with a wide range of image files within the Image Editor. -When it comes to saving the edited image, the default file type is set as PNG. This means that when you save the edited image without specifying a different file type, it will be saved as a PNG file. However, it's important to note that the Image Editor typically provides options or methods to specify a different file type if desired. This allows you to save the edited image in formats other than the default PNG, such as JPEG, SVG, and WEBP based on your specific requirements or preferences. +When saving an edited image, the default file type is PNG. If a different format is required, specify another file type such as JPEG, SVG, or WEBP. ## Open an image -The [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method in the Blazor Image Editor component offers the capability to open an image by providing it in different formats. This method accepts various types of arguments, such as a base64-encoded string, raw image data, or a hosted/online URL. You can pass either the file name or the actual image data as an argument to the `OpenAsync` method, and it will load the specified image into the image editor component. This flexibility allows you to work with images from different sources and formats, making it easier to integrate and manipulate images within the Image Editor component. +The [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method in the Blazor Image Editor component opens an image provided in different formats. This method accepts a base64-encoded string, raw image data, or a hosted/online URL. Pass either the file name or the actual image data as an argument to `OpenAsync` to load the image into the Image Editor component. This flexibility supports images from various sources and formats. ### Opening local images in the Blazor Image Editor -Users can easily open local images in the Image Editor. Simply place the image in the same folder as the sample. By specifying the local file name directly in the open method, the image will be loaded seamlessly into the editor. +Local images can be opened in the Image Editor by placing the image in the same folder as the sample and specifying the local file name directly in the open method. -Note: To load the image in the image editor, the image is placed within the application's "wwwroot" folder. +Note: To load an image in the Image Editor, place the image within the application's "wwwroot" folder. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -41,7 +40,7 @@ Note: To load the image in the image editor, the image is placed within the appl private async void OpenAsync() { - await ImageEditor.OpenAsync("nature.png"); + await ImageEditor.OpenAsync("bridge.png"); } } ``` @@ -50,9 +49,9 @@ Note: To load the image in the image editor, the image is placed within the appl ### Open an image from base64 format -Users can easily open images in the Image Editor using a Base64-encoded string. This method allows you to load images directly from their Base64 representation, ensuring seamless integration and flexibility in your application. Simply pass the Base64 string to the [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method, and the image will be loaded into the editor. +Images can be opened in the Image Editor using a Base64-encoded string. Pass the Base64 string to the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method to load the image into the editor. -`Note:` You can obtain the Base64 representation of an image from the Image Editor using the [`GetImageDataUrlAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method. This process will be explained in the upcoming section. +`Note:` The Base64 representation of an image can be obtained from the Image Editor using the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method. This process is explained in a later section. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -96,13 +95,14 @@ Users can easily open images in the Image Editor using a Base64-encoded string. ### Open an image from Blob storage -User can easily open images in the Image Editor from Blob storage. This method allows you to load images directly from Blob storage, ensuring seamless integration and flexibility in your application. Simply retrieve the image Blob from storage and pass it to the [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method, and the image will be loaded into the editor. +Images can be opened in the Image Editor from Blob storage. Retrieve the image Blob from storage and pass it to the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method to load the image into the editor. -`Note:` You can obtain the Blob URL representation of an image from the Image Editor using the [`GetImageDataUrlAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method. This process will be explained in the upcoming section. +`Note:` The Blob URL representation of an image can be obtained from the Image Editor using the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method. This process is explained in a later section. ```cshtml @using Syncfusion.Blazor.ImageEditor @using Syncfusion.Blazor.Buttons +@using System.IO
Save Blob @@ -148,7 +148,7 @@ User can easily open images in the Image Editor from Blob storage. This method a ### Open an image from File Uploader -User can easily open images in the Image Editor using a file uploader. This method allows users to upload an image file from their device and load it directly into the editor. Once the image is selected through the file uploader, pass the file to the [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method, and the image will be seamlessly loaded into the editor. +Images can be opened in the Image Editor using a file uploader. After selecting an image file from a device, pass the file to the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method to load it into the editor. ```cshtml @using Syncfusion.Blazor.Inputs @@ -188,37 +188,48 @@ User can easily open images in the Image Editor using a file uploader. This meth ### Open an image from File Manager -User can easily open images in the Image Editor using the File Manager. This method allows you to browse and select an image file directly from the File Manager and load it into the editor. Once the image is selected, pass the file to the [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method, and the image will be seamlessly loaded into the editor. +Images can be opened in the Image Editor using the File Manager. After selecting an image from the File Manager, pass the file to the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method to load it into the editor. ```cshtml @using Syncfusion.Blazor.FileManager @using Syncfusion.Blazor.ImageEditor @inject NavigationManager UriHelper -
-
- - - - +
+
+
+ + + + +
+
+ + +
-
+ @code { private SfImageEditor imageEditor; private SfFileManager fileManager; public FileManagerService FileService = new FileManagerService(); + public async Task OnReadAsync(ReadEventArgs args) { args.Response = await FileService.ReadAsync(args.Path, args.Folder); } + public void BeforeImageLoadAsync(BeforeImageLoadEventArgs args) { string relativePath = $"https://ej2.syncfusion.com/react/demos/src/image-editor/images/{args.FileDetails.Name}"; args.ImageUrl = UriHelper.ToAbsoluteUri(relativePath).ToString(); } + private async Task OnFileOpenAsync(FileOpenEventArgs args) { if (args.FileDetails != null && args.FileDetails.IsFile) @@ -227,6 +238,7 @@ User can easily open images in the Image Editor using the File Manager. This met await imageEditor.OpenAsync(relativePath); } } + public void BeforePopupOpenAsync(BeforePopupOpenCloseEventArgs args) { args.Cancel = true; @@ -235,86 +247,86 @@ User can easily open images in the Image Editor using the File Manager. This met public class FileManagerService { public List Data = new List(); + public FileManagerService() { this.GetData(); } + private void GetData() { Data.Add(new FileManagerDirectoryContent() { - CaseSensitive = false, - DateCreated = new DateTime(2022, 1, 2), - DateModified = new DateTime(2022, 2, 3), - FilterPath = "", - FilterId = "", - HasChild = true, Id = "0", - IsFile = false, Name = "Pictures", + IsFile = false, + HasChild = true, ParentId = null, - ShowHiddenItems = false, + FilterPath = "", + FilterId = "", + Type = "folder", Size = 1779448, - Type = "folder" + DateCreated = new DateTime(2022, 1, 2), + DateModified = new DateTime(2022, 2, 3), + CaseSensitive = false, + ShowHiddenItems = false }); + Data.Add(new FileManagerDirectoryContent() { - CaseSensitive = false, - DateCreated = new DateTime(2022, 1, 2), - DateModified = new DateTime(2022, 2, 3), - FilterId = "0/", - FilterPath = "/Pictures/", - HasChild = false, Id = "1", - IsFile = true, Name = "bridge.png", + IsFile = true, + HasChild = false, ParentId = "0", - ShowHiddenItems = false, - Size = 680786, + FilterPath = "/Pictures/", + FilterId = "0/", Type = ".png", + Size = 680786, + DateCreated = new DateTime(2022, 1, 2), + DateModified = new DateTime(2022, 2, 3), + CaseSensitive = false, + ShowHiddenItems = false }); + Data.Add(new FileManagerDirectoryContent() { - CaseSensitive = false, - DateCreated = new DateTime(2022, 1, 2), - DateModified = new DateTime(2022, 2, 3), - FilterId = "0/", - FilterPath = "/Pictures/", - HasChild = false, - Id = "1", - IsFile = true, + Id = "2", Name = "flower.png", + IsFile = true, + HasChild = false, ParentId = "0", - ShowHiddenItems = false, - Size = 680786, + FilterPath = "/Pictures/", + FilterId = "0/", Type = ".png", + Size = 680786, + DateCreated = new DateTime(2022, 1, 2), + DateModified = new DateTime(2022, 2, 3), + CaseSensitive = false, + ShowHiddenItems = false }); } - public async Task> ReadAsync(string path, - List fileDetails) + public async Task> ReadAsync(string path, List fileDetails) { - FileManagerResponse response = new FileManagerResponse(); + var response = new FileManagerResponse(); + if (path == "/") { - string ParentId = Data - .Where(x => x.FilterPath == string.Empty) - .Select(x => x.Id).First(); - response.CWD = Data - .Where(x => x.FilterPath == string.Empty).First(); - response.Files = Data - .Where(x => x.ParentId == ParentId).ToList(); + var parentId = Data.First(x => x.FilterPath == "").Id; + response.CWD = Data.First(x => x.FilterPath == ""); + response.Files = Data.Where(x => x.ParentId == parentId).ToList(); } else { - var id = fileDetails.Count > 0 && fileDetails[0] != null ? fileDetails[0].Id : Data - .Where(x => x.FilterPath == path) - .Select(x => x.ParentId).First(); - response.CWD = Data - .Where(x => x.Id == (fileDetails.Count > 0 && fileDetails[0] != null ? fileDetails[0].Id : id)).First(); - response.Files = Data - .Where(x => x.ParentId == (fileDetails.Count > 0 && fileDetails[0] != null ? fileDetails[0].Id : id)).ToList(); + var id = fileDetails.Count > 0 && fileDetails[0] != null + ? fileDetails[0].Id + : Data.First(x => x.FilterPath == path).ParentId; + + response.CWD = Data.First(x => x.Id == id); + response.Files = Data.Where(x => x.ParentId == id).ToList(); } + await Task.Yield(); return await Task.FromResult(response); } @@ -326,51 +338,70 @@ User can easily open images in the Image Editor using the File Manager. This met ### Open an image from Treeview -Users can open images in the Syncfusion® Image Editor by selecting a node from a tree view. When a user clicks on an image node, the corresponding image is loaded into the editor using the [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method. This allows for a seamless image editing experience directly from the TreeView component. +Images can be opened in the Syncfusion® Image Editor by selecting a node from a tree view. When an image node is selected, the corresponding image is loaded into the editor using the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method. ```cshtml @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.ImageEditor +@inject NavigationManager UriHelper -@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper - -
-
- - - - +
+
+
+ + + + + + +
+
+ + +
-
@code { private SfImageEditor imageEditor; private SfTreeView treeView; - private string selectedId; - List TreeDataSource = new List(); + List TreeDataSource = new(); protected override void OnInitialized() { - base.OnInitialized(); TreeDataSource.Add(new TreeItem { NodeId = "01", NodeText = "Pictures", Icon = "folder", Expanded = true, - Child = new List() + Child = new List { - new TreeItem { NodeId = "01-01", NodeText = "Flower", ImageUrl = "https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png" }, - new TreeItem { NodeId = "01-02", NodeText = "Bridge", ImageUrl = "https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png" }, - }, + new TreeItem + { + NodeId = "01-01", + NodeText = "Flower", + ImageUrl = "https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png" + }, + new TreeItem + { + NodeId = "01-02", + NodeText = "Bridge", + ImageUrl = "https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png" + } + } }); } public async void NodeSelected(NodeSelectEventArgs args) { - List selectedNodes = treeView.GetTreeData(args.NodeData.Id); + var selectedNodes = treeView.GetTreeData(args.NodeData.Id); if (selectedNodes.Count > 0 && selectedNodes[0].ImageUrl != null) { await imageEditor.OpenAsync(selectedNodes[0].ImageUrl); @@ -389,14 +420,15 @@ Users can open images in the Syncfusion® Im } ``` -![Blazor Image Editor with File uploader](./images/blazor-image-editor-treeview.jpg) +![Blazor Image Editor with Treeview](./images/blazor-image-editor-treeview.jpg) ### Add watermarks while opening an image -You can utilize the [`FileOpenEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html) event, which triggers once the image is loaded into the image editor. After this event, you can use the [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method to add a watermark. This approach allows the watermark to be automatically drawn on the canvas every time an image is opened in the editor, making it useful for handling copyright-related content. +The [FileOpenEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html) event triggers once the image is loaded into the Image Editor. After this event, use the [DrawTextAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method to add a watermark. This approach draws the watermark on the canvas each time an image is opened, which is useful for copyright-related content. ```cshtml -@using Syncfusion.Blazor.ImageEditor +@using Syncfusion.Blazor.ImageEditor + @@ -412,24 +444,24 @@ You can utilize the [`FileOpenEventArgs`](https://help.syncfusion.com/cr/blazor/ private async void FileOpenedAsync() { ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync(); - await ImageEditor.DrawTextAsync(Dimension.X.Value, Dimension.Y.Value, "Enter\nText", "Arial", 40, false, false, "#80330075"); + await ImageEditor.DrawTextAsync(Dimension.X.Value, Dimension.Y.Value, "Syncfusion", "Arial", 40, false, false, "#80330075"); } } ``` -![Blazor Image Editor with Adding Watermark](./images/blazor-image-editor-add-watermark.jpeg) +![Blazor Image Editor with Adding Watermark](./images/blazor-image-editor-add-watermark.jpg) ### Opening Images with Custom Width and Height -Users can now open images with specific width and height values using the optional parameters in the [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method. This enhancement introduces three optional parameters: `width`, `height`, and `isAspectRatio`These options allow precise control over the image dimensions, with the flexibility to preserve the original aspect ratio if needed. This feature is especially useful when rendering high-resolution images or when fitting images into fixed-size layouts or canvas areas. +Images can be opened with specific width and height values using optional parameters in the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method. The optional parameters `width`, `height`, and `isAspectRatio` allow control over image dimensions with the option to preserve the original aspect ratio. The following behaviors are supported through these properties: -- Contains behavior: By specifying only one dimension (either `width` or `height`) and enabling `isAspectRatio`, the other dimension is automatically calculated to maintain the image’s original proportions. +- Contains behavior - When a single dimension (`width` or `height`) is provided with `isAspectRatio` enabled, the other dimension is calculated automatically to maintain the original proportions. -- Cover behavior: When both `width` and `height` are specified with `isAspectRatio` set to `true`, the image scales proportionally to fit within the given dimensions while preserving its aspect ratio. +- Cover behavior - When both `width` and `height` are specified with `isAspectRatio` set to `true`, the image scales proportionally to fit within the given dimensions while preserving the aspect ratio. -- Stretch or Shrink behavior: Setting `isAspectRatio` to `false` forces the image to strictly follow the specified `width` and `height`, allowing it to stretch or shrink regardless of its original aspect ratio. +- Stretch or Shrink behavior - When `isAspectRatio` is `false`, the image strictly follows the specified `width` and `height`, allowing stretching or shrinking regardless of the original aspect ratio. -The following example showcases how all three behaviors can be achieved using the OpenAsync method. +The following example demonstrates all three behaviors using the OpenAsync method. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -471,9 +503,9 @@ The following example showcases how all three behaviors can be achieved using th ## Save as image -The [`ExportAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ExportAsync_System_String_Syncfusion_Blazor_ImageEditor_ImageEditorFileType_System_Double_) method in the Blazor Image Editor component is used to save the modified image as an image, and it accepts a file name and file type as parameters. The file type parameter supports PNG, JPEG, SVG, and WEBP the default file type is PNG. Users are allowed to save an image with a specified file name, file type, and image quality. This enhancement provides more control over the output, ensuring that users can save their work exactly as they need it. +The [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ExportAsync_System_String_Syncfusion_Blazor_ImageEditor_ImageEditorFileType_System_Double_) method in the Blazor Image Editor component saves the modified image as an image and accepts a file name and file type as parameters. The file type parameter supports PNG, JPEG, SVG, and WEBP; the default file type is PNG. Images can be saved with a specified file name, file type, and image quality. -In the following example, the `ExportAsync` method is used in the button click event. +In the following example, the `ExportAsync` method is invoked on a button click. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -506,7 +538,7 @@ In the following example, the `ExportAsync` method is used in the button click e ### Save the image as base64 format -To save an image as a base64 format, use the [`GetImageDataUrlAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method of the editor to retrieve the image data and convert it into a Data URL, which contains the base64-encoded string. By invoking the [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) on the Syncfusion® Image Editor instance, you can load this Data URL into the editor. The resulting base64 string can then be embedded directly in HTML or CSS or transmitted over data channels without requiring an external file. +To save an image as base64, use the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method of the editor to retrieve the image data and convert it into a Data URL containing the base64-encoded string. By invoking the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method on the Syncfusion® Image Editor instance, this Data URL can be loaded into the editor. The resulting base64 string can be embedded in HTML or CSS or transmitted over data channels without relying on an external file. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -544,7 +576,7 @@ To save an image as a base64 format, use the [`GetImageDataUrlAsync`](https://he ### Save the image as byte[] -To save an image as a byte array, use the [`GetImageDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataAsync) method of the editor to retrieve a byte array. You can then invoke the [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method on the Syncfusion® Image Editor instance to load this byte array into the editor. The resulting byte array can be stored in a database for data management and maintenance. +To save an image as a byte array, use the [GetImageDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataAsync) method of the editor to retrieve a byte array. Then invoke the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method on the Syncfusion® Image Editor instance to load this byte array into the editor. The resulting byte array can be stored in a database for data management and maintenance. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -588,11 +620,12 @@ To save an image as a byte array, use the [`GetImageDataAsync`](https://help.syn ### Save the image as Blob -To save an image as a blob, use the [`GetImageDataUrlAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method of the editor to retrieve the image data and convert it into a blob. You can then invoke the open method on the Syncfusion® Image Editor instance to load this byte array into the editor. The resulting byte array can be stored in a database for data management and maintenance. +To save an image as a blob, use the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method of the editor to retrieve the image data and convert it into a blob. Then invoke the open method on the Syncfusion® Image Editor instance to load this byte array into the editor. The resulting byte array can be stored in a database for data management and maintenance. ```cshtml @using Syncfusion.Blazor.ImageEditor @using Syncfusion.Blazor.Buttons +@using System.IO
Save Blob @@ -629,13 +662,13 @@ To save an image as a blob, use the [`GetImageDataUrlAsync`](https://help.syncfu ### Save as image in server -The [`GetImageDataUrlAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method in the Blazor Image Editor component is used to gets the current image data url from the Image Editor component +The [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method in the Blazor Image Editor component retrieves the current image data URL from the Image Editor component. -The value returned from this method is used to save the edited image to database as well as open in our image editor using The [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_)method. +The value returned from this method can be used to save the edited image to a database as well as open it in the Image Editor using the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method. N> Increase the connection buffer size in Blazor Image Editor component -The Syncfusion's Blazor Image Editor component allows to increase the connection buffer size by adding the below service in program.cs file if the size of the image is too large. +The Syncfusion's Blazor Image Editor component allows increasing the connection buffer size by adding the following service in Program.cs if the image size is large. ```cshtml builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; }); @@ -643,7 +676,7 @@ builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMess ### Remove default Save button and add custom button to save the image to server -User can leverage the [`Toolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_Toolbar) property to replace the default save button with a custom one. By doing so, you can use the [`GetImageDataUrlAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method to retrieve the image data, convert it to base64 format, and then save it to the server. This approach gives you more control over the image-saving process. +The [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_Toolbar) property can be used to replace the default save button with a custom one. Then use the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method to retrieve the image data, convert it to base64 format, and save it to the server, providing more control over the image-saving process. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -653,7 +686,7 @@ User can leverage the [`Toolbar`](https://help.syncfusion.com/cr/blazor/Syncfusi Save to Server
- + @@ -664,12 +697,6 @@ User can leverage the [`Toolbar`](https://help.syncfusion.com/cr/blazor/Syncfusi { await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); } - private List customToolbar = new List() - { - new ImageEditorToolbarItemModel { Name = "Crop" }, - new ImageEditorToolbarItemModel { Name = "Annotation" }, - new ImageEditorToolbarItemModel { Name = "Filter" }, - }; private async Task SaveImage() { var imageDataUrl = await ImageEditor.GetImageDataUrlAsync(); @@ -686,14 +713,14 @@ User can leverage the [`Toolbar`](https://help.syncfusion.com/cr/blazor/Syncfusi ### Prevent default save option and save the image to specific location -User can make use of the [`Saving`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_Saving) event, which triggers just before the image is downloaded, to override the default save option by setting `args.cancel` to true. Afterward, you can utilize the [`GetImageDataUrlAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method to retrieve the current image data and convert it into a format like `byte[]`, `blob`, or `base64` for further processing. This gives you greater flexibility in handling the image data. +The [Saving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_Saving) event, which triggers just before the image is downloaded, can be used to override the default save option by setting `args.cancel` to true. Afterward, use the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method to retrieve the current image data and convert it into a format like `byte[]`, `blob`, or `base64` for further processing. ```cshtml @using Syncfusion.Blazor.ImageEditor @using System.IO
- +
@@ -721,33 +748,33 @@ User can make use of the [`Saving`](https://help.syncfusion.com/cr/blazor/Syncfu ## Events to handle Save Actions -The Image Editor provides several events related to opening and saving images. These events offer detailed control over the image handling process. For comprehensive information about these events, including their triggers and usage, please refer to the dedicated section on open and save support. This section will provide you with the specifics needed to effectively utilize these events in your application. +The Image Editor provides several events related to opening and saving images. These events offer detailed control over the image handling process. For comprehensive information about these events, including their triggers and usage, refer to the dedicated section on open and save support. ### File opened event -The [`FileOpened`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FileOpened) event is triggered in the Blazor Image Editor component after an image is successfully loaded. It provides the [`FileOpenEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html) as the event argument, which contains two specific arguments: +The [FileOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FileOpened) event is triggered in the Blazor Image Editor component after an image is successfully loaded. It provides the [FileOpenEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html) as the event argument, which contains two specific arguments: -[`FileName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileName): This argument is a string that contains the file name of the opened image. It represents the name of the file that was selected or provided when loading the image into the Image Editor. +- [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileName) - A string that contains the file name of the opened image. -[`FileType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileType): This argument is a string that contains the type of the opened image. It specifies the format or file type of the image that was loaded, such as PNG, JPEG, SVG, WEBP and BMP. +- [FileType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileType) - A string that contains the type of the opened image, such as PNG, JPEG, SVG, WEBP, and BMP. -By accessing these arguments within the `FileOpened` event handler, you can retrieve information about the loaded image, such as its file name and file type. This can be useful for performing additional actions or implementing logic based on the specific image that was opened in the Image Editor component. +These arguments enable retrieving information about the loaded image, such as its file name and type, which can be used for additional actions. ### Saving event -The [`Saving`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_Saving) event is triggered in the Blazor Image Editor component when an image is being saved to the local disk. It provides the [`SaveEventArgs `](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SaveEventArgs.html) as the event argument, which includes the following specific arguments: +The [Saving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_Saving) event is triggered in the Blazor Image Editor component when an image is being saved to the local disk. It provides the [SaveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SaveEventArgs.html) as the event argument, which includes the following specific arguments: -[`FileName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SaveEventArgs.html#Syncfusion_Blazor_ImageEditor_SaveEventArgs_FileName): This argument is a string that holds the file name of the saved image. It represents the name of the file that will be used when saving the image to the local disk. +- [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SaveEventArgs.html#Syncfusion_Blazor_ImageEditor_SaveEventArgs_FileName) - A string that holds the file name of the saved image. -[`FileType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SaveEventArgs.html#Syncfusion_Blazor_ImageEditor_SaveEventArgs_FileType): This argument is a string indicating the type or format of the saved image. It specifies the desired file type in which the image will be saved, such as PNG, JPEG, SVG, and WEBP. +- [FileType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SaveEventArgs.html#Syncfusion_Blazor_ImageEditor_SaveEventArgs_FileType) - A string indicating the format of the saved image, such as PNG, JPEG, SVG, and WEBP. -[`Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SaveEventArgs.html#Syncfusion_Blazor_ImageEditor_SaveEventArgs_Cancel): This argument is a boolean value that can be set to true in order to cancel the saving action. By default, it is set to false, allowing the saving process to proceed. However, if you want to prevent the saving action from occurring, you can set Cancel to true within the event handler. +- [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SaveEventArgs.html#Syncfusion_Blazor_ImageEditor_SaveEventArgs_Cancel) - A boolean value that can be set to true to cancel the saving action. The default value is false. -By accessing these arguments within the Saving event handler, you can retrieve information about the file name and file type of the image being saved. Additionally, you have the option to cancel the saving action if necessary. +These arguments provide control over the save operation, including file naming, format selection, and cancellation. ### Created event -The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_Created) event is triggered once the Blazor Image Editor component is created. This event serves as a notification that the component has been fully initialized and is ready to be used. It provides a convenient opportunity to render the Image Editor with a predefined set of initial settings, including the image, annotations, and transformations. +The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_Created) event is triggered once the Blazor Image Editor component is created. This event indicates that the component has been fully initialized and is ready to be used. It provides an opportunity to render the Image Editor with a predefined set of initial settings, including the image, annotations, and transformations. In the following example, the `Created` event is used to load an image. @@ -773,4 +800,4 @@ In the following example, the `Created` event is used to load an image. ### Destroyed event -The [`Destroyed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_Destroyed) event is triggered once the Blazor Image Editor component is destroyed or removed from the application. This event serves as a notification that the component and its associated resources have been successfully cleaned up and are no longer active. +The [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_Destroyed) event is triggered once the Blazor Image Editor component is destroyed or removed from the application. This event indicates that the component and its associated resources have been cleaned up and are no longer active. diff --git a/blazor/listview/how-to/get-selected-items-from-listview.md b/blazor/listview/how-to/get-selected-items-from-listview.md index c6ab0f830a..4be074864b 100644 --- a/blazor/listview/how-to/get-selected-items-from-listview.md +++ b/blazor/listview/how-to/get-selected-items-from-listview.md @@ -7,11 +7,11 @@ control: ListView documentation: ug --- -# Retrieving Selected Items in Syncfusion® Blazor ListView +# Retrieving Selected Items from ListView Component -The Syncfusion® Blazor ListView component allows users to choose multiple items from a list. To retrieve these selected items, you can refer the below implementation in ListView component. This functionality is especially useful for applications that need to process or display data based on user selections. +The Syncfusion® Blazor ListView component offers functionalities for users to select one or more items from a list. This guide outlines how to retrieve selected items, a feature essential for applications that need to process or display data based on user choices. -## Get selected items from ListView Component +## Get Selected Items from ListView Component The ListView component in Syncfusion® Blazor allows to select multiple items. The [`GetCheckedItemsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_GetCheckedItemsAsync) method is utilized to retrieve these selected items. Below are the details of this API: @@ -107,13 +107,12 @@ Here's a code snippet illustrating the implementation: } ``` - ![Getting Selected Item in Blazor ListView](../images/list/get-selected-items-from-listview.png) -## Get selected items from custom template in Blazor ListView Component +## Get Selected Items from Custom Template in Blazor ListView Component -In scenarios where you build custom templates in Blazor ListView Component, you can select multiple items. It's essential to map the `Id` and `Text` attributes properly using [`ListViewFieldSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html). This ensures that selected item data is returned correctly in templates: +In scenarios where custom templates are built in the Blazor ListView Component, multiple items can be selected. It's essential to map the `Id` and `Text` attributes properly using [`ListViewFieldSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html). This ensures that selected item data is returned correctly in templates. ```cshtml @using Syncfusion.Blazor.Lists @@ -197,6 +196,6 @@ In scenarios where you build custom templates in Blazor ListView Component, you } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVeMZtCATAcUTGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Getting Selected Item from Blazor ListView](../images/list/blazor-listview-display-seleted-item.png) diff --git a/blazor/ribbon/keytip.md b/blazor/ribbon/keytip.md index 457c138d5a..b9a76541c2 100644 --- a/blazor/ribbon/keytip.md +++ b/blazor/ribbon/keytip.md @@ -9,7 +9,7 @@ documentation: ug # KeyTips in Blazor Ribbon component -The Blazor Ribbon component supports keyboard navigation through KeyTips, enabling users to interact with Ribbon interface without using a mouse. KeyTips can be enabled by setting the `EnableKeyTips` property, allowing users to quickly access commands using shortcut keys. +The Blazor Ribbon component supports keyboard navigation through keytips, enabling users to interact with the Ribbon interface without a mouse. Keytips can be enabled by setting the `EnableKeyTips` property, allowing users to quickly access commands using keyboard shortcuts. The keyTips will be shown when the **Alt + Windows/Command(on macOS)** keys are pressed. @@ -17,7 +17,7 @@ The keyTips will be shown when the **Alt + Windows/Command(on macOS)** keys are ### Ribbon items keytip -You can add keytips to the Ribbon items by using the `KeyTip` property in the `RibbonItem` directive. +Keytips can be added to Ribbon items by using the `KeyTip` property in the `RibbonItem` directive. {% tabs %} {% highlight razor %} @@ -275,11 +275,11 @@ You can add keytips to the Ribbon items by using the `KeyTip` property in the `R {% endhighlight %} {% endtabs %} -![Ribbon Items Keytip](./images/keytip/items-keytip.png) +![Ribbon items keytip](./images/keytip/items-keytip.png) ### File menu keytip -You can add keytip to the File menu by using the `KeyTip` property. +A keytip can be added to the File menu by using the `KeyTip` property. {% tabs %} {% highlight razor %} @@ -346,11 +346,11 @@ You can add keytip to the File menu by using the `KeyTip` property. {% endhighlight %} {% endtabs %} -![Ribbon File Menu Keytip](./images/keytip/file-menu-keytip.png) +![Ribbon file menu keytip](./images/keytip/file-menu-keytip.png) ### Backstage menu keytip -You can add keytips for the backstage button and menu items by using `KeyTip` property. +Keytips can be added for the backstage button and menu items by using the `KeyTip` property. {% tabs %} {% highlight razor %} @@ -418,11 +418,11 @@ You can add keytips for the backstage button and menu items by using `KeyTip` pr {% endhighlight %} {% endtabs %} -![Ribbon Backstage menu keytip](./images/keytip/backstage-keytip.png) +![Ribbon backstage menu keytip](./images/keytip/backstage-keytip.png) ### Ribbon layout switcher keytip -You can add keytip to the layout switcher by using the `LayoutSwitcherKeyTip` property for switching between **Classic** and **Simplified** Ribbon layouts. +A keytip can be added to the layout switcher by using the `LayoutSwitcherKeyTip` property to switch between the `Classic` and `Simplified` Ribbon layouts. {% tabs %} {% highlight razor %} @@ -493,7 +493,7 @@ You can add keytip to the layout switcher by using the `LayoutSwitcherKeyTip` pr ### Ribbon launcher icon keytip -You can add keytip to the launcher icon by using `LauncherIconKeyTip` property allowing you to quickly open additional options in Ribbon groups. +A keytip can be added to the launcher icon by using the `LauncherIconKeyTip` property to quickly open additional options in Ribbon groups. {% tabs %} {% highlight razor %} @@ -567,14 +567,14 @@ You can add keytip to the launcher icon by using `LauncherIconKeyTip` property a ### Show keytips -You can use the `ShowKeyTipsAsync` method to dynamically display keytips. +The `ShowKeyTipsAsync` method displays keytips dynamically for the Ribbon. - To activate a specific key action, pass the corresponding keytip string as an argument. - For example, calling `ShowKeyTipsAsync('H')` will look for the specific item associated with the **H** key and trigger its respective action. ### Hide keytips -You can use the `HideKeyTipsAsync` method to remove all visible keytips from the Ribbon dynamically. +The `HideKeyTipsAsync` method removes all visible keytips from the Ribbon dynamically. {% tabs %} {% highlight razor %} @@ -658,12 +658,12 @@ You can use the `HideKeyTipsAsync` method to remove all visible keytips from the ## Guidelines for adding keytips -Before adding keytips to the Ribbon items, follow these best practices: +Before adding keytips to Ribbon items, follow these best practices: -* Avoid using the same keytip setting on multiple items. +* Avoid assigning the same keytip to multiple items. -> Each keytip should be distinct. If multiple items share the same keytip (e.g., `H` or `HF`), only the first occurrence will be activated, while any subsequent instances of H or HF are ignored. +> Each keytip must be unique. If multiple items share the same keytip (for example, `H` or `HF`), only the first occurrence is activated; subsequent items using the same keytip are ignored. -* Do not use the same first letter for the single and double keytip items. +* Do not use the same first letter for single- and multi-character keytips on different items. -> When using multi-character keytips (e.g., `F`, `FP`, and `FPF`) for different items, pressing `F` will activate only the first-level keytip (`F`), while `FP` and `FPF` will be ignored. +> When using multi-character keytips (for example, `F`, `FP`, and `FPF`) for different items, pressing `F` activates only the first-level keytip (`F`), and `FP` and `FPF` are ignored. \ No newline at end of file diff --git a/blazor/rich-text-editor/images/checklist.png b/blazor/rich-text-editor/images/checklist.png new file mode 100644 index 0000000000..d040e87e8c Binary files /dev/null and b/blazor/rich-text-editor/images/checklist.png differ diff --git a/blazor/rich-text-editor/tools/audio.md b/blazor/rich-text-editor/tools/audio.md index 38770ea250..132e6fbb1d 100644 --- a/blazor/rich-text-editor/tools/audio.md +++ b/blazor/rich-text-editor/tools/audio.md @@ -386,5 +386,5 @@ namespace AudioUpload.Controllers ## See also -* [How to configuring the toolbar position](https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar#configuring-the-toolbar-position) +* [How to configuring the toolbar position](../toolbar#configuring-the-toolbar-position) * [How to use link editing option in the toolbar items](../tools#insert-link) diff --git a/blazor/rich-text-editor/tools/styling-tools.md b/blazor/rich-text-editor/tools/styling-tools.md index 593a921a60..dfc7f83dbb 100644 --- a/blazor/rich-text-editor/tools/styling-tools.md +++ b/blazor/rich-text-editor/tools/styling-tools.md @@ -459,6 +459,43 @@ This feature allows users to change the appearance of the numbered and bulleted +### Checklist + +The `Checklist` feature lets you create interactive task lists with clickable checkboxes. You can configure checkbox behavior, customize the visual appearance, manage item states, and enable keyboard interactions. This makes it perfect for project management, note-taking, and task tracking within your content. You can easily toggle between checked and unchecked states, giving you an intuitive way to manage the completion status of your list items—making it a simple and effective to-do list solution. + +#### Inserting a checklist +You can embed interactive task lists directly within the Rich Text Editor. Here’s how you can insert a checklist: +- **Using the toolbar**: Click the checklist button in the editor toolbar, usually represented by a checkbox icon. +- **Using the shortcut**: Press `Ctrl+Shift+9` (or `Cmd+Shift+9` on macOS) to insert a checklist at your cursor’s position. +- **Converting existing lists**: Select an existing bullet or numbered list and click the checklist button to convert it into an interactive checklist. +- **Toggling checklist items**: You can toggle the state of checklist items between checked and unchecked by clicking the checkbox. If you prefer using the keyboard, press `Ctrl+Enter` (or `Cmd+Enter` on macOS) to toggle the check marks based on your selection or cursor position in the editor. + +#### Configuring checklist +To enable the checklist feature in your editor, add the `Checklist` toolbar item to the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.Items) property. This feature supports customizable behavior and can be easily integrated into your Rich Text Editor toolbar for quick access. + +Here’s an example of how you can configure the checklist in your Rich Text Editor: + +{% tabs %} +{% highlight razor %} + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ +@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Checklist } + }; +} + +{% endhighlight %} +{% endtabs %} + +![Blazor RichTextEditor Checklist](../images/checklist.png) + ## Formatting code blocks Configure code block formatting as a separate toolbar button by adding the `InsertCode` Command within the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. The `InsertCode` button has a toggle state to apply code block formatting to the editor and remove code block formatting from the editor. diff --git a/blazor/scheduler/clipboard.md b/blazor/scheduler/clipboard.md index f43f6daeae..1bcdbbafc0 100644 --- a/blazor/scheduler/clipboard.md +++ b/blazor/scheduler/clipboard.md @@ -9,17 +9,17 @@ documentation: ug # Clipboard in Blazor Scheduler Component -The Clipboard functionality in the Syncfusion® Scheduler enhances scheduling efficiency by enabling users to cut, copy, and paste appointments with ease. This feature is especially beneficial for those managing multiple appointments, as it eliminates the need for repetitive data entry and allows users to quickly adjust their schedules without hassle. +The Clipboard functionality in the Syncfusion® Scheduler enhances scheduling efficiency by enabling users to cut, copy, and paste appointments with ease. This feature is especially beneficial for managing multiple appointments, as it streamlines repetitive tasks and allows for quick adjustments to schedules. -To activate the clipboard feature in the scheduler, simply set the [`AllowClipboard`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowKeyboardInteraction) property to **true**. +To activate the clipboard feature in the Scheduler, set the [`AllowClipboard`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowClipboard) property to `true`. -N> The [`AllowKeyboardInteraction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowKeyboardInteraction) property must be true for proper functionality of the clipboard feature. +N> The [`AllowKeyboardInteraction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowKeyboardInteraction) property must also be set to `true` for the clipboard feature to function correctly, as it relies on keyboard shortcuts. -## Cut, copy and paste using keyboard +## Cut, Copy, and Paste Using Keyboard -The Syncfusion® Scheduler supports keyboard shortcuts to streamline the process of managing appointments. +The Syncfusion® Scheduler supports standard keyboard shortcuts to streamline the process of managing appointments. -These keyboard shortcuts enable users to efficiently manage their schedules: +These keyboard shortcuts enable efficient schedule management: | Operation | Shortcut | Description | |-----------|----------|------------------------------------------------------------------| @@ -111,9 +111,9 @@ To use these shortcuts, simply click on the appointment and press **Ctrl+C** to N> For Mac users, use **Cmd** instead of **Ctrl** for copy, cut, and paste operations. -## Cut, copy, and paste using context menu +## Cut, Copy, and Paste Using Context Menu -You can programmatically manage appointments by using the public methods **cut**, **copy**, and **paste**. These methods allow you to perform the same actions as the context menu or external buttons. +Appointments can be programmatically managed using the public methods `CopyAsync`, `CutAsync`, and `PasteAsync`. These methods allow developers to trigger the same clipboard actions as keyboard shortcuts or context menu options, providing more control over the appointment management process. Utilize these public methods to manage appointments programmatically in Syncfusion® Schedule: @@ -123,7 +123,7 @@ Utilize these public methods to manage appointments programmatically in Syncfusi | `CutAsync` | None | Remove the selected appointment from its current slot for moving. | | `PasteAsync` | targetElement (Scheduler's work-cell) | Insert the copied or cut appointment into the specified time slot. | -By using these methods, you can programmatically cut, copy, and paste appointments in the scheduler, providing more control over the appointment management process. +By using these methods within event handlers (e.g., from a custom context menu), precise control over clipboard operations is achieved. ```cshtml @using Syncfusion.Blazor.Schedule @@ -289,9 +289,9 @@ By using these methods, you can programmatically cut, copy, and paste appointmen {% previewsample "https://blazorplayground.syncfusion.com/embed/rNVojqVGhZgDmVrp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5 %} -## Modifying content before pasting +## Modifying Content Before Pasting -You can modify the content of an appointment before pasting it by using `Paste` event accessing the appointment details and making necessary changes. +The content of an appointment can be modified before it is pasted by utilizing the `Paste` event. This event provides access to the appointment details, allowing for necessary changes. The following example demonstrates how to seamlessly copy and paste content from a grid to a scheduler. To do this, follow these steps: diff --git a/blazor/scheduler/getting-started-webapp.md b/blazor/scheduler/getting-started-webapp.md index 5d48fcb717..ef5aa7e1df 100644 --- a/blazor/scheduler/getting-started-webapp.md +++ b/blazor/scheduler/getting-started-webapp.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor Scheduler in Blazor Web App -This section briefly explains about how to include [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component into a Blazor Web App using either [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) -To get start quickly with Blazor Web App Scheduler, you can check on this video: +For a quick start with the Blazor Web App Scheduler, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=PwjvHHMtL3U"%} @@ -26,11 +26,13 @@ To get start quickly with Blazor Web App Scheduler, you can check on this video: * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## 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) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +A **Blazor Web App** can be created using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -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=windows) while creating a Blazor Web Application. +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=windows) must be configured when creating a Blazor Web Application. + +![Create Blazor Web App](images/blazor-create-web-app.png) ![Create Blazor Web App](images/blazor-create-web-app.png) @@ -38,9 +40,9 @@ You need to configure the corresponding [Interactive render mode](https://learn. To add **Blazor Scheduler** 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.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) 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 `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, Syncfusion® Blazor components NuGet packages need to be installed within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -61,9 +63,9 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +## 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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +A **Blazor Web App** can be created 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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). @@ -81,10 +83,10 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor Schedule 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 `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, Syncfusion® Blazor components NuGet packages need to be installed within 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. +* Ensure the current directory is the project root containing the `.csproj` file. * Run the following command to install a [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -107,7 +109,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -135,13 +137,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory named `BlazorApp` within the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App Here's an example of how to add **Blazor Scheduler** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -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 `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, Syncfusion® Blazor components NuGet packages need to be installed within the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -174,9 +176,9 @@ Open **~/_Imports.razor** file from the client project and import the `Syncfusio ## Register Syncfusion® Blazor Service -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +The Syncfusion® Blazor Service must be registered in the **~/Program.cs** file of the Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, the Syncfusion® Blazor service must be registered in the **~/Program.cs** files of both the main `server` project and the associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -210,7 +212,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## 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: @@ -229,7 +231,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to 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> 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 a 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 a Blazor application. ## Add Syncfusion® Blazor Scheduler component @@ -283,13 +285,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 Scheduler component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNVpjWADUUybFgTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler/BlazorWebApp). -## Populating appointments +## Populating Appointments To populate the Scheduler with appointments, bind the event data to it by assigning the `DataSource` property under [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html). @@ -334,9 +336,9 @@ To populate the Scheduler with appointments, bind the event data to it by assign {% previewsample "https://blazorplayground.syncfusion.com/embed/VNVyDujgpxNVnpFG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Appointments](images/blazor-scheduler-appointments.png)" %} -## Setting date +## Setting Date -The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the two-way binding for [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property. +The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) typically displays the system date as its current date. To change the current date of the Scheduler to a specific date, define the two-way binding for the [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property. {% tabs %} {% highlight razor %} @@ -370,7 +372,9 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched {% endhighlight %} {% endtabs %} -## Setting view +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoCXZcWcHmiTRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Setting Custom Date](images/custom-date.png)" %} + +## Setting View The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are, @@ -419,7 +423,9 @@ The Scheduler displays `Week` view by default. To change the current view, defin {% endhighlight %} {% endtabs %} -## Individual view customization +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVeMNjQCvjyYFrF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Custom View](images/custom-view.png)" %} + +## Individual View Customization Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`. diff --git a/blazor/scheduler/getting-started-with-server-app.md b/blazor/scheduler/getting-started-with-server-app.md index ce505592f7..80606ce5c3 100644 --- a/blazor/scheduler/getting-started-with-server-app.md +++ b/blazor/scheduler/getting-started-with-server-app.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor Scheduler Component in Server App -This section briefly explains about how to include [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component into a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) -To get start quickly with Blazor Scheduler, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler) sample: +For a quick start with the Blazor Scheduler, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler) sample: {% tabcontents %} @@ -23,13 +23,13 @@ To get start quickly with Blazor Scheduler, you can check on this [GitHub](https * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor Server App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +A **Blazor Server App** can be created using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App -To add **Blazor Scheduler** 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.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) 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 **Blazor Scheduler** 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.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -50,11 +50,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor Server App in Visual Studio Code -You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +A **Blazor Server App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a server application using the following command in the terminal(Ctrl+`). +Alternatively, a server application can be created using the following command in the terminal(Ctrl+`). {% tabs %} @@ -70,7 +70,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Schedule 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. +* Ensure the current directory is the project root containing the .csproj file. * Run the following command to install a [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -93,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -116,7 +116,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server App and places it in a new directory named `BlazorApp` within the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App @@ -151,7 +151,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Server App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} @@ -172,7 +172,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## 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 in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: @@ -191,9 +191,9 @@ 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> 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 a 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 a Blazor application. -## Add Blazor Scheduler component +## Add Blazor Scheduler Component Add the Syncfusion® Blazor Scheduler component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. @@ -235,11 +235,11 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNVpjWADUUybFgTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %} -## Populating appointments +## Populating Appointments To populate the Scheduler with appointments, bind the event data to it by assigning the `DataSource` property under [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1__ctor). @@ -320,7 +320,9 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched {% endhighlight %} {% endtabs %} -## Setting view +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoCXZcWcHmiTRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Setting Custom Date](images/custom-date.png)" %} + +## Setting View The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are, @@ -369,7 +371,9 @@ The Scheduler displays `Week` view by default. To change the current view, defin {% endhighlight %} {% endtabs %} -## Individual view customization +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVeMNjQCvjyYFrF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Custom View](images/custom-view.png)" %} + +## Individual View Customization Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`. diff --git a/blazor/scheduler/getting-started.md b/blazor/scheduler/getting-started.md index 53113178bb..21a17c7d9a 100644 --- a/blazor/scheduler/getting-started.md +++ b/blazor/scheduler/getting-started.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor Scheduler Component in WASM App -This section briefly explains about how to include [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) -To get start quickly with Blazor Scheduler, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler) sample: +For a quick start with the Blazor Scheduler, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler) sample: {% tabcontents %} @@ -23,13 +23,13 @@ To get start quickly with Blazor Scheduler, you can check on this [GitHub](https * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor WebAssembly 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). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +A **Blazor WebAssembly App** can be created 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). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App -To add **Blazor Scheduler** 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.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) 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 **Blazor Scheduler** 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.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -50,11 +50,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor WebAssembly 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). For detailed instructions, refer to [this Blazor WASM Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +A **Blazor WebAssembly App** can be created 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). For detailed instructions, refer to [this Blazor WASM Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, a WebAssembly application can be created using the following command in the terminal(Ctrl+`). {% tabs %} @@ -70,7 +70,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Schedule 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. +* Ensure the current directory is the project root, where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -93,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -116,7 +116,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly App and places it in a new directory named `BlazorApp` within the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App @@ -153,7 +153,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +The Syncfusion® Blazor Service must be registered in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -177,21 +177,24 @@ 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 can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet references within the `` section and script references in `` section of the **~/index.html** file. ```html .... + +.... + + .... - //Blazor Scheduler Component script reference. - + ``` -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> 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 a 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 a Blazor application. -## Add Blazor Scheduler component +## Add Blazor Scheduler Component Add the Syncfusion® Blazor Scheduler component in the **~/Pages/Index.razor** file. @@ -226,11 +229,11 @@ Add the Syncfusion® Blazor Scheduler compon {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNVpjWADUUybFgTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %} -## Populating appointments +## Populating Appointments To populate the Scheduler with appointments, bind the event data to it by assigning the `DataSource` property under [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1__ctor). @@ -275,7 +278,7 @@ To populate the Scheduler with appointments, bind the event data to it by assign {% previewsample "https://blazorplayground.syncfusion.com/embed/VNVyDujgpxNVnpFG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Appointments](images/blazor-scheduler-appointments.png)" %} -## Setting date +## Setting Date The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the two-way binding for [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property. @@ -311,7 +314,9 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched {% endhighlight %} {% endtabs %} -## Setting view +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoCXZcWcHmiTRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Setting Custom Date](images/custom-date.png)" %} + +## Setting View The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are, @@ -360,7 +365,9 @@ The Scheduler displays `Week` view by default. To change the current view, defin {% endhighlight %} {% endtabs %} -## Individual view customization +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVeMNjQCvjyYFrF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Custom View](images/custom-view.png)" %} + +## Individual View Customization Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`. diff --git a/blazor/scheduler/scheduler-styling.md b/blazor/scheduler/scheduler-styling.md index 53fb815c5d..faa90b4711 100644 --- a/blazor/scheduler/scheduler-styling.md +++ b/blazor/scheduler/scheduler-styling.md @@ -9,7 +9,7 @@ documentation: ug # Style And Appearance in Blazor Scheduler Component -To modify the Scheduler appearance, you need to override the default CSS of Scheduler. Also, there is an option to create our own custom theme using [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). Find the list of CSS classes in Scheduler. +To modify the Scheduler appearance, override the default CSS. A custom theme can also be created using [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). The following table lists the CSS classes available in the Scheduler. | CSS class | Purpose | |-------|---------| @@ -43,7 +43,7 @@ To modify the Scheduler appearance, you need to override the default CSS of Sche | .e-schedule .e-read-only | Read only appointment in scheduler. | | e-appointment-border | Appointment which are currently selected, use the appointment class hierarchical based on your views. | | e-selected-cells | Work cells which are currently selected, use the work cell class hierarchical based on your views. | -| e-header-cells | Header cells of scheduler, use the work cells hierarchical based on your views. | +| e-header-cells | Header cells of the Scheduler; used hierarchically based on views. | | .e-schedule .e-vertical-view .e-resource-cells| Resource cells in vertical views of scheduler. | | .e-schedule .e-month-view .e-resource-cells| Resource cells in month view of scheduler. | | .e-schedule .e-timeline-view .e-resource-cells | Resource cells in timeline views of scheduler. | @@ -51,7 +51,7 @@ To modify the Scheduler appearance, you need to override the default CSS of Sche | e-parent-node | Parent resource cells in timeline views of scheduler. | | e-child-node | Child resource cells in timeline views of scheduler. | -### Work cells in vertical views of scheduler +### Work Cells In Vertical Views Of Scheduler This CSS selector targets the work cells in the vertical views (Day, Week, and WorkWeek) of the Syncfusion® Scheduler component. These cells represent the individual time slots arranged vertically where appointments are displayed and can be scheduled. @@ -98,7 +98,7 @@ This CSS selector targets the work cells in the vertical views (Day, Week, and W {% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSjzXQfGnvGHlh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in vertical views](images/blazor-scheduler-verticalview-workcells.png)" %} -### Work cells in month view of scheduler +### Work Cells In Month View Of Scheduler This CSS selector targets the work cells (day cells) that belong to the current month in the month view of the Syncfusion® Scheduler. These cells represent the individual days of the displayed month where users can schedule and view appointments. @@ -141,7 +141,7 @@ This CSS selector targets the work cells (day cells) that belong to the current {% previewsample "https://blazorplayground.syncfusion.com/embed/LXBSXpMdpcPUpdLW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in month view](images/blazor-scheduler-monthview-workcells.png)" %} -### Work cells of other month in month view of scheduler +### Work Cells Of Other Month In Month View Of Scheduler This CSS selector targets the work cells that represent days from adjacent months (previous or next month) that are visible in the current month view of the scheduler. These cells typically appear at the beginning and end of a month view to complete the week rows. @@ -185,7 +185,7 @@ This CSS selector targets the work cells that represent days from adjacent month {% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoDfinplIYBcIi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Other month work cells in month view](images/blazor-scheduler-othermonth-workcells.png)" %} -### Work cells in timeline views of scheduler +### Work Cells In Timeline Views Of Scheduler This CSS selector targets the work cells in the standard timeline views of the Syncfusion® Scheduler. These cells represent time slots arranged horizontally across the scheduler. @@ -230,7 +230,7 @@ This CSS selector targets the work cells in the standard timeline views of the S {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVetzsdeXJJNgsX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline views](images/blazor-scheduler-timelineview-workcells.png)" %} -### Work cells in timeline month view of scheduler +### Work Cells In Timeline Month View Of Scheduler This CSS selector targets the work cells in the timeline month view of the Syncfusion® Scheduler component. @@ -273,7 +273,7 @@ This CSS selector targets the work cells in the timeline month view of the Syncf {% previewsample "https://blazorplayground.syncfusion.com/embed/hZhSXIXUeKvJllyA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline month views](images/blazor-scheduler-timelinemonth-workcells.png)" %} -### Work cells in timeline year view of scheduler +### Work Cells In Timeline Year View Of Scheduler This CSS selector targets the work cells in the timeline year view of the Syncfusion® Scheduler component. These cells represent time slots across the entire year, arranged in a timeline format that provides an overview of appointments throughout the entire year. @@ -316,7 +316,7 @@ This CSS selector targets the work cells in the timeline year view of the Syncfu {% previewsample "https://blazorplayground.syncfusion.com/embed/rZBIZSXKozTrvbOf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline year views](images/blazor-scheduler-timelineyear-workcells.png)" %} -### Work cells of other month in timeline year view of scheduler +### Work Cells Of Other Month In Timeline Year View Of Scheduler This CSS selector targets the work cells representing days from adjacent months (previous or next month) that are visible in the timeline year view. @@ -359,7 +359,7 @@ This CSS selector targets the work cells representing days from adjacent months {% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIteDUymCFDFFp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline other month views](images/blazor-scheduler-timeline-othermonth-workcells.png)" %} -### Work cells in month agenda view of scheduler +### Work Cells In Month Agenda View Of Scheduler This CSS selector targets the work cells that represent the days in the month agenda view of the Syncfusion® Scheduler. These cells are areas where appointments can be placed. @@ -401,7 +401,7 @@ This CSS selector targets the work cells that represent the days in the month ag {% previewsample "https://blazorplayground.syncfusion.com/embed/hjBItIMpzmNyLBhW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in month agenda view](images/blazor-scheduler-monthagenda-workcells.png)" %} -### Work cells of other month in month agenda view of scheduler +### Work Cells of Other Month in Month Agenda View of Scheduler This CSS selector targets the work cells representing days that belong to adjacent months within the month agenda view. These cells often show up to provide context for appointments that may extend beyond the current month. @@ -802,7 +802,7 @@ This CSS selector targets the work day cells in the timeline year view of the Sy {% previewsample "https://blazorplayground.syncfusion.com/embed/VtLytSsaTviyMXFM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work day cells in timeline year view](images/blazor-scheduler-work-day-cells-timeline-yearview.png)" %} -### Appointment in vertical views of scheduler +### Appointment in Vertical Views of Scheduler This CSS selector targets the regular appointments that appear in these vertical views. Customizing this selector can significantly improving appointment visibility, readability, and overall visual appearance. @@ -857,7 +857,7 @@ This CSS selector targets the regular appointments that appear in these vertical {% previewsample "https://blazorplayground.syncfusion.com/embed/BXLSXlXiqeOnoBFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in vertical view](images/blazor-scheduler-appointments-vertical-view.png)" %} -### All day Appointment in vertical views of scheduler +### All Day Appointment in Vertical views of Scheduler This CSS selector targets the all-day appointments that appear in the vertical views (Day, Week, and WorkWeek) of the Syncfusion® Blazor Scheduler component. All-day appointments are events that span an entire day or multiple days without specific start and end times within those days. @@ -913,7 +913,7 @@ This CSS selector targets the all-day appointments that appear in the vertical v {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhINvDCqxEWFfUp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[All day appointments in vertical view](images/blazor-scheduler-allday-appointments-vertical-view.png)" %} -### Appointment in month view of scheduler +### Appointment in Month View of Scheduler This CSS selector targets appointment elements in the month view of the Syncfusion® Blazor Scheduler component. This selector is crucial for customizing how appointments appear in the calendar-style month view, which presents unique visualization challenges due to the compact nature of displaying an entire month at once. @@ -966,7 +966,7 @@ This CSS selector targets appointment elements in the month view of the Syncfusi {% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyjbDigwxldZQH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in month view](images/blazor-scheduler-appointments-month-view.png)" %} -### Appointment in timeline views of scheduler +### Appointment in Timeline Views of Scheduler This CSS selector targets appointment elements in the timeline views of the Syncfusion® Blazor Scheduler component. Timeline views (TimelineDay, TimelineWeek, TimelineWorkWeek) present a unique horizontal orientation of appointments that differs significantly from the traditional vertical or month views. @@ -1018,7 +1018,7 @@ This CSS selector targets appointment elements in the timeline views of the Sync {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrSNbjiqlpgpavw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in timeline view](images/blazor-scheduler-appointments-Timeline-view.png)" %} -### Appointment in timeline month view of scheduler +### Appointment in Timeline Month View of Scheduler This CSS selector targets appointment elements specifically in the timeline month view of the Syncfusion® Blazor Scheduler component. This specialized view combines the horizontal time-based layout of timeline views with the monthly calendar perspective, creating a unique visualization for planning and scheduling. @@ -1071,7 +1071,7 @@ This CSS selector targets appointment elements specifically in the timeline mont {% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSDFZMJTeCySrl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in timeline Month view](images/blazor-scheduler-appointments-TimelineMonth-view.png)" %} -### Appointment in timeline year view of scheduler +### Appointment in Timeline Year View of Scheduler This CSS selector targets appointment elements specifically in the timeline year view of the Syncfusion® Blazor Scheduler component. The Timeline Year view in Syncfusion® Scheduler is designed to display events across an entire year in a horizontal, scrollable layout. @@ -1123,7 +1123,7 @@ This CSS selector targets appointment elements specifically in the timeline year {% previewsample "https://blazorplayground.syncfusion.com/embed/hZBIDvNfqjpWspUW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in timeline year view](images/blazor-scheduler-appointments-TimelineYear-view.png)" %} -### Appointment in year view of scheduler +### Appointment in Year View of Scheduler This CSS selector targets appointment elements specifically in the year view of the Syncfusion® Blazor Scheduler component. In a year view of a scheduler, appointments are displayed across all 12 months of the year, offering a high-level overview of scheduled events. @@ -1171,7 +1171,7 @@ This CSS selector targets appointment elements specifically in the year view of {% previewsample "https://blazorplayground.syncfusion.com/embed/LDrSjbXpKSaxvJSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments indicator in year view](images/blazor-scheduler-appointments-Year-view.png)" %} -### Appointment in agenda view of scheduler +### Appointment in Agenda View of Scheduler This CSS selector targets appointment elements specifically in the agenda view of the Syncfusion® Blazor Scheduler component. An appointment in the agenda view of a scheduler is shown as a simple list of events sorted by date and time. @@ -1222,7 +1222,7 @@ This CSS selector targets appointment elements specifically in the agenda view o {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLyNlZJAnFDusMl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in agenda view](images/blazor-scheduler-appointments-agenda-view.png)" %} -### Appointment in month agenda view of scheduler +### Appointment in Month Agenda View of Scheduler This CSS selector targets appointment elements specifically in the month agenda view of the Syncfusion® Blazor Scheduler component. An appointment in the month agenda view of a scheduler is shown as a list of events organized by day within a selected month. @@ -1276,7 +1276,7 @@ This CSS selector targets appointment elements specifically in the month agenda {% previewsample "https://blazorplayground.syncfusion.com/embed/LNBotPNTAGcpjRvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in month agenda view](images/blazor-scheduler-appointments-monthAgenda-view.png)" %} -### Block appointment in scheduler +### Block Appointment in Scheduler This CSS selector targets appointment elements specifically designated as blocked appointments in the Syncfusion® Blazor Scheduler component. A blocked appointment refers to a reserved time slot during which no other appointments or events can be scheduled. @@ -1332,7 +1332,7 @@ This CSS selector targets appointment elements specifically designated as blocke {% previewsample "https://blazorplayground.syncfusion.com/embed/LZVytvNTTzoPWdKC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blocked Appointment in schedule](images/blazor-scheduler-blocked-appointments.png)" %} -### Read only appointment in scheduler. +### Read Only Appointment in Scheduler. This CSS selector targets appointment elements that are specifically marked as read-only in the Syncfusion® Blazor Scheduler component. A read-only appointment in a scheduler refers to an event or time slot that is visible to users but cannot be modified, deleted, or rescheduled through the user interface. @@ -1386,7 +1386,7 @@ This CSS selector targets appointment elements that are specifically marked as r {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBojvXpJoKirsVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ReadOnly Appointment in schedule](images/blazor-scheduler-readonly-appointments.png)" %} -### Selected Appointments in scheduler. +### Selected Appointments in Scheduler This CSS selector targets appointment elements that are specifically marked as selected in the Syncfusion® Blazor Scheduler component. A selected appointment in a scheduler refers to an event that a user has actively clicked on or interacted with. @@ -1441,7 +1441,7 @@ This CSS selector targets appointment elements that are specifically marked as s {% previewsample "https://blazorplayground.syncfusion.com/embed/htLoDlZJfSbnzyVC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selected Appointment in schedule](images/blazor-scheduler-selected-appointments.png)" %} -### Selected Cells in scheduler. +### Selected Cells in Scheduler This CSS selector targets the cells that are specifically marked as selected in the Syncfusion® Blazor Scheduler component. A selected cell in a scheduler refers to a time slot that a user has actively clicked on or interacted with. @@ -1495,7 +1495,7 @@ This CSS selector targets the cells that are specifically marked as selected in {% previewsample "https://blazorplayground.syncfusion.com/embed/rDrStPtfpRsutkic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selected cells in schedule](images/blazor-scheduler-selected-cells.png)" %} -### Header Cells in scheduler. +### Header Cells in Scheduler This CSS selector targets the cells that are specifically marked as header cells in the Syncfusion® Blazor Scheduler component. Header cells in a scheduler refer to the top row that display contextual information such as dates and day labels. @@ -1546,7 +1546,7 @@ This CSS selector targets the cells that are specifically marked as header cells {% previewsample "https://blazorplayground.syncfusion.com/embed/LZVSNPNpfmXnWpnA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Header cells in schedule](images/blazor-scheduler-header-cells.png)" %} -### Resource cells in vertical views of scheduler. +### Resource Cells in Vertical Views of Scheduler This CSS selector targets the cells that are specifically marked as resource cells in the Syncfusion® Blazor Scheduler component. Resource cells in the vertical views of a scheduler are the sections that display the names or labels of resources such as people, rooms, equipment, or services. These cells are usually shown on the top of the scheduler and help organize appointments by resource. @@ -1618,7 +1618,7 @@ This CSS selector targets the cells that are specifically marked as resource cel {% previewsample "https://blazorplayground.syncfusion.com/embed/LtLeNvjJTccyxmoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in schedule](images/blazor-scheduler-resource-cells.png)" %} -### Resource cells in month views of scheduler. +### Resource Cells in Month Views of Scheduler This CSS selector targets the resource cells in the Syncfusion® Blazor Scheduler Month view. These cells show names of resources in month view. @@ -1691,7 +1691,7 @@ This CSS selector targets the resource cells in the Syncfusion® Blazor Scheduler component. Resource cells in the timeline views of a scheduler are usually shown on the left side of the scheduler. @@ -1765,7 +1765,7 @@ This CSS selector targets the cells that are specifically marked as resource cel {% previewsample "https://blazorplayground.syncfusion.com/embed/BZBINbjTfvuqAUlm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in timeline view](images/blazor-scheduler-resource-cells-timeline-view.png)" %} -### Resource cells in timeline month views of scheduler. +### Resource Cells in Timeline Month Views of Scheduler This CSS selector targets the cells that are specifically marked as resource cells in timeline month views of the Syncfusion® Blazor Scheduler component. @@ -1837,79 +1837,7 @@ This CSS selector targets the cells that are specifically marked as resource cel {% previewsample "https://blazorplayground.syncfusion.com/embed/rDhoNbXzpaIzpSch?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in timeline month view](images/blazor-scheduler-resource-cells-timeline-month-view.png)" %} -### Resource cells in timeline month views of scheduler. - -This CSS selector targets the cells that are specifically marked as resource cells in timeline month views of the Syncfusion® Blazor Scheduler component. - -```cshtml - -@using Syncfusion.Blazor.Schedule - - - - - - - - - - -@code{ - DateTime CurrentDate = new DateTime(2023, 6, 1); - public string[] Resources { get; set; } = { "Owners" }; - List DataSource = new List - { - new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, - new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, - new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } - }; - public List OwnersData { get; set; } = new List - { - new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, - new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, - new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } - }; - public class AppointmentData - { - public int Id { get; set; } - public string Subject { get; set; } - public string Location { get; set; } - public DateTime StartTime { get; set; } - public DateTime EndTime { get; set; } - public string Description { get; set; } - public bool IsAllDay { get; set; } - public string RecurrenceRule { get; set; } - public string RecurrenceException { get; set; } - public Nullable RecurrenceID { get; set; } - public int OwnerId { get; set; } - } - public class ResourceData - { - public int Id { get; set; } - public string OwnerText { get; set; } - public string OwnerColor { get; set; } - } -} - - - -``` - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhoNbXzpaIzpSch?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in timeline month view](images/blazor-scheduler-resource-cells-timeline-month-view.png)" %} - -### Parent and child resource cells in timeline views of scheduler. +### Parent and Child Resource Cells in Timeline Views of Scheduler This CSS selector targets the parent and child resource cells in the timeline views of the Syncfusion® Blazor Scheduler component. These cells display both parent and child resources (like rooms and individuals) and help organize appointments based on resource hierarchy. diff --git a/blazor/smart-ai-solutions/ai/azure-openai.md b/blazor/smart-ai-solutions/ai/azure-openai.md index 81b886feb1..32ad8050f2 100644 --- a/blazor/smart-ai-solutions/ai/azure-openai.md +++ b/blazor/smart-ai-solutions/ai/azure-openai.md @@ -375,4 +375,4 @@ This example illustrates how the Syncfusion Blazor AI library integrates with Az ## See Also - [Syncfusion Blazor QueryBuilder Documentation](https://blazor.syncfusion.com/documentation/query-builder/getting-started-webapp) -- [Syncfusion Blazor Grid Documentation](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) \ No newline at end of file +- [Syncfusion Blazor Grid Documentation](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) diff --git a/blazor/smart-ai-solutions/ai/custom-ai-service.md b/blazor/smart-ai-solutions/ai/custom-ai-service.md index e99e36da3e..132d0a1189 100644 --- a/blazor/smart-ai-solutions/ai/custom-ai-service.md +++ b/blazor/smart-ai-solutions/ai/custom-ai-service.md @@ -1,7 +1,7 @@ --- layout: post -title: Using Custom AI Services with Syncfusion Blazor AI | Syncfusion -description: Learn how to set up and use Syncfusion.Blazor.AI with custom AI providers, including configuration, integration steps, and practical examples. +title: Custom AI Service Integration with Syncfusion Blazor AI | Syncfusion +description: Learn how to configure and use Syncfusion Blazor AI with custom AI providers, such as DeepSeek, to enable AI-driven features in Blazor applications. platform: Blazor control: AI Integration documentation: ug @@ -9,15 +9,13 @@ documentation: ug # Custom AI Service Integration with Syncfusion® Blazor AI -## Introduction - -This section demonstrates configuring and using the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with a **custom AI service** by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility feature empowers developers to integrate any AI provider into Blazor applications, enabling Syncfusion® Blazor components to work with specialized or proprietary AI services beyond the standard providers. +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables integration with custom AI providers by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility feature allows developers to connect Blazor applications to proprietary or specialized AI services, such as enterprise-specific models or local AI servers, enhancing Syncfusion Blazor components with tailored AI functionality like text generation or data processing. ## Prerequisites -Before you begin integrating a custom AI service with your Blazor application, ensure you have: +To integrate a custom AI service with a Blazor application, ensure the following: +- The following NuGet package is installed: -* Installed the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package via NuGet {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -26,16 +24,15 @@ Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -* Obtained an API key from your chosen AI provider (DeepSeek in this example) from the [DeepSeek platform](https://platform.deepseek.com) -* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion® Blazor components -* Understanding of HTTP client usage and JSON serialization in .NET applications +- An API key is obtained from the chosen AI provider (e.g., DeepSeek via the [DeepSeek API documentation](https://platform.deepseek.com)). +- The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. +- Familiarity with HTTP client usage and JSON serialization in .NET applications. ## Configuration Steps -Follow these steps to integrate a custom AI service with Syncfusion® Blazor AI: - ### Implement the Custom AI Service - Create a class that implements the `IChatInferenceService` interface for DeepSeek. The implementation below uses the provided DeepSeek code, modified to utilize `AIServiceCredentials` from `Program.cs`. + +Create a class that implements the `IChatInferenceService` interface for the custom AI provider. The example below demonstrates DeepSeek integration using `AIServiceCredentials` for secure configuration management. ```csharp using Microsoft.Extensions.AI; @@ -48,31 +45,31 @@ using System.Threading.Tasks; public class DeepSeekAIService : IChatInferenceService { private readonly HttpClient _httpClient; - private readonly AIServiceCredentials _credentials; + private readonly string _apiKey = "Your API Key"; + private readonly string _modelName = "deepseek-chat"; // Example model - public DeepSeekAIService(HttpClient httpClient, AIServiceCredentials credentials) + public DeepSeekAIService(HttpClient httpClient) { _httpClient = httpClient; - _credentials = credentials; } public async Task GenerateResponseAsync(ChatParameters options) { var requestBody = new { - model = _credentials.DeploymentName ?? "deepseek-chat", // Use deployment name from credentials + model = _modelName, // Use deployment name from credentials messages = options.Messages.Select(m => new { role = m.Role.ToString().ToLower(), content = m.Content }).ToArray(), temperature = options.Temperature, max_tokens = options.MaxTokens }; var requestContent = new StringContent(JsonSerializer.Serialize(requestBody), Encoding.UTF8, "application/json"); - if (!string.IsNullOrEmpty(_credentials.ApiKey)) + if (!string.IsNullOrEmpty(_apiKey)) { - _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _credentials.ApiKey); + _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _apiKey); } - var response = await _httpClient.PostAsync(_credentials.Endpoint?.ToString() ?? "https://api.deepseek.com/v1/chat/completions", requestContent); + var response = await _httpClient.PostAsync("https://api.deepseek.com/v1/chat/completions", requestContent); response.EnsureSuccessStatusCode(); var responseJson = await response.Content.ReadAsStringAsync(); @@ -84,33 +81,30 @@ public class DeepSeekAIService : IChatInferenceService ### Register the Custom AI Service - Open your Blazor application's `Program.cs` and configure the DeepSeek AI service with `AIServiceCredentials`. +Update the Blazor application's `Program.cs` to configure the DeepSeek AI service with `AIServiceCredentials`. ```csharp using Syncfusion.Blazor.AI; -builder.Services.AddSingleton(new AIServiceCredentials -{ - ApiKey = "your-deepseek-api-key", // Replace with your DeepSeek API key - DeploymentName = "deepseek-chat", // Specify the model (e.g., "deepseek-chat", "deepseek-coder") -}); - -// Register the custom inference backend +// Register the custom inference service builder.Services.AddSingleton(); ``` -## Custom AI Integration with Syncfusion® Components -The `GenerateResponseAsync` method in the DeepSeekAIService class serves as the core interface for AI communication. This method: +## How It Works + +This example illustrates how the Syncfusion Blazor AI library integrates with a custom AI service (DeepSeek): -1. **Formats Requests:** Converts Syncfusion® AI parameters into the custom provider's expected format -2. **Handles Authentication:** Manages API key authentication securely -3. **Processes Responses:** Parses the provider's response format into standard AI responses +1. **Setup**: Implement and register the custom AI service in `Program.cs` using secure credentials. +2. **Component Integration**: Inject `IChatInferenceService` to process AI requests within Syncfusion components like Smart TextArea. +3. **Request Formatting**: Convert Syncfusion AI parameters into the custom provider’s API format (e.g., DeepSeek’s JSON structure). +4. **Response Processing**: Parse the provider’s response and update the component (e.g., displaying text suggestions). -## See Also +### Key Components +- **IChatInferenceService**: Interface for interacting with custom AI providers. +- **AIServiceCredentials**: Syncfusion class for managing API keys, endpoints, and model names. +- **GenerateResponseAsync**: Sends asynchronous requests to the custom AI provider and retrieves responses. -- [Overview](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/overview) -- [OpenAI Integration](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/openai) -- [Azure OpenAI Integration](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/azure-openai) -- [Ollama Integration](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/ollama) -- [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) -- [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started) +## Error Handling +- **Invalid API Key**: Ensure the API key is valid and stored securely in environment variables or a configuration service. +- **Rate Limits**: Check the custom AI provider’s documentation (e.g., [DeepSeek API docs](https://platform.deepseek.com)) for rate limit details. +- **Network or Parsing Errors**: Handle HTTP or JSON errors gracefully, as shown in the `DeepSeekAIService` implementation. diff --git a/blazor/smart-ai-solutions/ai/overview.md b/blazor/smart-ai-solutions/ai/overview.md index fd184976d4..f6618cef88 100644 --- a/blazor/smart-ai-solutions/ai/overview.md +++ b/blazor/smart-ai-solutions/ai/overview.md @@ -38,4 +38,5 @@ To use the Syncfusion Blazor AI library, ensure the following: ## See Also - [Smart TextArea Documentation](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp) -- [Smart Paste Button Documentation](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) \ No newline at end of file + +- [Smart Paste Button Documentation](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) diff --git a/blazor/smart-paste/claude-service.md b/blazor/smart-paste/claude-service.md index 5282ec7f04..4c8a601f01 100644 --- a/blazor/smart-paste/claude-service.md +++ b/blazor/smart-paste/claude-service.md @@ -186,7 +186,7 @@ var app = builder.Build(); Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test the Groq AI integration. -```razor +```cshtml @using Syncfusion.Blazor.DataForm @using Syncfusion.Blazor.SmartComponents @using System.ComponentModel.DataAnnotations diff --git a/blazor/smart-paste/deepseek-service.md b/blazor/smart-paste/deepseek-service.md index af785a46bd..eac41e6d2d 100644 --- a/blazor/smart-paste/deepseek-service.md +++ b/blazor/smart-paste/deepseek-service.md @@ -181,7 +181,7 @@ var app = builder.Build(); Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test the Groq AI integration. -```razor +```cshtml @using Syncfusion.Blazor.DataForm @using Syncfusion.Blazor.SmartComponents @using System.ComponentModel.DataAnnotations diff --git a/blazor/smart-paste/gemini-service.md b/blazor/smart-paste/gemini-service.md index f3e34e2820..7746c8168f 100644 --- a/blazor/smart-paste/gemini-service.md +++ b/blazor/smart-paste/gemini-service.md @@ -230,7 +230,7 @@ var app = builder.Build(); Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test the Groq AI integration. -```razor +```cshtml @using Syncfusion.Blazor.DataForm @using Syncfusion.Blazor.SmartComponents @using System.ComponentModel.DataAnnotations diff --git a/blazor/smart-paste/groq-service.md b/blazor/smart-paste/groq-service.md index 86f0c919e3..c95c716f34 100644 --- a/blazor/smart-paste/groq-service.md +++ b/blazor/smart-paste/groq-service.md @@ -184,7 +184,7 @@ var app = builder.Build(); Add the Smart Paste Button to a form in the **~/Pages/Home.razor** file to test the Groq AI integration. -```razor +```cshtml @using Syncfusion.Blazor.DataForm @using Syncfusion.Blazor.SmartComponents @using System.ComponentModel.DataAnnotations diff --git a/blazor/smart-textarea/claude-service.md b/blazor/smart-textarea/claude-service.md index 7a191a1069..6886636fc9 100644 --- a/blazor/smart-textarea/claude-service.md +++ b/blazor/smart-textarea/claude-service.md @@ -186,7 +186,7 @@ var app = builder.Build(); Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to use Claude AI for autocompletion: -```razor +```cshtml @using Syncfusion.Blazor.SmartComponents diff --git a/blazor/smart-textarea/deepseek-service.md b/blazor/smart-textarea/deepseek-service.md index 4d2391fa18..f06f709201 100644 --- a/blazor/smart-textarea/deepseek-service.md +++ b/blazor/smart-textarea/deepseek-service.md @@ -181,7 +181,7 @@ var app = builder.Build(); Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to use DeepSeek AI for autocompletion: -```razor +```cshtml @using Syncfusion.Blazor.SmartComponents diff --git a/blazor/smart-textarea/gemini-service.md b/blazor/smart-textarea/gemini-service.md index 76eb8d7263..29394c90a3 100644 --- a/blazor/smart-textarea/gemini-service.md +++ b/blazor/smart-textarea/gemini-service.md @@ -230,7 +230,7 @@ var app = builder.Build(); Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to use Gemini AI for autocompletion: -```razor +```cshtml @using Syncfusion.Blazor.SmartComponents diff --git a/blazor/smart-textarea/groq-service.md b/blazor/smart-textarea/groq-service.md index fdd6b3dd97..d25a7995f9 100644 --- a/blazor/smart-textarea/groq-service.md +++ b/blazor/smart-textarea/groq-service.md @@ -184,7 +184,7 @@ var app = builder.Build(); Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to use Groq AI for autocompletion: -```razor +```cshtml @using Syncfusion.Blazor.SmartComponents diff --git a/blazor/timepicker/getting-started-webapp.md b/blazor/timepicker/getting-started-webapp.md index e46b6eb109..beaa617e36 100644 --- a/blazor/timepicker/getting-started-webapp.md +++ b/blazor/timepicker/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor TimePicker in Blazor Web App -This section briefly explains about how to include [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in 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 TimePicker](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 Blazor Web App. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor TimePicker** 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 TimePicker component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.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 you use the WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the client project. -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" %} @@ -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 Blazor Web App. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, in 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 guidance on creating a Blazor Web App with different interactive modes and locations, see [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## 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 you use WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion® Blazor 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 you are in the project directory that contains the `.csproj` file. +* Run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies. {% 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.org. For details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available packages and components. {% 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** located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` 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.Calendars` 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(s) 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 service in both **~/Program.cs** files 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. Register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## 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: +The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` within **~/Components/App.razor** as shown below: ```html @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor TimePicker 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 set to Auto, WebAssembly, or Server, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,18 +221,17 @@ 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 TimePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor TimePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJjCKtzSOIsHLx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TimePicker Component](./images/blazor-timepicker.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker/BlazorWebApp). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker/BlazorWebApp). ## Setting the time format -Time format is a way of representing the time value in different string format in textbox and popup list. By default, the TimePicker’s Format is based on the culture. -But the Format of the TimePicker can be customized using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format) property. +The time format defines how the time value is displayed in the text box and the popup list. By default, the TimePicker uses the current culture’s format. The format can be customized using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format) property. -The below code demonstrates how to render TimePicker component in 24 hours Format with 60 minutes interval. The time interval is set to 60 minutes by using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Step) property. +The following code demonstrates rendering the TimePicker in a 24-hour format with a 60‑minute interval. The interval is set using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Step) property. {% tabs %} {% highlight razor %} @@ -250,7 +249,7 @@ The below code demonstrates how to render TimePicker component in 24 hours Forma ## See Also -* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) +* [Getting started with Syncfusion® Blazor WebAssembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) -N> You can also explore our [Blazor TimePicker Example](https://blazor.syncfusion.com/demos/timepicker/default-functionalities?theme=fluent) that shows you how to render and configure the TimePicker. \ No newline at end of file +N> Explore the [Blazor TimePicker example](https://blazor.syncfusion.com/demos/timepicker/default-functionalities?theme=fluent) to learn how to render and configure the TimePicker. \ No newline at end of file diff --git a/blazor/toast/getting-started-webapp.md b/blazor/toast/getting-started-webapp.md index a0529f6d8f..e5f2df9a7a 100644 --- a/blazor/toast/getting-started-webapp.md +++ b/blazor/toast/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Toast in Blazor Web App -This section briefly explains about how to include [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -17,32 +17,28 @@ This section briefly explains about how to include [Blazor Toast](https://www.sy ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## 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 Blazor Web App. ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add **Blazor Toast** 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.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Toast** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) 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. +For `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. For `Server` render mode, install them in the Server project. -Alternatively, you can utilize the following package manager command to achieve the same. - -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} +Alternatively, execute the following Package Manager commands: +```powershell Install-Package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }} 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 full list of packages and components. {% endtabcontent %} @@ -50,49 +46,39 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## 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). - -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. +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). -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +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 Blazor Web App. -{% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +```bash dotnet new blazor -o BlazorWebApp -int Auto cd BlazorWebApp 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). ## Install Syncfusion® Blazor Notifications 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. - -* 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.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. - -{% tabs %} +For `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. -{% highlight c# tabtitle="Package Manager" %} +- Open the integrated terminal in Visual Studio Code. +- Navigate to the project directory that contains the `.csproj` file. +- Run the following commands to install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. +```bash dotnet add package Syncfusion.Blazor.Notifications -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} dotnet restore +``` -{% 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 full list of packages and components. {% endtabcontent %} @@ -102,29 +88,23 @@ 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.| - -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. +| WebAssembly or Auto | Open **~/_Imports.razor** file from the Client project. | +| Server | Open **~/_Imports.razor** file located in the `Components` folder. | -{% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces: +```razor @using Syncfusion.Blazor @using Syncfusion.Blazor.Notifications +``` -{% endhighlight %} -{% endtabs %} - -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +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). -{% tabs %} -{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} +Server: -... -... +```csharp using Syncfusion.Blazor; var builder = WebApplication.CreateBuilder(args); @@ -133,31 +113,26 @@ var builder = WebApplication.CreateBuilder(args); builder.Services.AddRazorComponents() .AddInteractiveServerComponents() .AddInteractiveWebAssemblyComponents(); + builder.Services.AddSyncfusionBlazor(); var app = builder.Build(); -.... +``` -{% endhighlight %} -{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} +Client: -... +```csharp using Syncfusion.Blazor; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddSyncfusionBlazor(); 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. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} +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. -... +```csharp using Syncfusion.Blazor; var builder = WebApplication.CreateBuilder(args); @@ -165,35 +140,33 @@ var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); + builder.Services.AddSyncfusionBlazor(); var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} +``` ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via NuGet as [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: ```html - .... + - .... + ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for additional options 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)). Also, refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to add script references in a Blazor application. ## Add Syncfusion® Blazor Toast component -Add the Syncfusion® Blazor Toast component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Toast component to a page in the **~/Pages** folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~/Pages/*.razor` component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,31 +175,30 @@ Add the Syncfusion® Blazor Toast component | | 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 set to `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. -{% tabs %} -{% highlight razor %} +Render mode directive: -@* desired render mode define here *@ +```razor +@* Desired render mode defined here *@ @rendermode InteractiveAuto +``` -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight cshtml %} +Toast component example: +```razor
-
+
+ + @code { - SfToast ToastObj; + private SfToast ToastObj; private string ToastPosition = "Right"; private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM"; + private async Task ShowOnClick() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } + private async Task HideOnClick() { - await this.ToastObj.HideAsync("All"); + await ToastObj.HideAsync("All"); } } +``` -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Toast component in your default web browser. +Use Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Toast component renders in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrzNiKXJRibajXZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toast Component](./images/blazor-toast.png)" %} @@ -263,9 +236,9 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See Also -* [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor) -* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app) -* [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) +- [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor) +- [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-server-side-dotnet-cli) -N> You can also explore our [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) that shows you how to render and configure the toast. \ No newline at end of file +N> An interactive [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) demonstrates how to render and configure the Toast component. \ No newline at end of file diff --git a/blazor/toast/getting-started.md b/blazor/toast/getting-started.md index 75a2f04c0b..ec81010f6c 100644 --- a/blazor/toast/getting-started.md +++ b/blazor/toast/getting-started.md @@ -9,12 +9,13 @@ documentation: ug # Getting Started with Blazor Toast Component -This section briefly explains about how to include [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. - -To get start quickly with Blazor Toast component, check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast) sample. +This section explains how to add the [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code. +A quick-start video and a sample repository are available: +- Video: {% youtube "youtube:https://www.youtube.com/watch?v=tMa7JvcfNcY"%} +- Sample on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast) {% tabcontents %} @@ -22,26 +23,22 @@ To get start quickly with Blazor Toast component, check on this video or [GitHub ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## 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-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Notifications and Themes NuGet in the App -To add **Blazor Toast** 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.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) 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. - -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} +Install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using the NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), or run the following commands: +```powershell Install-Package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }} 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 %} @@ -49,44 +46,30 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## 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-8.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+`). - -{% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +Alternatively, create a WebAssembly application using the following commands in the integrated terminal: +```bash dotnet new blazorwasm -o BlazorApp cd BlazorApp - -{% endhighlight %} - -{% endtabs %} +``` ## Install Syncfusion® Blazor Notifications 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.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. - -{% tabs %} - -{% highlight c# tabtitle="Package Manager" %} +Use the integrated terminal in Visual Studio Code from the project root (where the `.csproj` file is located), then run: +```bash dotnet add package Syncfusion.Blazor.Notifications -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} dotnet restore +``` -{% 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 %} @@ -94,22 +77,16 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespace. - -{% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +Open `~/_Imports.razor` and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces: +```razor @using Syncfusion.Blazor @using Syncfusion.Blazor.Notifications +``` -{% endhighlight %} -{% endtabs %} - -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. - -{% tabs %} -{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} +Register the Syncfusion® Blazor service in `~/Program.cs` of the Blazor WebAssembly app: +```csharp using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Syncfusion.Blazor; @@ -122,42 +99,39 @@ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder. builder.Services.AddSyncfusionBlazor(); await builder.Build().RunAsync(); -.... - -{% endhighlight %} -{% endtabs %} +``` ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of `~/wwwroot/index.html`: ```html - .... + ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor Toast component +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover options for referencing 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)). Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for different approaches to add script references in a Blazor application. -Add the Syncfusion® Blazor Toast component in the **~/Pages/Index.razor** file. +## Add Blazor Toast component -{% tabs %} -{% highlight cshtml %} +Add the Syncfusion® Blazor Toast component to `~/Pages/Index.razor`: +```razor
-
+
+ + @code { - SfToast ToastObj; + private SfToast ToastObj; private string ToastPosition = "Right"; private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM"; + private async Task ShowOnClick() { - await this.ToastObj.ShowAsync(); + await ToastObj.ShowAsync(); } + private async Task HideOnClick() { - await this.ToastObj.HideAsync("All"); + await ToastObj.HideAsync("All"); } } +``` -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Toast component in your default web browser. +Launch the application with Ctrl+F5 (Windows) or ⌘+F5 (macOS). The Syncfusion® Blazor Toast component renders in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrzNiKXJRibajXZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toast Component](./images/blazor-toast.png)" %} ## See Also -* [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor) -* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://sfblazor.azurewebsites.net/staging/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-server-side-visual-studio) +- [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor) +- [Getting Started with Syncfusion® Blazor WebAssembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-dotnet-cli) +- [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-server-side-visual-studio) -N> You can also explore our [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) that shows you how to render and configure the toast. +N> An interactive [Blazor Toast example](https://blazor.syncfusion.com/demos/toast/default-functionalities?theme=bootstrap5) demonstrates how to render and configure the Toast component. \ No newline at end of file diff --git a/blazor/treegrid/editing/batch-editing.md b/blazor/treegrid/editing/batch-editing.md index d58c6a0c10..0e441f6dcd 100644 --- a/blazor/treegrid/editing/batch-editing.md +++ b/blazor/treegrid/editing/batch-editing.md @@ -153,4 +153,5 @@ 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/print.md b/blazor/treegrid/print.md index 1c3c8564de..87d5e2aa2b 100644 --- a/blazor/treegrid/print.md +++ b/blazor/treegrid/print.md @@ -256,6 +256,4 @@ In the below example, we have **Duration** as a hidden column in the TreeGrid. W ## Limitations of printing large data -When tree grid contains large number of data, printing all the data at once is not a best option for the browser performance. Because to render all the DOM elements in one page will produce performance issues in the browser. It leads to browser slow down or browser hang. - Printing large datasets directly from the browser may lead to performance issues such as slow rendering or browser hang. For better performance, consider exporting the TreeGrid to **Excel**, **CSV**, or **PDF**, and print using a desktop application. diff --git a/blazor/treegrid/rows/row-drag-and-drop.md b/blazor/treegrid/rows/row-drag-and-drop.md index 209f0d68a1..7e88a69f75 100644 --- a/blazor/treegrid/rows/row-drag-and-drop.md +++ b/blazor/treegrid/rows/row-drag-and-drop.md @@ -1077,5 +1077,3 @@ The following events are triggered while dragging and dropping TreeGrid rows. [RowDragStarting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowDragStarting) - Triggers when a row drag operation starts. [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowDropped) - Triggers when the dragged row is dropped on the target element. - -