diff --git a/blazor-toc.html b/blazor-toc.html index 102d9c53d3..9d01dcca15 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -391,6 +391,9 @@
  • Deploy a Blazor Web App to Azure App Service
    • +
  • + Deploy a Blazor Web App to Linux with NGINX +
  • @@ -2183,6 +2186,7 @@
  • Paging
  • Selection
  • Sorting
    • +
  • Toolbar
  • How To @@ -2993,10 +2997,13 @@
  • Asynchronous Upload
    • +
  • FileUpload Configuration
    • +
  • FileUpload Methods
  • Accessibility
  • Chunk Upload
  • Localization
  • File Source
    • +
  • Drag and Drop
  • Template
  • Validation
  • Form Integration
    • @@ -4971,6 +4978,7 @@
  • 31.1.18
    • +
  • 31.2.9 Service Pack Release
  • 31.2.2 Service Pack Release
  • 31.1.17 Main Release
  • 2025 Volume 2 - 30.*
  • 2025 Volume 1 - 29.*
  • 2024 Volume 4 - 28.*
  • 2024 Volume 3 - 27.*
  • 2024 Volume 2 - 26.*
  • 2024 Volume 1 - 25.*
  • 2023 Volume 4 - 24.*
  • 2023 Volume 3 - 23.*
  • 2023 Volume 2 - 22.*
  • 2023 Volume 1 - 21.*
    • diff --git a/blazor/Release-Notes/31.2.9.md b/blazor/Release-Notes/31.2.9.md new file mode 100644 index 0000000000..dd89f63f11 --- /dev/null +++ b/blazor/Release-Notes/31.2.9.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for Blazor Release Notes +description: Learn here about the controls in the Essential Studio for Blazor 2025 Volume 3 SP2 Release - Release Notes +platform: blazor +documentation: ug +--- + +# Essential Studio for Blazor - v31.2.9 Release Notes + +{% include release-info.html date="November 12, 2025" version="v31.2.9" %} + +{% directory path: _includes/release-notes/v31.2.9 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/blazor/barcode/barcodeGenerator.md b/blazor/barcode/barcodeGenerator.md index ad9c4402b5..ead03d15fc 100644 --- a/blazor/barcode/barcodeGenerator.md +++ b/blazor/barcode/barcodeGenerator.md @@ -11,7 +11,7 @@ documentation: ug ## Code39 -The Code 39 character set includes the digits 0-9, the letters A-Z (upper case only), and the symbols: space, minus (-), plus (+), period (.), dollar sign ($), slash (/), and percent (%). A special start/stop character is placed at the beginning and end of each barcode. The barcode can be of any length; even more than 25 characters begin to push the bounds. Code 39 is the only type of barcode that does not require a checksum for common use. +The Code 39 character set includes digits 0-9, uppercase letters A–Z, and the symbols space, minus (-), plus (+), period (.), dollar ($), slash (/), and percent (%). A special start/stop character is placed at the beginning and end of each barcode. The barcode can be of any length; even more than 25 characters begin to push the bounds. Code 39 is the only type of barcode that does not require a checksum for common use. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -23,7 +23,7 @@ The Code 39 character set includes the digits 0-9, the letters A-Z (upper case o ## Code39 Extended -Code 39 Extended is an extended version of Code 39 that supports ASCII character set. In Code 39 Extended, you can also code 26 lower letters (a-z) and the special characters in the keyboard. +Code 39 Extended is an enhanced version of Code 39 that supports ASCII character set. In Code 39 Extended, it can encode lowercase letters (a–z) and special keyboard characters by using combinations of standard Code 39 symbols. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -35,7 +35,7 @@ Code 39 Extended is an extended version of Code 39 that supports ASCII character ## Code 11 -Code 11 is used primarily for labeling the telecommunication equipment’s. The character set includes the digits 0 to 9, a dash (-), and a start/stop code. +Code 11 is used primarily for labeling telecommunications equipment. The character set includes digits 0 to 9, a dash (-), and start/stop codes. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -47,11 +47,11 @@ Code 11 is used primarily for labeling the telecommunication equipment’s. The ## Codabar -Codabar is a variable length symbol that encodes the following 20 characters: +Codabar is a variable-length symbol that encodes the following 20 characters: 0123456789-$:/.+ABCD -The characters A, B, C and D are used as start and stop characters. Codabar is used in libraries, blood banks, the package delivery industry and a variety of other information processing applications. +The characters A, B, C, and D serve as start and stop characters. Codabar is used in libraries, blood banks, the package delivery industry and a variety of other information processing applications. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -63,11 +63,11 @@ The characters A, B, C and D are used as start and stop characters. Codabar is u ## Code 32 -Code 32 is mainly used for coding pharmaceuticals, cosmetics, and dietetics. It is often used to encode Italian Pharmacode that has the following structure: +Code 32 is used mainly for coding pharmaceuticals, cosmetics, and dietetics. It is often to encode the Italian Pharmacode that has the following structure: * ‘A’ character (ASCII 65), that is not really encoded. -* 8 digits for Pharmacode (It generally begins with / and prefixed with 0). -* 1 digit for checksum module 10, that is automatically calculated by barcode. +* 8 digits for the Pharmacode (It generally begins with / and prefixed with 0). +* 1 digit for checksum module 10, that is automatically calculated by the barcode. The value to be encoded must be 8 digits Pharmacode (prefix it with ‘0’ if necessary), and the 9th digit (the checksum) is automatically calculated by barcode. @@ -81,7 +81,7 @@ The value to be encoded must be 8 digits Pharmacode (prefix it with ‘0’ if n ## Code 93 -Code 93 is designed to complement and improve Code 39. It can represent the entire ASCII character set by using combinations of 2 characters. Code 93 is a continuous, variable-length symbology and produces denser code. The Standard Mode (default implementation) can encode uppercase letters (A-Z), digits (0-9), and special characters like *, -, $, %, (Space), ., /, and +. +Code 93 is designed to complement and improve Code 39. It represents the entire ASCII character set through combinations of two characters. Code 93 is a continuous, variable-length symbology and produces denser code. The Standard Mode (default implementation) can encode uppercase letters (A-Z), digits (0-9), and special characters like *, -, $, %, (Space), ., /, and +. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -93,11 +93,11 @@ Code 93 is designed to complement and improve Code 39. It can represent the enti ## Code 93 Extended -The Code 93 Extended Barcode symbology is continuous, variable length, and self-checking. It is based on Code 93 Barcode. The Extended Version can encode all 128 ASCII characters. +Code 93 Extended Barcode symbology is a continuous, variable length, self-checking. It is based on Code 93 Barcode. The Extended Version can encode all 128 ASCII characters. ## Code 128 -Code 128 is a variable length, high density, alphanumeric, linear bar code symbology capable of encoding full 128-character ASCII character set and extended character sets. This symbology includes a checksum digit for verification and the barcode can also be verified character-by-character by verifying the parity of each data byte. +Code 128 is a variable-length, high-density, alphanumeric, linear bar code symbology capable of encoding full 128-character ASCII character set and extended character sets. This symbology includes a checksum digit for verification and the barcode can be verified character-by-character by verifying the parity of each data byte. ### Code 128 Code Sets @@ -107,7 +107,7 @@ Code 128 is a variable length, high density, alphanumeric, linear bar code symbo ### Code 128 Special characters -The last seven characters of Code Sets A and B (character values 96 - 102) and the last three characters of Code Set C (character values 100 - 102) are special non-data characters with no ASCII character equivalents that have a particular significance to the Barcode reading device. +The last seven characters of Code Sets A and B (character values 96-102) and the last three characters of Code Set C (character values 100-102) are special non-data characters with no ASCII character equivalents that have a particular significance to the Barcode reading device. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -131,7 +131,7 @@ A page or printed media with barcode often appears colorful in the background an ## Customizing the Barcode dimension -The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Width) properties of the barcode generator. +The dimensions of the barcode can be adjusted using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -143,7 +143,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ## Customizing the text -In barcode generators, you can customize the barcode text by using display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.BarcodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_BarcodeGeneratorDisplayText_Text) property. +In barcode generators, Customize the barcode text by using display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.BarcodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_BarcodeGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -173,7 +173,7 @@ The below code explains how to set the EnableCheckSum property to hide the extra ## Event -[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_OnValidationFailed) event in the [SfBarcodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html) is used to trigger when the input is an invalid string. +[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_OnValidationFailed) event in the [SfBarcodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html) is used to trigger when the input is invalid string. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -186,6 +186,8 @@ The below code explains how to set the EnableCheckSum property to hide the extra } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBSiDDFBHLnIOaq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## See also * [How to generate a QR Code in (2FA) Application in Blazor Diagram?](https://support.syncfusion.com/kb/article/16295/how-to-generate-a-qr-code-in-2fa-application-in-blazor-diagram) diff --git a/blazor/barcode/datamatrixgenerator.md b/blazor/barcode/datamatrixgenerator.md index 49417b1b81..784b1d8ce7 100644 --- a/blazor/barcode/datamatrixgenerator.md +++ b/blazor/barcode/datamatrixgenerator.md @@ -11,7 +11,7 @@ documentation: ug ## Data Matrix -[DataMatrix](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html) Barcode is a two dimensional barcode that consists of a grid of dark and light dots or blocks forming square or rectangular symbol. The data encoded in the barcode can either be numbers or alphanumeric. They are widely used in printed media such as labels and letters. You can read it easily with the help of a barcode reader and mobile phones. +The [DataMatrix](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html) barcode is a two-dimensional barcode that consists of a grid of dark and light dots or blocks forming square or rectangular symbol. The data encoded in the barcode can either be numbers or alphanumeric. They are widely used in printed media such as labels and letters. You can read it easily with the help of a barcode reader and mobile phones. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -23,7 +23,7 @@ documentation: ug ## Customizing the Barcode color -A page or printed media with barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to suit the needs. You can achieve this by using the [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_ForeColor) property. +A page or printed media with barcode often appears colorful in the backgrounds and surrounding region with other contents. The barcode can be customized to suit the design by using the [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_ForeColor) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -35,7 +35,7 @@ A page or printed media with barcode often appears colorful in the background an ## Customizing the Barcode dimension -The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Width) properties of the barcode generator. +The dimensions of the barcode can be adjusted by using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -47,7 +47,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ## Customizing the text -In barcode generators, you can customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.DataMatrixGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_DataMatrixGeneratorDisplayText_Text) property. +Customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.DataMatrixGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_DataMatrixGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -75,4 +75,5 @@ In barcode generators, you can customize the barcode text by using the display [ } } -``` \ No newline at end of file +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVystDPBHHDqsFK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/barcode/export.md b/blazor/barcode/export.md index 906d772e42..ca72a614c7 100644 --- a/blazor/barcode/export.md +++ b/blazor/barcode/export.md @@ -55,6 +55,6 @@ Barcode provides support to export as an image in the specified image type and r ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBgWLWfTiCgSXzC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Format is to specify the type/format of the exported file. You can export Barcode to the following formats: +N> Format specifies the image type of the exported file. The following export formats are supported:
    * JPG.
    * PNG. \ No newline at end of file diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 4187049f09..50ffd956fa 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Barcode Component in Blazor Web App -This section briefly explains about how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) 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 Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) 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 Barcode](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 the Blazor Web Application. ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -To add **Blazor Barcode** 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.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Barcode** 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.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) 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 the `WebAssembly or Auto` render modes in a Blazor Web App need to be install Syncfusion® Blazor component NuGet packages within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -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 the 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 about 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 BarcodeGenerator 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 the `WebAssembly` or `Auto` render modes in a Blazor Web App need to be install Syncfusion® Blazor component 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.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is opened at the project directory containing the .csproj file. +* Run the following commands to install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -92,13 +92,13 @@ 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 [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor service | Interactive Render Mode | Description | | -- | -- | @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespac {% 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" %} @@ -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 will contain a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -193,7 +193,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in the **~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 Barcode component in a **~Pages/.razor** file. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Barcode componen | | 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` or `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 Barcode component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.png)" %} @@ -229,7 +229,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Adding QR Generator control -You can add the QR code in our barcode generator component. +Add a QR code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -243,7 +243,7 @@ You can add the QR code in our barcode generator component. ## Adding Data Matrix Generator control -You can add the Data Matrix code in our barcode generator component. +Add a Data Matrix code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -255,10 +255,10 @@ You can add the Data Matrix code in our barcode generator component. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBzZMBSARZqShgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode Component](images/blazor-barcode-with-data-matrix.png)" %} -N> You can also explore our [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. +N> Explore the [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/barcode/getting-started.md b/blazor/barcode/getting-started.md index ae9f078467..df3c5937f4 100644 --- a/blazor/barcode/getting-started.md +++ b/blazor/barcode/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Barcode Component -This section briefly explains about how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor WebAssembly app using Visual Studio or Visual Studio Code. {% youtube "youtube:https://www.youtube.com/watch?v=CuApVvYbQtI" %} @@ -23,11 +23,11 @@ This section briefly explains about how to include [Blazor Barcode](https://www. ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -To add **Blazor Barcode** 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.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Barcode** 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.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +38,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 [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. {% endtabcontent %} @@ -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-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal(Ctrl+`). {% tabs %} @@ -68,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor BarcodeGenerator 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 terminal is opened at the project root directory where the .csproj file is located. * Run the following command to install a [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -102,7 +102,7 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -135,11 +135,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 the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. ## Add Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Barcode component in **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -149,7 +149,7 @@ Add the Syncfusion® Blazor Barcode componen {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Barcode component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.png)" %} @@ -157,7 +157,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Adding QR Generator control -You can add the QR code in our barcode generator component. +Add a QR code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -171,7 +171,7 @@ You can add the QR code in our barcode generator component. ## Adding Data Matrix Generator control -You can add the Data Matrix code in our barcode generator component. +Add a Data Matrix code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -183,7 +183,7 @@ You can add the Data Matrix code in our barcode generator component. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBzZMBSARZqShgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode Component](images/blazor-barcode-with-data-matrix.png)" %} -N> You can also explore our [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. +N> Explore the [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. ## See also diff --git a/blazor/barcode/qrcodegenerator.md b/blazor/barcode/qrcodegenerator.md index f23e983f8b..003fe379b7 100644 --- a/blazor/barcode/qrcodegenerator.md +++ b/blazor/barcode/qrcodegenerator.md @@ -11,7 +11,7 @@ documentation: ug ## QR Code -The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode that is made up of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. +The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode composed of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -23,7 +23,7 @@ The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode ## Customizing the Barcode color -A page or printed media containing a barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to meet the needs. You can achieve this using [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_ForeColor) property. +A page or printed media containing a barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to meet the needs. Achieve this using [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_ForeColor) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -35,7 +35,7 @@ A page or printed media containing a barcode often appears colorful in the backg ## Customizing the Barcode dimension -The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Width) properties of the barcode generator. +The dimensions of the barcode can be changed by using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -47,7 +47,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ## Customizing the text -In barcode generators, you can customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeGeneratorDisplayText_Text) property. +In barcode generators, customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -103,6 +103,7 @@ The following code example demonstrates how to generate a QR barcode with a logo ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLSiDXvrxgTOVrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![QR barcode with logo in Blazor Barcode](images/blazor-barcode-qrcode-with-logo.png) @@ -119,11 +120,13 @@ The size of the logo can be changed using the [Height](https://help.syncfusion.c ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryitNPLdzgLNmN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + >**Note:** The default value is one-third of the QR code size. ## Event -[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_OnValidationFailed) event in the [SfQRCodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html) is used to trigger when the input is an invalid string. +[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_OnValidationFailed) event in the [SfQRCodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html) is triggered when the input is an invalid string. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -138,6 +141,8 @@ The size of the logo can be changed using the [Height](https://help.syncfusion.c } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBosZZlhdfwvyVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + * [How can I adjust the margin of the QR code and handle text positioning when using the QRCodeGenerator in Syncfusion?](https://support.syncfusion.com/kb/article/18734/how-can-i-adjust-the-margin-of-the-qr-code-and-handle-text-positioning-when-using-the-qrcodegenerator-in-syncfusion) * [How to export the QR code in a Blazor Server project to a desired location using a memory stream?](https://support.syncfusion.com/kb/article/17216/how-to-export-the-qr-code-in-a-blazor-server-project-to-a-desired-location-using-a-memory-stream) \ No newline at end of file diff --git a/blazor/common/deployment/deployment-linux-nginx.md b/blazor/common/deployment/deployment-linux-nginx.md new file mode 100644 index 0000000000..f17bdf89e3 --- /dev/null +++ b/blazor/common/deployment/deployment-linux-nginx.md @@ -0,0 +1,110 @@ +--- +layout: post +title: Deploy a Blazor Web App to Linux with NGINX | Syncfusion +description: Learn here all about deploying the Blazor Web App with Syncfusion Blazor Components to Linux server using NGINX. +platform: Blazor +component: Common +documentation: ug +--- + +# Deploy Blazor Web App to Linux with NGINX + +This section provides information about deploying a Blazor Web applications with the Syncfusion Blazor components to Linux server using NGINX as a reverse proxy. + +Refer to [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0&tabs=linux-ubuntu) topic for more information. + +## Prerequisites + +* Linux Server – Ubuntu 20.04, Red Hat Enterprise (RHEL) 8.0 and SUSE Linux Enterprise Server 12. +* [.NET runtime](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk) installed on the server. +* An existing Blazor Web App with Syncfusion components or create a new one. + +## Install and Start NGINX + +Install NGINX on your Linux system and enable it to start automatically: + +```bash +sudo dnf install nginx +sudo systemctl start nginx +sudo systemctl enable nginx +sudo systemctl status nginx +``` + +**Verification**: Open `http://your-server-ip` in a browser — you should see the NGINX welcome page. + +## Create and publish Your Blazor Web App with Syncfusion Components + +* You can create a Blazor Web App using the .NET CLI commands with Syncfusion components by referring [here](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli). + +* Publish your Blazor Web application in Release configuration using the following command and run it: + +```bash +dotnet publish -c Release -o publish +cd publish +dotnet SfBlazorApp.dll --urls "http://0.0.0.0:5000" +``` + +![Publish Blazor Web App](../images/publish-blazor-app.jpg) + +## Configure NGINX to Proxy Requests + +Create a new NGINX configuration file for your Blazor application: + +```bash +sudo nano /etc/nginx/conf.d/blazorapp.conf +``` + +Add the following configuration to enable NGINX to act as a reverse proxy: + +```nginx +server { + listen 80; + server_name _; + location / { + proxy_pass http://localhost:5000; + proxy_http_version 1.1; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "upgrade"; + } +} +``` + +Save and exit the file (Ctrl+O, Enter, then Ctrl+X). + +## Validate and Restart NGINX + +Test the NGINX configuration and restart the service: + +```bash +sudo nginx -t +sudo systemctl restart nginx +``` + +## Configure SELinux (For Red Hat-based Systems) + +On Red Hat-based systems, SELinux may block NGINX from accessing your Blazor app. Allow NGINX to connect to network services: + +```bash +sudo setsebool -P httpd_can_network_connect 1 +``` + +## Access the Application + +From your Windows machine or any other device, open a browser and navigate to: + +``` +http:/// +``` + +You should now see your Blazor Web app running successfully with Syncfusion components! + +![Output-Linux](../images/output-linux.png) + +## See also + +* [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0) +* [Configure NGINX for ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0#configure-nginx) diff --git a/blazor/common/images/output-linux.png b/blazor/common/images/output-linux.png new file mode 100644 index 0000000000..4064e734d1 Binary files /dev/null and b/blazor/common/images/output-linux.png differ diff --git a/blazor/common/images/publish-blazor-app.jpg b/blazor/common/images/publish-blazor-app.jpg new file mode 100644 index 0000000000..9c3ee9997a Binary files /dev/null and b/blazor/common/images/publish-blazor-app.jpg differ diff --git a/blazor/datagrid/clipboard.md b/blazor/datagrid/clipboard.md index 0691049aa7..0cadf2f9d6 100644 --- a/blazor/datagrid/clipboard.md +++ b/blazor/datagrid/clipboard.md @@ -1,31 +1,30 @@ --- layout: post title: Clipboard in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Clipboard in the Syncfusion Blazor DataGrid component and much more. +description: Learn how to copy, paste, and autofill data in the Syncfusion Blazor DataGrid using keyboard shortcuts, buttons, and batch editing. platform: Blazor control: DataGrid documentation: ug --- -# Clipboard in Blazor DataGrid +# Clipboard in Syncfusion Blazor DataGrid -The clipboard feature in the Syncfusion® Blazor DataGrid provides an easy way to copy selected rows or cells data into the clipboard. You can use keyboard shortcuts to perform the copy operation. The following list of keyboard shortcuts is supported in the Grid to copy selected rows or cells data into clipboard. +The **clipboard** feature in the Syncfusion® Blazor DataGrid allows copying selected rows or cells using keyboard shortcuts or programmatic methods. This helps transfer data to external applications such as spreadsheets or text editors. +To use keyboard shortcuts, selection must be enabled and the grid must be focused. -Interaction keys |Description ------|----- -Ctrl + C |Copy selected rows or cells data into clipboard. -Ctrl + Shift + H |Copy selected rows or cells data with header into clipboard. +| Windows | Mac | Actions | +|---------|-----|---------| +| Ctrl + C | Command + C | Copy selected rows or cells to the clipboard | +| Ctrl + Shift + H | Command + Shift + H | Copy selected rows or cells with headers to the clipboard | -By using these keyboard shortcuts, you can quickly copy data from the Grid to the clipboard, making it easy to paste the data into other applications or documents. - -To enable the clipboard feature, you can use the Grid with your data source and selection property. +To enable clipboard functionality, configure the DataGrid with the required [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html). If the selection mode is **Row**, entire rows are copied. If it is **Cell**, only the highlighted cells are copied. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -36,7 +35,7 @@ To enable the clipboard feature, you can use the Grid with your data source and @code { - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -48,40 +47,40 @@ To enable the clipboard feature, you can use the Grid with your data source and {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + internal OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -93,14 +92,16 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIMNVlTrSTfkKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLosNWcpKkBYKnF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## Copy to clipboard using external buttons -## Copy to clipboard by external buttons +Clipboard actions can be triggered using external buttons when using UI controls is preferred over shortcut keys. -Copying data to the clipboard by using external buttons in the Syncfusion® Blazor DataGrid allows you to programmatically trigger the copy operation, making it more friendly, especially for those who may not be familiar with keyboard shortcuts or manual copying. +The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method programmatically copies selected rows or cells: -To copy selected rows or cells data into the clipboard with the help of external buttons, you can utilize the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method available in the Grid. This is demonstrated in the following example, +- Pass **true** to include column headers in the copied content. +- Pass **false** or omit the parameter to copy without headers. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -123,19 +124,19 @@ To copy selected rows or cells data into the clipboard with the help of external @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public async Task Copy() + private async Task Copy() { await Grid.CopyAsync(); } - public async Task CopyHeader() + private async Task CopyHeader() { await Grid.CopyAsync(true); } @@ -145,40 +146,40 @@ To copy selected rows or cells data into the clipboard with the help of external {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + internal OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -190,32 +191,27 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSDfMKeTVVoBtf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSsjCcfTtZWPnL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## AutoFill -The AutoFill feature in the Syncfusion® Blazor DataGrid allows you to copy the data of selected cells and paste it into other cells by simply dragging the autofill icon of the selected cells to the desired cells. This feature provides a convenient way to quickly populate data in a grid. - -**how to use the autofill feature** +The AutoFill feature in the Syncfusion® Blazor DataGrid allows quick data entry by copying values from selected cells and filling them into adjacent cells using a drag handle. -1. Select the cells from which you want to copy data. +**Steps to use AutoFill feature** -2. Hover over the bottom-right corner of the selection to reveal the autofill icon. +1. Select the desired cells to copy. +2. Hover over the bottom-right corner of the selection to display the autofill handle. +3. Drag the handle to the target cells. +4. Release the mouse to populate the target cells with the copied data. -3. Click and hold the autofill icon, then drag it to the target cells where you want to paste the copied data. - -4. Release the mouse to complete the autofill action, and the data from the source cells will be copied and pasted into the target cells. - -This feature is enabled by defining [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property as **true**. - -The following example demonstrates how to enable the autofill feature in the Grid. +To enable AutoFill, set the [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property to **true** and use [Batch editing](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) to allow copying values across multiple cells. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -227,7 +223,7 @@ The following example demonstrates how to enable the autofill feature in the Gri @code { - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -239,40 +235,40 @@ The following example demonstrates how to enable the autofill feature in the Gri {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); public OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -284,46 +280,39 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLojTCUezbECphd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -> * If [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to **true**, then the autofill icon will be displayed on cell selection to copy cells. -> * It requires the selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to be **Cell**, [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) to be **Box** and also [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#fields) to be **Batch**. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIsNicJTjOUEma?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +> * When [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to **true**, the autofill handle appears on cell selection. +> * AutoFill requires selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) set to **Cell**, [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) set to **Box**, and [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#fields) set to `Batch`. ### Limitations -* AutoFill does not automatically convert string values to number or date types. If the selected cells contain string data and are dragged to number-type cells, the target cells will display **NaN**. Similarly, when dragging string-type cells to date-type cells, the target cells will display as an **empty cell**. It is important to ensure data types are compatible before using autofill to avoid unexpected results. - -* The AutoFill feature does not support generating non-linear series or sequential data automatically. Cannot create complex series or patterns by simply dragging cells with non-sequential data. The autofill feature is designed for copying and pasting data from a selected range of cells. - -* The AutoFill feature does not support virtual scrolling or column virtualization in the Grid. - -* The Auto Fill feature can only be applied to the viewport cell when enabling the features of infinite scrolling in the Grid. +- **Data Type Conversion**: AutoFill does not convert string values to numeric or date types. Copying strings into numeric cells results in **NaN**, and copying strings into date cells results in an **empty cell**. +- **Value Copying**: AutoFill copies values directly from the source range without generating non-linear or sequential series. +- **Virtualization**: AutoFill is not supported with virtual scrolling or column virtualization. +- **Infinite Scrolling**: With infinite scrolling, AutoFill applies only to cells within the current viewport. ## Paste -The Syncfusion® Blazor DataGrid provides a paste feature that allows you to copy the content of a cell or a group of cells and paste it into another set of cells. This feature allows you to quickly copy and paste content within the grid, making it convenient for data entry and manipulation. - -Follow the steps below to use the Paste feature in the grid: +The Paste feature in the Syncfusion® Blazor DataGrid allows copying content from selected cells and pasting it into another range using Ctrl + C and Ctrl + V. -1. Select the cells from which you want to copy the content. +**To paste data within the grid:** -2. Press the Ctrl + C shortcut key to copy the selected cells' content to the clipboard. - -3. Select the target cells where you want to paste the copied content. - -4. Press the Ctrl + V shortcut key to paste the copied content into the target cells. +1. Select the cells to copy. +2. Press Ctrl + C to copy the content. +3. Select the target cells. +4. Press Ctrl + V to paste the copied content. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + @@ -331,7 +320,7 @@ Follow the steps below to use the Paste feature in the grid: @code { - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -343,40 +332,40 @@ Follow the steps below to use the Paste feature in the grid: {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); public OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -388,11 +377,10 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthyNzsUeyrJRGbs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBoWNsGJziFNQMu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> To perform paste functionality, it requires the selection **mode** to be **Cell**, **cellSelectionMode** to be **Box** and also Batch Editing should be enabled. +> To paste content, set selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to **Cell**, set [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) to **Box**, and enable [Batch editing](https://blazor.syncfusion.com/documentation/datagrid/batch-editing). ### Limitations -* The Paste feature does not automatically convert string values to number or date types. If the selected cells contain string data and are dragged to number-type cells, the target cells will display **NaN**. Similarly, when dragging string-type cells to date-type cells, the target cells will display as an **empty cell**. It is important to ensure data types are compatible before using AutoFill to avoid unexpected results. \ No newline at end of file +- **Data Type Conversion**: Pasting does not convert string values to numeric or date types. Pasting strings into numeric cells results in **NaN**, and pasting strings into date cells results in an **empty cell**. Ensure that the pasted values are compatible with the target column's data type. \ No newline at end of file diff --git a/blazor/datagrid/context-menu.md b/blazor/datagrid/context-menu.md index 3f5adcc36a..7ff8c0d564 100644 --- a/blazor/datagrid/context-menu.md +++ b/blazor/datagrid/context-menu.md @@ -7,18 +7,20 @@ control: DataGrid documentation: ug --- -# Context menu in Syncfusion® Blazor DataGrid +# Context menu in Syncfusion Blazor DataGrid -The Syncfusion® Blazor DataGrid comes equipped with a context menu feature, which is triggered when a user right-clicks anywhere within the Grid. This feature serves to enrich the user experience by offering immediate access to a variety of supplementary actions and operations that can be executed on the data displayed in the Grid. +The Syncfusion® Blazor DataGrid supports a context menu that appears when right-clicking anywhere within the grid. This menu provides quick access to actions related to the grid’s data and layout, enhancing interactivity and usability. -To activate the context menu within the Grid, you have an option to configure the Grid's [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. You can set this property to either include the default context menu items or define your own custom context menu items, tailoring the menu options to suit your specific needs. This customization allows you to enhance the Grid's functionality by providing context-sensitive actions for interacting with your data. - -The context menu is triggered when you right-click on different areas of the Grid, including: - * Header: When you right-click on the Grid's header section. - * Content: When you right-click on the Grid's main content area. - * Pager: When you right-click on the pager section. +To enable the context menu, configure the Grid's [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. Use default items for built-in menu options or add custom items for tailored functionality. This feature improves interactivity by offering context-sensitive actions. -The default context menu items in the header area of the Grid are as follows: +The context menu appears when right-clicking in these Grid areas: +* **Header:** Displays column-specific actions. +* **Content:** Shows row-related options. +* **Pager:** Offers navigation controls. + +The default context menu items include: + +**Header** | Items | Description | | ---------------- | ------------------------------------------------------------ | @@ -29,7 +31,7 @@ The default context menu items in the header area of the Grid are as follows: | `SortAscending` | Sort the current column in ascending order. | | `SortDescending` | Sort the current column in descending order. | -The default context menu items in the content area of the Grid are as follows: +**Content** | Items | Description | | ------------- | ------------------------------------------------------------------- | @@ -42,7 +44,7 @@ The default context menu items in the content area of the Grid are as follows: | `ExcelExport` | Export the Grid data as an Excel document. | | `CsvExport` | Export the Grid data as a CSV document. | -The default context menu items in the pager area of the Grid are as follows: +**Pager** | Items | Description | | ----------- | ------------------------------------------ | @@ -51,7 +53,6 @@ The default context menu items in the pager area of the Grid are as follows: | `LastPage` | Navigate to the last page of the Grid. | | `NextPage` | Navigate to the next page of the Grid. | -The following example demonstrates how to enable context menu feature in the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -69,36 +70,19 @@ The following example demonstrates how to enable context menu feature in the Gri @code { - private SfGrid Grid; - public List Orders { get; set; } - - public List ContextMenuItems = new List - { - "AutoFit", - "AutoFitAll", - "SortAscending", - "SortDescending", - "Copy", - "Edit", - "Delete", - "Save", - "Cancel", - "PdfExport", - "ExcelExport", - "CsvExport", - "FirstPage", - "PrevPage", - "LastPage", - "NextPage", - "Group", - "Ungroup" + private SfGrid? Grid; + private List Orders { get; set; } = new List(); + private List ContextMenuItems = new() + { + "AutoFit", "AutoFitAll", "SortAscending", "SortDescending", "Copy", + "Edit", "Delete", "Save", "Cancel", "PdfExport", "ExcelExport", "CsvExport", + "FirstPage", "PrevPage", "LastPage", "NextPage", "Group", "Ungroup" }; protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - } {% endhighlight %} @@ -107,14 +91,14 @@ The following example demonstrates how to enable context menu feature in the Gri public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -150,18 +134,19 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBIjJjlfrgDinOe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrIsjrEUXtJazSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Custom context menu items -The Syncfusion® Blazor DataGrid empowers you to enhance your user experience by incorporating custom context menu items into the default context menu. These customized options enable you to tailor the context menu to meet the unique requirements of your application. +The Syncfusion® Blazor DataGrid supports adding custom context menu items along with default options. -To incorporate custom context menu items in the Syncfusion® Blazor DataGrid, you can achieve this by specifying the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property as a collection of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html). This allows you to define and customize the appearance and behavior of these additional context menu items according to your requirements. +To configure custom context menu items: -Furthermore, you can assign actions to these custom items by utilizing the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. This event provides you with the means to handle user interactions with the custom context menu items, enabling you to execute specific actions or operations when these items are clicked. +1. Define the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property as a collection of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects. +2. Specify properties such as **Text**, **Target**, and **Id** for each custom item. +3. Handle actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. -The following example demonstrates how to add custom context menu items in the Grid. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method is used to copy the selected rows or cells data to the clipboard, including headers. +The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method is used to copy selected rows or cells, including headers, to the clipboard. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -179,22 +164,21 @@ The following example demonstrates how to add custom context menu items in the G @code { - private SfGrid Grid; - public List Employees { get; set; } + private SfGrid? Grid; + private List? Employees { get; set; } protected override void OnInitialized() { Employees = EmployeeData.GetAllRecords(); } - public async Task OnContextMenuClick(ContextMenuClickEventArgs args) + private async Task OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "copywithheader") { - await this.Grid.CopyAsync(true); + await Grid!.CopyAsync(true); } } - } {% endhighlight %} @@ -203,15 +187,14 @@ The following example demonstrates how to add custom context menu items in the G public class EmployeeData { - - public static List Employees = new List(); + private static readonly List Employees = new(); public EmployeeData(int employeeID, string firstName, string lastName, string city) { - this.EmployeeID = employeeID; - this.FirstName = firstName; - this.LastName = lastName; - this.City = city; + EmployeeID = employeeID; + FirstName = firstName; + LastName = lastName; + City = city; } public static List GetAllRecords() @@ -247,46 +230,50 @@ public class EmployeeData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyDfNYsPWaHXLo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBoMjLaVOKOJFCg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Built-in and Custom context menu items -The Syncfusion® Blazor DataGrid provides the flexibility to use both built-in and custom context menu items simultaneously. This is useful when you want to extend the default functionalities (like copy, delete, or edit) with your own custom actions, such as Copy with headers, Export row, or other application-specific commands. +The Syncfusion® Blazor DataGrid supports using both built-in and custom context menu items together. This is helpful when extending default actions such as **Copy**, **Delete**, or **Edit** with application-specific commands like **Copy with headers** or **Export row**. + +To configure **built-in** and **custom** context menu items: -You can achieve this by defining a list containing both built-in menu item strings and custom context menu items using the [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property of the Grid. The actions for custom context menu items can be handled using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. +1. Define both built-in item strings and custom [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. +2. For custom items, specify properties such as **Text**, **Target**, and **Id**. +3. Handle custom actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. -The following example demonstrates how to define both built-in and custom context menu items, and how to handle the custom item action in the `ContextMenuItemClicked` event. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method is used to copy the selected rows or cells data to the clipboard, including headers. +The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method copies selected rows or cells, including headers, to the clipboard. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - - - - + + + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private SfGrid? Grid; + private List Orders { get; set; } = new List(); protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public async Task OnContextMenuClick(ContextMenuClickEventArgs args) + private async Task OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "copywithheader") { - await Grid.CopyAsync(true); + await Grid!.CopyAsync(true); } } } @@ -297,14 +284,14 @@ The following example demonstrates how to define both built-in and custom contex public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -340,29 +327,26 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBSNftEhBsXumEv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSiXBaVEwxOsiX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Sub context menu items in DataGrid -The Syncfusion® Blazor DataGrid supports hierarchical context menu structures, allowing you to define sub-context menu items that appear as child options under a parent item in the context menu. This feature is useful when organizing multiple related actions under a single top-level context menu item. - -To define sub-context menu items in the Blazor Grid, do follow the steps given below: - -1. Use the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property to define a list of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects. - -2. The sub context menu items can be added by defining the collection of `MenuItems` for `Items` Property in `ContextMenuItemModel`. +The Syncfusion® Blazor DataGrid supports hierarchical context menus, allowing sub-items to be grouped under a parent menu item. This structure helps organize related actions and improves interface usability. -3. Use the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event to handle actions for each menu item. +To configure sub-context menu items: +1. Define the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property with a list of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects. +2. Add sub-items by specifying the collection for the Items property in `ContextMenuItemModel`. +3. Handle actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. -The following example demonstrates how to create a sub context menu titled **Clipboard**, with sub-items **Copy** and **Copy With Header**. The corresponding actions are triggered when the `ContextMenuItemClicked` event is fired and [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) action is carried out with and without headers. +This example creates a sub-context menu titled **Clipboard**, which includes the sub-items **Copy** and **Copy With Header**. When the `ContextMenuItemClicked` event is triggered, the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method runs to copy data with or without headers. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -374,9 +358,9 @@ The following example demonstrates how to create a sub context menu titled **Cli @code { - private SfGrid Grid; - public List Orders { get; set; } - public List ContextMenuItems = new() + private SfGrid? Grid; + private List Orders { get; set; } = new List(); + private List ContextMenuItems = new() { new ContextMenuItemModel { @@ -396,15 +380,15 @@ The following example demonstrates how to create a sub context menu titled **Cli Orders = OrderData.GetAllRecords(); } - public async Task OnContextMenuClick(ContextMenuClickEventArgs args) + private async Task OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "copy") { - await Grid.CopyAsync(false); + await Grid!.CopyAsync(false); } else if (args.Item.Id == "copywithheader") { - await Grid.CopyAsync(true); + await Grid!.CopyAsync(true); } } } @@ -415,14 +399,14 @@ The following example demonstrates how to create a sub context menu titled **Cli public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -458,21 +442,23 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVyjfjkrhfaJLAr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLIiNhEqQfJGczz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Disable the context menu for specific columns in DataGrid -In certain scenarios, you may want to restrict the context menu from appearing on specific columns within the Syncfusion® Blazor DataGrid. This can be helpful to prevent actions like copying or editing on columns that contain sensitive or read-only data. +The Syncfusion® Blazor DataGrid allows restricting the context menu for individual columns, which is useful when dealing with **sensitive** or **read-only** data. -You can achieve this by using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened, allowing you to cancel it conditionally. +This behavior is controlled using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu appears and provides access to column details. By checking the column's **Field** property, the context menu can be conditionally disabled. -To prevent the context menu from opening on a specific column: +To disable the context menu for a specific column: -1. Handle the `ContextMenuOpen` event of the Grid and use the `Column.Field` property within the event handler to identify the target column. +1. Handle the [ContextMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ContextMenuOpen) event of the Grid. +2. Use the **args.Column.Field** property to identify the target column. +3. Set **args.Cancel = true** to prevent the context menu from opening for that column. -2. Set `Args.Cancel` as **true** to prevent the menu from opening on that column. - -The following example demonstrates how to prevent the context menu from opening when right-clicking on the **Freight** column. The [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event is used to handle actions triggered by context menu item clicks. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method will be executed for all columns except **Freight** column, where the context menu is disabled. +In this example: +- The context menu is disabled for the **Freight** column. +- The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method executes for all other columns when the **Copy with headers** option is selected. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -491,28 +477,27 @@ The following example demonstrates how to prevent the context menu from opening @code { - private SfGrid Grid; - public List Orders { get; set; } - + private SfGrid? Grid; + private List Orders { get; set; } = new List(); protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public void OnContextMenuOpen(ContextMenuOpenEventArgs Args) + public void OnContextMenuOpen(ContextMenuOpenEventArgs args) { - if (Args.Column.Field == "Freight") + if (args.Column.Field == "Freight") { - Args.Cancel = true; // To prevent the context menu from opening. + args.Cancel = true; } } - public async Task OnContextMenuClick(ContextMenuClickEventArgs args) + private async Task OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "copywithheader") { - await Grid.CopyAsync(true); + await Grid!.CopyAsync(true); } } } @@ -521,17 +506,16 @@ The following example demonstrates how to prevent the context menu from opening {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -567,28 +551,26 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBeNTjaVhQWEiHK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBSCNrOqOXtBomQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Enable or disable context menu items -The Syncfusion® Blazor DataGrid allows you to dynamically enable or disable specific context menu items using [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is particularly useful in scenarios where certain actions, such as **Edit** or **Delete**, should be restricted based on the column, the data in the row, or other custom logic. +The Syncfusion® Blazor DataGrid allows dynamic control over the availability of context menu items using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic. -To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened, allowing you to enable or disable the desired menu items dynamically. +To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows enabling or disabling menu items dynamically based on conditions. -To enable or disable context menu items dynamically, follow the steps below: +1. Handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event of the grid. +2. Use the **args.ContextMenu.Items** collection to access the menu items. +3. Set the **Disabled** property of the required item(s) to **true** or **false** based on the defined logic. -1. Handle the `ContextMenuOpen` event of the DataGrid and use the `Args.ContextMenuObj.Items` collection within the handler to access the context menu items. - -2. Set the `Disabled` property of the desired item(s) to `true` or `false` based on your logic. - -The following example demonstrates how to dynamically enable or disable **Copy** context menu items in the Grid using the `ContextMenuOpen` event. The **Copy** item is disabled for the **ShipCity** column and enabled for other columns. +The **Copy** menu item is disabled for the **ShipCity** column and remains enabled for all other columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -601,42 +583,39 @@ The following example demonstrates how to dynamically enable or disable **Copy** @code { - private SfGrid Grid; - public List Orders { get; set; } - + private List Orders { get; set; } = new List(); protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public void OnContextMenuOpen(ContextMenuOpenEventArgs Args) - { - if (Args.Column.Field == "ShipCity") // You can check condition based on your requirement. - { - Args.ContextMenu.Items[0].Disabled = true; // To disable edit context menu item. - } - else + private void OnContextMenuOpen(ContextMenuOpenEventArgs args) + { + foreach (var item in args.ContextMenu.Items) { - Args.ContextMenu.Items[0].Disabled = false; // To enable edit context menu item. + if (item.Text == "Copy" && args.Column.Field == nameof(OrderData.ShipCity)) + { + item.Disabled = true; + } } } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -672,21 +651,21 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryDfXEqqyMSDPD?appbar=false&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrIiiZySUQfOieR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Show or hide context menu -The Syncfusion® Blazor DataGrid provides the flexibility to show or hide both default and custom context menu items. This feature allows you to customize the context menu items based on various conditions or individuals interactions. - -This can be achieved using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened , allowing you to customize context menu items visibility dynamically. +The Syncfusion® Blazor DataGrid allows dynamically showing or hiding specific context menu items using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic. -To control the visibility of context menu items, follow the steps below: +To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows dynamic modification of menu item visibility based on defined conditions. -1. Handle the `ContextMenuOpen` event of the Grid and access the `Args.ContextMenu.Items` collection within the event handler to modify the visibility of specific menu items. +To control the visibility of context menu items: -2. Set the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property of `MenuItems` to **true** or **false**, based on your conditions +1. Handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event of the grid. +2. Use the **args.ContextMenu.Items** collection to access the menu items. +3. Set the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property of the required item(s) to **true** or **false** based on the defined logic. -The following example demonstrates how to dynamically show or hide **Edit** context menu items in the Grid using the `ContextMenuOpen` event. The **Edit** item is disabled for the **CustomerID** column and enabled for other columns. +The **Edit** menu item is hidden for the **CustomerID** column and remains visible for all other columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -706,23 +685,21 @@ The following example demonstrates how to dynamically show or hide **Edit** cont @code { - public List Orders { get; set; } - + private List Orders { get; set; } = new List(); protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public void OnContextMenuOpen(ContextMenuOpenEventArgs Args) + private void OnContextMenuOpen(ContextMenuOpenEventArgs args) { - if (Args.Column.Field == "CustomerID") - { - Args.ContextMenu.Items[1].Hidden = true; - } - else + foreach (var item in args.ContextMenu.Items) { - Args.ContextMenu.Items[1].Hidden = false; + if (item.Text == "Edit Record" && args.Column.Field == nameof(OrderData.CustomerID)) + { + item.Hidden = true; + } } } } @@ -731,17 +708,16 @@ The following example demonstrates how to dynamically show or hide **Edit** cont {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -777,38 +753,36 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIZfXYKSwAiUpU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBIMWXIIKutSiPz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Access specific row details on context menu click -The Syncfusion® Blazor DataGrid allows you to interact with specific row data when a context menu item is clicked. This feature is useful when you want to perform actions like viewing, editing, or processing data from the selected row. +The Syncfusion® Blazor DataGrid allows retrieving details of a specific row when a context menu item is clicked. This feature is useful for displaying or processing the selected row’s data. -You can achieve this by handling the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. This event provides access to the clicked menu item and the associated row data, enabling you to fetch and display specific details dynamically. +To achieve this, handle the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. The event is triggered when a context menu item is clicked and provides access to the selected row details. -Steps to access row data on context menu click: +To access row data on context menu click: 1. Define a custom context menu item using the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. -2. Handle the `ContextMenuItemClicked` event to capture the selected row's data. -3. Use the `RowInfo.RowData` property from the event arguments to access the full row details. - -The following example demonstrates how to fetch specific row details when a context menu item is clicked in the Grid using the `ContextMenuItemClicked` event. The fetch data item retrieves the row information and displays it below the Grid: +2. Handle the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event of the grid. +3. Use the **args.RowInfo.RowData** property from the event arguments to access the full details of the selected row. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - - - - + + + + - + @if (rowData != null) {
    @@ -821,24 +795,22 @@ The following example demonstrates how to fetch specific row details when a cont } @code { - private SfGrid Grid; - public List Orders { get; set; } - - private OrderData rowData { get; set; } + private SfGrid? Grid; + private List Orders { get; set; } = new List(); + private OrderData? rowData; protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public void OnContextMenuClick(ContextMenuClickEventArgs args) + private void OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "fetch data") { rowData = args.RowInfo.RowData; } } - } {% endhighlight %} @@ -847,36 +819,40 @@ The following example demonstrates how to fetch specific row details when a cont public class OrderData { - public static List order = new List(); - public OrderData(int OrderID, string CustomerId, string ShipCity, string ShipName) + private static readonly List Orders = new(); + + public OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = OrderID; - this.CustomerID = CustomerId; - this.ShipCity = ShipCity; - this.ShipName = ShipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } + public static List GetAllRecords() { - if (order.Count == 0) + if (Orders.Count == 0) { - order.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - order.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - order.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - order.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - order.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - order.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - order.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - order.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - order.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora")); - order.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); - order.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - order.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); - order.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - order.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); - order.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora")); + Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return order; + + return Orders; } + public int OrderID { get; set; } public string CustomerID { get; set; } public string ShipCity { get; set; } @@ -886,6 +862,6 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLetwrTrwitHdvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBSMXVazHjnCzPv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> You can refer to [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a detailed overview of available capabilities. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file diff --git a/blazor/datagrid/data-annotation.md b/blazor/datagrid/data-annotation.md index ac90524b35..3cf87076cd 100644 --- a/blazor/datagrid/data-annotation.md +++ b/blazor/datagrid/data-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Data Annotation in Blazor DataGrid | Syncfusion -description: Learn how to achieve data validation with data annotations in the Syncfusion Blazor DataGrid component. +description: Learn how to use Data Annotations for validation and column metadata in Syncfusion Blazor DataGrid, including enum display and CRUD form validation. platform: Blazor control: DataGrid documentation: ug @@ -9,35 +9,71 @@ documentation: ug # Data Annotation in Blazor DataGrid -Data Annotations are used to define validation rules for model classes or properties, ensuring that data entered into an application conforms to the expected format and meets specific criteria. They also enable the display of appropriate error messages to end users. +Data annotations define validation and display rules for model classes or properties in the Syncfusion® Blazor DataGrid. These attributes ensure that input values follow specific formats and constraints while providing clear error messages during editing operations. -In the Syncfusion® Blazor DataGrid, Data Annotations are leveraged to automatically map these validation rules to the corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) properties. This integration provides seamless data validation during editing operations within the Grid. +When the DataGrid is bound to a model, data annotations automatically map to corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) settings. This enables built-in validation and metadata display during CRUD operations. -To enable Data Annotations for validation in a Grid, you need to refer the **System.ComponentModel.DataAnnotations** namespace in your Blazor application. Once enabled, the Grid automatically uses the data annotations applied to your model class properties to perform data validation. +To enable data annotation in the Blazor DataGrid: -The following table lists the data annotation attributes supported in the Grid: +1. Add the **System.ComponentModel.DataAnnotations** namespace in the Blazor application. +2. Bind the DataGrid to a model using `TValue` and [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource). +3. Apply annotation attributes to model properties to enforce validation and display rules during CRUD operations. + +### Supported Data Annotation Attributes + +The tables categorize supported attributes by display, formatting, metadata, and validation functionality. + +### Display Attributes + +Use **Display** attributes to control how column headers, ordering, and metadata appear in the grid interface. + +| Attribute Name | Properties | Functionality | +|----------------|------------|---------------| +| Display | Name | Sets the header text for the DataGrid column | +| Display | ShortName | Sets a shorter version of the header text | +| Display | AutoGenerateField | Prevents the column from being auto-generated | +| Display | AutoGenerateFilter | Disables filtering for the column | +| Display | Description | Sets tooltip text shown on column ellipsis hover | +| Display | Order | Defines the display order of the column | + +### DisplayFormat Attributes + +Apply **DisplayFormat** attributes when column values require specific formatting or null-handling behavior. | Attribute Name | Properties | Functionality | -|---------------|------------|--------------| -| Display | Name | Sets the header text for the Grid column | -| Display | ShortName | Sets a shorter version of the header text for the Grid column | -| Display | AutoGenerateField | Prevents the column from being auto-generated in the Grid | -| Display | AutoGenerateFilter | Specifies whether filtering should be disabled for the column | -| Display | Description | Sets the tooltip text displayed when hovering over the column ellipsis | -| Display | Order | Defines the display order priority of the Grid column | -| DisplayFormat | FormatString | Sets the format for displaying data in the column | -| DisplayFormat | ApplyFormatInEditMode | Determines whether the format should be applied during edit mode | -| DisplayFormat | NullDisplayText | Sets the text to be displayed when the value of the property is null | -| DisplayFormat | ConvertEmptyStringToNull | Determines whether empty string values should be converted to null in the user interface | -| DisplayFormat | NeedsHtmlEncode | Sets whether HTML encoding should be disabled for a particular column | -| ScaffoldColumnAttribute | Scaffold | Sets whether the column is visible in the user interface | -| EditableAttribute | ReadOnly | Sets whether the column allows editing | -| Key | Key | Marks a column as the primary key in the Grid | -| Validation Attributes:

    1. RequiredAttribute
    2. StringLengthAttribute
    3. RangeAttribute
    4. RegularExpressionAttribute
    5. MinLengthAttribute
    6. MaxLengthAttribute
    7. EmailAddressAttribute
    8. CompareAttribute
    | | These validation attributes are used as `validation rules` in Grid CRUD operations | - -> The Syncfusion® Blazor DataGrid property takes precedence over data annotation attributes. For example, when both the DisplayName attribute and `HeaderText` are assigned to a field in the Grid model class for a specific column, the `HeaderText` value will be prioritized and displayed in the Grid header. - -The following sample code demonstrates how to use data annotations in the Grid: +|----------------|------------|---------------| +| DisplayFormat | FormatString | Sets the display format for column data | +| DisplayFormat | ApplyFormatInEditMode | Applies format during edit mode | +| DisplayFormat | NullDisplayText | Displays custom text when the value is null | +| DisplayFormat | ConvertEmptyStringToNull | Converts empty strings to null in the UI | +| DisplayFormat | HtmlEncode | Enables or disables HTML encoding for display | + +### Other Metadata Attributes + +Use these attributes to manage column visibility, editing behavior, and key definitions. + +| Attribute Name | Properties | Functionality | +|----------------|------------|---------------| +| ScaffoldColumnAttribute | Scaffold | Controls column visibility in the UI | +| ReadOnlyAttribute | IsReadOnly | Prevents editing of the column | +| Key | Key | Marks the column as the primary key | + +### Validation Attributes + +Add validation attributes to enforce rules that display inline Blazor DataGrid validation messages during CRUD operations. + +- RequiredAttribute +- StringLengthAttribute +- RangeAttribute +- RegularExpressionAttribute +- MinLengthAttribute +- MaxLengthAttribute +- EmailAddressAttribute +- CompareAttribute + +> When both the `Display` attribute’s `Name` and the column’s `HeaderText` property are defined, the `HeaderText` value takes precedence and is shown in the column header. + +The `Display` attribute can be used to show user-friendly labels for enum values. This improves readability by replacing raw enum values with descriptive names. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -45,12 +81,12 @@ The following sample code demonstrates how to use data annotations in the Grid: @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.DropDowns @using System.Reflection -@using System.ComponentModel.DataAnnotations; +@using System.ComponentModel.DataAnnotations - + @@ -58,9 +94,8 @@ The following sample code demonstrates how to use data annotations in the Grid: @{ - var Order = (context as Order); - - + var CurrentOrder = (context as Order); + } @@ -70,56 +105,60 @@ The following sample code demonstrates how to use data annotations in the Grid: @code { - public List Orders { get; set; } - public List DropDownData = new List(); + private List Orders { get; set; } + private List DropDownData { get; } = new(); protected override void OnInitialized() { - Random rnd = new Random(); - var values = Enum.GetValues(typeof(Status)); - foreach (Status item in Enum.GetValues(typeof(Status))) + var Rnd = new Random(); + var Values = Enum.GetValues(typeof(Status)); + + foreach (Status Item in Values) { - DropDownData.Add(new Data { Type = GetDisplayName(item), Value = item }); + DropDownData.Add(new Data { Type = GetDisplayName(Item), Value = Item }); } - Orders = Enumerable.Range(1, 75).Select(x => new Order() + + Orders = Enumerable.Range(1, 75).Select(x => new Order { OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", string.Empty, null })[new Random().Next(5)], + CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", string.Empty, null })[Rnd.Next(5)], Freight = 2.1 * x, OrderDate = DateTime.Now.AddDays(-x), - ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[new Random().Next(5)], - Verified = (Status)(values.GetValue(rnd.Next(values.Length))), + ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[Rnd.Next(5)], + Verified = (Status)Values.GetValue(Rnd.Next(Values.Length)), }).ToList(); } - public static string GetDisplayName(Enum enumValue) + private static string GetDisplayName(Enum EnumValue) { - string displayName; - displayName = enumValue.GetType() - .GetMember(enumValue.ToString()) + var DisplayName = EnumValue.GetType() + .GetMember(EnumValue.ToString()) .FirstOrDefault() .GetCustomAttribute()? .GetName(); - if (String.IsNullOrEmpty(displayName)) + + if (string.IsNullOrEmpty(DisplayName)) { - displayName = enumValue.ToString(); + DisplayName = EnumValue.ToString(); } - return displayName; + return DisplayName; } - public enum Status + + internal enum Status { [Display(Name = "Yeah")] Yes = 0, [Display(Name = "Nope")] No = 1 } - public class Data + + internal sealed class Data { public string Type { get; set; } public Status Value { get; set; } } - public class Order + internal sealed class Order { // Sets column as primary key. [Key] @@ -128,21 +167,26 @@ The following sample code demonstrates how to use data annotations in the Grid: // Sets header text to the column. [Display(ShortName = "ID")] public int OrderID { get; set; } + [Display(Name = "CustomerID", Description ="List of Customers")] // Sets column as required and error message to be displayed when empty. [Required(ErrorMessage = "Field should not be empty")] [DisplayFormat(NullDisplayText = "Empty", ConvertEmptyStringToNull = true)] - public string? CustomerID { get; set; } + public string CustomerID { get; set; } + // Sets data type of column as Date. [DataType(DataType.Date)] [Display(Name = "Order Date")] // Sets column as read only. [Editable(false)] public DateTime? OrderDate { get; set; } + [Display(Name = "Freight", AutoGenerateFilter = false)] public double? Freight { get; set; } - [ScaffoldColumn(scaffold:false)] + + [ScaffoldColumn(false)] public string ShipCity { get; set; } + public Status Verified { get; set; } } } @@ -150,12 +194,8 @@ The following sample code demonstrates how to use data annotations in the Grid: {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LthIZotuimdZMRyd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -The following image shows how Data Annotations are applied to Grid columns in a Blazor application: - -![Data Annotation in Grid](./images/blazor-datagrid-data-annotation.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIijigsHQsZoWd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The **Verified** column displays the `Enum` member using the `Display` attribute name, enhancing user experience by rendering a human-readable label instead of the raw enum value. +![Data annotations in DataGrid](./images/blazor-datagrid-data-annotation.png) -> You can refer to our [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its features. You can also explore our [Syncfusion® Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. +N> Refer to the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for an overview of available features. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to see how data is presented and managed within an application. \ No newline at end of file diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 1645ff1236..a76f127b80 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting in Blazor DataGrid | Syncfusion -description: Learn all about sorting data-bound columns, single and multiple, in Syncfusion Blazor DataGrid component. +description: Explore sorting in Syncfusion Blazor DataGrid including single/multi-column sort, initial sort, custom icons, foreign key sorting, and sorting events. platform: Blazor control: DataGrid documentation: ug @@ -9,97 +9,107 @@ documentation: ug # Sorting in Blazor DataGrid -The Syncfusion® Blazor DataGrid provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**. +The Syncfusion® Blazor DataGrid includes a built-in sorting feature that helps organize information within columns. This makes it easier to locate and analyze data efficiently. To turn on sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in the Grid component. -To know about how to **Sorting** in Grid, you can check this video. +Sorting can be applied in two ways: +- **Ascending Order**: Arranges values from smallest to largest (e.g., A to Z or 1 to 100). An upward arrow (↑) appears next to the header. +- **Descending Order**: Arranges values from largest to smallest (e.g., Z to A or 100 to 1). A downward arrow (↓) appears next to the header. {% youtube "youtube:https://www.youtube.com/watch?v=P3VO_vd0Ev0" %} -To sort a particular column in the Grid, click on its column header. Each time you click the header, the order of the column will switch between **Ascending** and **Descending**. +## Sort via UI + +Interact with column headers to sort data directly. Clicking a column header toggles the sort order between **Ascending** and **Descending**. By default, the first click sorts ascending. + + +|Action | Result | +|------------------------------|--------------------------------------------------| +| Click header once | Sorts in ascending order (↑ icon appears) | +| Click header again | Sorts in descending order (↓ icon appears) | +| Click header a third time | Clears sorting for that column(no icon) | + {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } +public class OrderData +{ + private static readonly List Orders = new List(); - public static List GetAllRecords() + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsMZhrntSJwyp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhoMjBsUXCtbeqV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * Grid columns are sorted in the **Ascending** order. If you click the already sorted column, then toggles the sort direction. -> * You can apply and clear sorting by using the [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) and [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) methods. -> * To disable sorting for a particular column, set the `AllowSorting` property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. + ## Initial sorting -By default, the Grid does not apply any sorting to its records at initial rendering. However, you can apply initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property of the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). This feature is helpful when you want to display your data in a specific order when the Grid is first loaded. +By default, the Syncfusion® Blazor DataGrid renders without any sorting applied. To arrange records in a desired order right from the initial load, configure initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) (the column's data field name) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) properties (either **SortDirection.Ascending** for smallest to largest or **SortDirection.Descending** for largest to smallest) in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) collection of [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). -The following example demonstrates how to set the **GridSortSettings** of the `Columns` for **OrderID** and **ShipCity** columns with a specified `Direction`. +In this configuration, initial sorting is applied to the **OrderID** and **ShipCity** columns using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids @@ -110,84 +120,78 @@ The following example demonstrates how to set the **GridSortSettings** of the ` - - - - + + + + - @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} - {% previewsample "https://blazorplayground.syncfusion.com/embed/rZrAiCDLKrKWrRVA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The initial sorting defined in the `GridSortSettings` of the `Columns` will override any sorting applied through user interaction. +> Initial sorting defined in the `GridSortSettings` of the Columns is applied on first render and overrides any sorting applied through interaction. ## Multi-column sorting -The Syncfusion® Blazor DataGrid allows to sort more than one column at a time using multi-column sorting. To enable multi-column sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**, and set the [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) property to **true** which enable the user to sort multiple columns by holding the **CTRL** key and click on the column headers. This feature is useful when you want to sort your data based on multiple criteria to analyze it in various ways. +The Syncfusion® Blazor DataGrid supports sorting multiple columns simultaneously. To enable this feature, set both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) to **true**. -To clear multi-column sorting for a particular column, press the "Shift + mouse left click". +**How Multi-Column Sorting Works** -> * The `AllowSorting` must be **true** while enabling multi-column sort. -> * Set `AllowMultiSorting` property as **false** to disable multi-column sorting. +When multi-sorting is enabled: +- Click a column header to apply sorting to that column. +- Hold Ctrl (or Command on macOS) and click additional column headers to include them in the sort sequence. +- Press Shift and click a column header to remove it from the multi-column sort configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -195,158 +199,140 @@ To clear multi-column sorting for a particular column, press the "Shift + mouse - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + private static readonly List Orders = new List(); - public class OrderData + public OrderData(int? orderId, string customerId, string shipCity, string shipName) { - public static List Orders = new List(); - - public OrderData() - { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + public static List GetAllRecords() + { + if (Orders.Count == 0) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } + return Orders; + } - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; - } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } - } {% endhighlight %} {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/BXhAWCDhqqMpzrfL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Prevent sorting for particular column +## Disabling sorting for specific column -The Syncfusion® Blazor DataGrid provides the ability to prevent sorting for a particular column. This can be useful when you have certain columns that you do not want to be included in the sorting process. +The Syncfusion® Blazor DataGrid provides the option to disable sorting for individual columns. This is useful for fields where sorting is not meaningful or should be restricted. -It can be achieved by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of the particular column to **false**. +To disable sorting for a specific column, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. -The following example demonstrates, how to disable sorting for **CustomerID** column. +In this configuration, sorting is disabled for the **CustomerID** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } -} + } +} {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVgWMDhqzLxBsoB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing sorting functionality with the AllowUnsort property +## Controlling Unsort behavior in Blazor DataGrid -When the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property is set to **false** in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html), the Grid cannot be placed in an unsorted state by clicking on a sorted column header. This setting restricts the action of reverting the Grid to its original unsorted layout through column header clicks. - -In the following example, this is demonstrated by preventing the Grid from entering an unsorted state by setting `AllowUnsort` to **false** in **GridSortSettings**. +The Syncfusion® Blazor DataGrid provides control over whether a column can return to an unsorted state after sorting. This behavior is managed using the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). +When [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) is set to **false**, clicking a sorted column header does not revert the Grid to its original unsorted layout. Instead, the column remains sorted until a different sort action is applied. This ensures a consistent sorting state and prevents accidental removal of sorting. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -355,84 +341,68 @@ In the following example, this is demonstrated by preventing the Grid from enter - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/BjVUMsiJfaBVSChx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sort order - -By default, the sorting order will be as **Ascending -> Descending -> None**. - -When you click on a column header for the first time, it sorts the column in ascending order. Clicking the same column header again will sort the column in descending order. A repetitive third click on the same column header will clear the sorting. - ## Custom sorting -The Syncfusion® Blazor DataGrid provides a way to customize the default sort action for a column by defining the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of GridColumn. The SortComparer data type was the IComparer interface, so the custom sort comparer class should be implemented in the interface [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-7.0&viewFallbackFrom=net-5). - +The Syncfusion® Blazor DataGrid allows customizing the default sort logic for a column by setting the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of a column. This property accepts an IComparer implementation, which can be created by defining a comparer class that implements the .NET [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface. -The following example demonstrates how to define custom sort comparer function for the **CustomerID** column. +In this configuration, a custom comparer is assigned to the **CustomerID** column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -441,118 +411,109 @@ The following example demonstrates how to define custom sort comparer function f - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - public class CustomComparer : IComparer + public class CustomComparer : IComparer { - public int Compare(object XRowDataToCompare, object YRowDataToCompare) + public int Compare(object? XRowDataToCompare, object? YRowDataToCompare) { - OrderData XRowData = XRowDataToCompare as OrderData; - OrderData YRowData = YRowDataToCompare as OrderData; - int XRowDataOrderID = (int)XRowData.OrderID; - int YRowDataOrderID = (int)YRowData.OrderID; - if (XRowDataOrderID < YRowDataOrderID) - { - return -1; - } - else if (XRowDataOrderID > YRowDataOrderID) - { - return 1; - } - else + if (XRowDataToCompare is not OrderData XOrder || YRowDataToCompare is not OrderData YOrder) { return 0; } + + return Nullable.Compare(XOrder.OrderID, YOrder.OrderID); } } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID, string CustomerID, double? Freight, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, double? freight, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipName { get; set; } - public double? Freight { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } +} {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhIWXBiJFYfNCrP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrUWMtqggCjRVvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -> * The SortComparer function takes two parameters: a and b. The a and b parameters are the values to be compared. The function returns -1, 0, or 1, depending on the comparison result. -> * The SortComparer property will work only for local data. -> * When using the column template to display data in a column, you will need to use the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to work with the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_SortComparer) property. +> * The **SortComparer** function receives two parameters: `a` and `b`, which represent the values to be compared. The function must return: + - **-1** if `a` should appear before `b` + - **0** if `a` and `b` are equal + - **1** if `a` should appear after `b` +> * The **SortComparer** property is supported only when using `local data`. +> * When using a `column template`, ensure the [GridColumn.Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property is defined so that SortComparer can access the corresponding field value. ## Touch interaction -When you tap the Syncfusion® Blazor DataGrid header on touchscreen devices, the selected column header is sorted. A popup ![Sorting in Blazor DataGrid.](./images/blazor-datagrid-sorting.jpg) is displayed for multi-column sorting. To sort multiple columns, tap the popup![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.jpg), and then tap the desired Grid headers. +The Syncfusion® Blazor DataGrid supports sorting through touch gestures. On touch-enabled devices, tapping a column header sorts that column. A popup icon +![Sorting in Blazor DataGrid.](./images/blazor-datagrid-sorting.jpg) appears to enable multi-column sorting. +To sort multiple columns, tap the popup +![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.jpg), and then tap the desired column headers. -> The [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) should be **true** then only the popup will be shown. +> Both [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) must be true for the popup to appear. -The following screenshot represents a Grid touch sorting in the device. +This screenshot illustrates touch-based sorting in the Grid: -![Sorting in Blazor DataGrid using touch interaction.](./images/blazor-datagrid-touch-sorting.jpg) +![Sorting in Blazor DataGrid](./images/blazor-datagrid-touch-sorting.jpg) -## Sort foreign key column based on text +## Sort foreign key column -To perform sorting based on foreign key column, the `GridForeignColumn` column can be enabled by using [ForeignDataSource ](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource), [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) and [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) properties. +The Syncfusion® Blazor DataGrid supports sorting foreign key columns based on display text. To enable this, configure a [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) with the following properties: -**Sort foreign key column based on text for local data** +- [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) - Specifies the data source that contains foreign key values and display text. +- [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) - Defines the key field used for mapping. +- [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) - Specifies the display text field used for sorting and rendering. -In the case of local data in the Grid, the sorting operation will be performed based on the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property of the column. The `ForeignKeyValue` property should be defined in the column definition with the corresponding foreign key value for each row. The Grid will sort the foreign key column based on the text representation of the `ForeignKeyValue` property. +N> +* **For local data** → Sorting is performed based on the value of the `ForeignKeyValue` property (**display text**). +* **For remote data** → Sorting is performed based on the `ForeignKeyField` unless the remote service supports sorting on the display text field. -The following example demonstrates how to perform sorting by enabling a foreign key column, where the **CustomerID** column acts as a foreign column displaying the **ContactName** column from foreign data. +In this configuration, the **ContactName** field is used as the display text for the **CustomerID** foreign key column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -560,111 +521,100 @@ The following example demonstrates how to perform sorting by enabling a foreign - - - - + + + + @code { - public List GridData { get; set; } - public List customerData { get; set; } + public List GridData { get; set; } = new List(); + public List CustomerData { get; set; } = new List(); + protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - customerData = EmployeeData.GetAllRecords(); + CustomerData = EmployeeData.GetAllRecords(); } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} public class EmployeeData +{ + private static readonly List EmployeeRecords = new List(); + + public EmployeeData(int? customerId, string contactName) { - public static List customerData = new List(); - public EmployeeData() - { + CustomerID = customerId; + ContactName = contactName; + } - } - public EmployeeData(int? customerID, string contactName) - { - CustomerID = customerID; - ContactName = contactName; - } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (EmployeeRecords.Count == 0) { - if (customerData.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - customerData.Add(new EmployeeData(1, "Paul Henriot")); - customerData.Add(new EmployeeData(2, "Karin Josephs")); - customerData.Add(new EmployeeData(3, "Mario Pontes")); - customerData.Add(new EmployeeData(4, "Mary Saveley")); - customerData.Add(new EmployeeData(5, "Pascale Cartrain")); - customerData.Add(new EmployeeData(6, "Mario Pontes")); - customerData.Add(new EmployeeData(7, "Yang Wang")); - customerData.Add(new EmployeeData(8, "Michael Holz")); - customerData.Add(new EmployeeData(9, "Paula Parente")); - code += 5; - } - } - return customerData; + EmployeeRecords.Add(new EmployeeData(1, "Paul Henriot")); + EmployeeRecords.Add(new EmployeeData(2, "Karin Josephs")); + EmployeeRecords.Add(new EmployeeData(3, "Mario Pontes")); + EmployeeRecords.Add(new EmployeeData(4, "Mary Saveley")); + EmployeeRecords.Add(new EmployeeData(5, "Pascale Cartrain")); + EmployeeRecords.Add(new EmployeeData(6, "Mario Pontes")); + EmployeeRecords.Add(new EmployeeData(7, "Yang Wang")); + EmployeeRecords.Add(new EmployeeData(8, "Michael Holz")); + EmployeeRecords.Add(new EmployeeData(9, "Paula Parente")); } - public int? CustomerID { get; set; } - public string ContactName { get; set; } + + return EmployeeRecords; } - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { - } - public OrderData(int? OrderID,int? CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public int? CustomerID { get; set; } + public string ContactName { get; set; } +} + +public class OrderData +{ + private static readonly List Orders = new List(); - public static List GetAllRecords() + public OrderData(int? orderId, int? customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, 1, "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, 2, "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, 4, "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, 5, "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, 6, "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, 8, "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, 9, "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, 1, "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, 2, "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, 4, "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, 5, "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, 6, "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, 8, "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, 9, "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public int? CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public int? CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrKiWtqgIEXHWyp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrosDBrMaWuSWBG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## How to customize sort icon -To customize the sort icon in the Syncfusion® Blazor DataGrid, you can override the default Grid classes **.e-icon-ascending** and **.e-icon-descending** with custom content using CSS. Simply specify the desired icons or symbols using the **content** property as mentioned below +The Syncfusion® Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the **content** property to define custom icons: ```css .e-grid .e-icon-ascending::before { @@ -676,8 +626,6 @@ To customize the sort icon in the Syncfusion® - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { @@ -717,64 +665,63 @@ In the below sample, Grid is rendered with a customized sort icon. } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } - {% endhighlight %} -{% endtabs %} + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} +{% endhighlight %} +{% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhKCWZqBWwrwhml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryiZBieWXbgwvN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sort columns externally +## Sort via programmatically -The Syncfusion® Blazor DataGrid allows you to customize the sorting of columns and provides flexibility in sorting based on external interactions. You can sort columns and clear sorting using an external button click. +The Syncfusion® Blazor DataGrid supports sorting operations through built-in methods. These methods allow sorting to be added, removed, or cleared programmatically without relying on the grid’s UI. Sorting actions can be triggered externally—such as via dropdown menus, buttons, or other UI elements—allowing for flexible and dynamic control over data presentation. ### Add sort columns -To sort a column externally, you can utilize the [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method with parameters **ColumnName**, **Direction** and **IsMultiSort** provided by the Grid. This method allows you to programmatically sort a specific column based on your requirements. +The DataGrid provides method overloads for programmatic sorting, offering flexibility based on different use cases. These overloads support sorting a single column, multiple columns, or multiple columns while resetting any previous sort settings. -The following example demonstrates how to add sort columns to a Grid. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column and sort direction. When an external button is clicked, the `SortColumnAsync` method is called with the specified **ColumnName**, **Direction**, and **IsMultiSort** parameters. +**Sorting a Single Column** + +Use [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method to sort a single column by specifying its name and sort direction. This method also supports multi-column sorting when enabled in the grid, allowing it to add the new sort condition alongside existing ones. + +| Parameter | Type | Description | +|----------------|-------------------|-----------------------------------------------------------------------------| +| fieldName | string | Specifies the column name to be sorted. If the column name is invalid or misspelled, the sort will fail silently without throwing error. | +| direction | SortDirection | Defines the sort direction. Possible values: **Ascending, Descending**. | +| isMultiSort | bool? (optional) | Enables multi-column sorting when true; replaces existing sort when false. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -783,31 +730,27 @@ The following example demonstrates how to add sort columns to a Grid. It utilize @using Syncfusion.Blazor.DropDowns
    - - + +

    - - + +

    +
    - ADD SORT COLUMN + ADD SORT COLUMN
    - - - - - - + - + @@ -815,127 +758,292 @@ The following example demonstrates how to add sort columns to a Grid. It utilize @code { - public List GridData { get; set; } + private List gridData { get; set; } + private SfGrid? grid { get; set; } + private string dropDownValue { get; set; } = "OrderID"; + private string[] enumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection)); + private SortDirection dropDownDirection { get; set; } = SortDirection.Ascending; + + protected override void OnInitialized() + { + gridData = OrderData.GetAllRecords(); + } + + private List ColumnList = new List + { + new ColumnItem { ID = "OrderID", Value = "OrderID" }, + new ColumnItem { ID = "CustomerID", Value = "CustomerID" }, + new ColumnItem { ID = "Freight", Value = "Freight" } + }; + + private async Task AddSortColumn() + { + await grid.SortColumnAsync(dropDownValue, dropDownDirection); + } + + private class ColumnItem + { + public string ID { get; set; } + public string Value { get; set; } + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderID, string customerID, double? freight, string shipName) + { + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhIijrBrMZftWiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + - public SfGrid? Grid { get; set; } +**Sort Multiple Columns** - public string DropDownValue { get; set; } = "OrderID"; +The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method is used to sort multiple columns simultaneously. It accepts a list of [SortColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortColumn.html#Syncfusion_Blazor_Grids_SortColumn_Field) objects, each specifying the column name and sort direction. - public string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection)); +| Parameter | Type | Description | +|------------------|-------------------------|--------------------------------------------------------------| +| columns | List | A collection of sorting instructions. Each `SortColumn` in the list defines a specific column to sort and the direction of sorting (**Ascending** or **Descending**). This allows multiple columns to be sorted at the same time, based on the order they appear in the list. | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Add Sort Column + + + + + + + + + - public Syncfusion.Blazor.Grids.SortDirection DropDownDirection { get; set; } = SortDirection.Ascending; +@code { + public List GridData { get; set; } = new List(); + private SfGrid? grid { get; set; } + private List sortColumns { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - List LocalData = new List + private async Task ApplyMultiColumnSort() { - new Columns() { ID= "OrderID", Value= "OrderID" }, - new Columns() { ID= "CustomerID", Value= "CustomerID" }, - new Columns() { ID= "Freight", Value= "Freight" }, - }; + sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = SortDirection.Descending }); + sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = SortDirection.Ascending }); + await grid!.SortColumnsAsync(sortColumns); + } +} - List LocalData1 = new List - { - new Direction() { ID= "Ascending", Value= "Ascending" }, - new Direction() { ID= "Descending", Value= "Descending" }, +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + private static readonly List Orders = new List(); - }; + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public class Columns + public static List GetAllRecords() { - public string ID { get; set; } - public string Value { get; set; } + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + } + + return Orders; } - public class Direction + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVIWWNyHeMxowAh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> When sorting is applied again using `SortColumnsAsync`, the new sort settings are added to the existing ones. This means previously sorted columns will remain sorted unless explicitly removed or overridden. + +**Sort Multiple Columns and Clear Previous Sort** + +The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method also provides an overload that allows clearing existing sort settings before applying new ones. This is useful when replacing current sort configurations with a new set of sorted columns. + +| Parameter | Type | Description | +|---------------------|-------------------------|-----------------------------------------------------------------------------| +| columns | List | A collection of sorting instructions. Each `SortColumn` in the list defines a specific column to sort and the direction of sorting (**Ascending** or **Descending**). This allows multiple columns to be sorted at the same time, based on the order they appear in the list. | +| clearPreviousSort | bool | To apply a new sort and remove any existing sort settings, enable the option to clear previous sorting. When this option is set to true, all current sort conditions will be removed before applying the new ones. This ensures that only the specified columns are sorted, rather than combining with any existing sort configuration. | + +In this example, the grid is initially configured to sort the **OrderID** column. By setting the `clearPreviousSort` parameter to true in the `SortColumnsAsync` method, the existing sort on the **OrderID** column is removed before applying the new sort. This ensures that only the newly specified columns are sorted, replacing any previous sort settings. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Apply New Sort + + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } = new List(); + private SfGrid? Grid { get; set; } + public List sortColumns { get; set; } = new List(); + + protected override void OnInitialized() { - public string ID { get; set; } - public string Value { get; set; } + GridData = OrderData.GetAllRecords(); } - public async Task AddsortColumn() + private async Task ApplyNewSort() { - await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true); + sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = Syncfusion.Blazor.Grids.SortDirection.Descending }); + sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = Syncfusion.Blazor.Grids.SortDirection.Ascending }); + await Grid!.SortColumnsAsync(sortColumns, true); } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { - } - public OrderData(int? OrderID,string CustomerID, double? Freight, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.ShipName = ShipName; - } +public class OrderData +{ + private static readonly List Orders = new List(); - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); - code += 5; - } - } - return Orders; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipName { get; set; } - public double? Freight { get; set; } + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + } + + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBgsWDKBXuYpcUi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBeCWtoRymxjAYV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Remove sort columns +### Clear sorting +The Blazor DataGrid component provides flexible options to remove sorting from columns. Sorting can be cleared either for specific column or for all columns at once, depending on the requirement. -To remove a sort column externally, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method provided by the Grid. This method allows you to remove the sorting applied to a specific column. +**Clear sorting for specific Column** -The following example demonstrates how to remove sort columns. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column. When an external button is clicked, the `ClearSortingAsync` method is called to remove the selected sort column. +The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method removes sorting from specific columns. It accepts a list of column field names and clears their sort settings. + +| Parameter | Type | Description | +|---------------|-------------------|--------------------------------------------------------------| +| columnNames | List | A list of column field names whose sorting should be removed. | + +In the following example, the grid is initially sorted by **CustomerID** and **ShipName**. A dropdown allows selecting a column name, and clicking the **Remove Sort Column** button removes sorting from the selected column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.DropDowns
    - - - + + +

    - REMOVE SORT COLUMN + Remove Sort Column
    - + @@ -943,110 +1051,95 @@ The following example demonstrates how to remove sort columns. It utilizes the [ - - - - + + + + @code { - public List GridData { get; set; } - - public SfGrid? Grid { get; set; } - - public string DropDownValue { get; set; } = "OrderID"; + private List GridData { get; set; } = new(); + private SfGrid? grid { get; set; } + private string dropDownValue { get; set; } = "OrderID"; + private List columns { get; set; } = new() + { + new ColumnMetaData { Id = "OrderID", Value = "Order ID" }, + new ColumnMetaData { Id = "CustomerID", Value = "Customer ID" }, + new ColumnMetaData { Id = "ShipCity", Value = "Ship City" }, + new ColumnMetaData { Id = "ShipName", Value = "Ship Name" }, + }; protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - List LocalData = new List + private async Task RemoveSortColumn() { - new Columns() { ID= "OrderID", Value= "OrderID" }, - new Columns() { ID= "CustomerID", Value= "CustomerID" }, - new Columns() { ID= "ShipCity", Value= "ShipCity" }, - new Columns() { ID= "ShipName", Value= "ShipName" }, - }; - - public class Columns - { - public string ID { get; set; } - public string Value { get; set; } + if (grid != null) + { + var ColumnNames = new List { dropDownValue }; + await grid.ClearSortingAsync(ColumnNames); + } } - public class Direction + private class ColumnMetaData { - public string ID { get; set; } - public string Value { get; set; } + public string Id { get; set; } = string.Empty; + public string Value { get; set; } = string.Empty; } - List listItems = new List(); - public async Task RemoveSortColumn() - { - listItems.Add(DropDownValue); - await Grid.ClearSortingAsync(listItems); - listItems.Clear(); - - } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } +public class OrderData +{ + private static readonly List Orders = new List(); - public static List GetAllRecords() + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhJXWtlsYHkfUrY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSWsNSxHIlXqJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +**Clear sorting for all columns** -### Clear sorting +The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method removes sorting from all columns in the grid. This is useful when resetting the grid to its default unsorted state. -To clear the sorting on an external button click, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method provided by the Grid. This method clears the sorting applied to all columns in the Grid. - -The following example demonstrates how to clear the sorting using `ClearSortingAsync` method in the external button click. +In this example, the grid is initially sorted by **CustomerID** and **ShipName**. Clicking the **Clear Sorting** button removes sorting from all columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1054,10 +1147,10 @@ The following example demonstrates how to clear the sorting using `ClearSortingA @using Syncfusion.Blazor.Buttons
    - Clear Sorting + Clear Sorting
    - + @@ -1065,186 +1158,273 @@ The following example demonstrates how to clear the sorting using `ClearSortingA - - - - + + + + @code { - public List GridData { get; set; } - - public SfGrid? Grid { get; set; } + private List gridData { get; set; } = new(); + private SfGrid? grid { get; set; } protected override void OnInitialized() { - GridData = OrderData.GetAllRecords(); - } + gridData = OrderData.GetAllRecords(); + } - private async Task onExternalSort() + private async Task ClearAllSorting() { - await Grid.ClearSortingAsync(); + if (grid != null) + { + await grid.ClearSortingAsync(); + } } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData + +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderId, string customerId, string shipCity, string shipName) { - public static List Orders = new List(); - - public OrderData() + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + } + + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLesWjoncQhUnwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Sorting events + +The Syncfusion® Blazor DataGrid provides events that are triggered during sorting operations, such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events enable the execution of custom actions before and after a column is sorted, allowing for validation, customization, and response handling. + +1. `Sorting`: Triggered before a column is sorted. + +2. `Sorted`: Triggered after a column has been sorted. + +### Sorting + +The `Sorting` event is triggered before a column is sorted. This event provides an opportunity to inspect, modify, or cancel the sorting process based on custom logic or validation requirements. + +**Event Arguments** + +The event uses the [SortingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortingEventArgs.html) class, which includes the following properties: + +| Event Argument | Description | +|---------------|-------------| +| ColumnName | Represents the name of the column being sorted. | +| Direction | Indicates the sorting direction (**Ascending** or **Descending**). | +| Cancel | Determines whether the sorting operation should be aborted. Setting this property to true prevents the sorting from being applied. | +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + public List GridData { get; set; } = new List(); + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + private Task Sorting(SortingEventArgs args) + { + // Prevent sorting on OrderID column + if (args.ColumnName == "OrderID") + { + args.Cancel = true; } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + + // Change sort direction dynamically + if (args.ColumnName == "CustomerID" && args.Direction == SortDirection.Ascending) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; + args.Direction = SortDirection.Descending; } - public static List GetAllRecords() + return Task.CompletedTask; + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUWWjKiFKHdJVl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCCXSmsecZFpA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sorting events +### Sorted -The Syncfusion® Blazor DataGrid provides two events that are triggered during the sorting action such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events can be used to perform any custom actions before and after the sorting action is completed. +The `Sorted` event is triggered after a column has been successfully sorted. It provides details about the sorted column and direction, enabling actions such as updating UI, logging, or showing notifications. -1. **Sorting**: `Sorting` event is triggered before the sorting action begins. It provides a way to perform any necessary operations before the sorting action takes place. This event provides a parameter that contains the current sorting column name, direction, and action. +**Event Arguments** -2. **Sorted**: `Sorted` event is triggered after the sorting action is completed. It provides a way to perform any necessary operations after the sorting action has taken place. This event provides a parameter that contains the current sorting column name, direction, and action. +The event uses the [SortedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortedEventArgs.html) class, which includes the following properties: -The following example demonstrates how the `Sorting` and `Sorted` events work when Sorting is performed. The `Sorting` event event is used to cancel the sorting of the OrderID column. The `Sorted` event is used to display a message. +| Event Argument | Description | +|---------------|-------------| +| ColumnName | Represents the name of the column that was sorted. | +| Direction | Indicates the sorting direction (**Ascending** or **Descending**). | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@if (show == true) +@if (showNotification) { -
    - Sort action completed for @columnName column +
    + Sorting completed for @lastSortedColumn column

    } - - + + - - - - + + + + @code { - public List GridData { get; set; } - - public string columnName { get; set; } - public bool show { get; set; } = false; + private List gridData { get; set; } = new List(); + private string lastSortedColumn { get; set; } = string.Empty; + private bool showNotification { get; set; } protected override void OnInitialized() { - GridData = OrderData.GetAllRecords(); - } - - public async Task SortingHandler(SortingEventArgs args) - { - if (args.ColumnName == "OrderID") - { - args.Cancel = true; - } + gridData = OrderData.GetAllRecords(); } - public async Task SortedHandler(SortedEventArgs args) + private Task Sorted(SortedEventArgs args) { - columnName = args.ColumnName; - show = true; + lastSortedColumn = args.ColumnName; + showNotification = true; + return Task.CompletedTask; } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSsiZewifHMFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzNWNzLolkmHqw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md index 1b2c078616..11221918a4 100644 --- a/blazor/datagrid/style-and-appearance/aggregate.md +++ b/blazor/datagrid/style-and-appearance/aggregate.md @@ -1,19 +1,21 @@ --- layout: post -title: Aggregate customization in Blazor DataGrid | Syncfusion -description: Learn here all about aggregate in Syncfusion Blazor DataGrid and more. +title: Customize aggregates in Blazor DataGrid | Syncfusion +description: Learn how to customize aggregate rows in the Syncfusion Blazor DataGrid using CSS, including footer containers and summary cells. platform: Blazor control: DataGrid documentation: ug --- -# Aggregate in Syncfusion® Blazor DataGrid +# Aggregate customization in Syncfusion Blazor DataGrid -You can customize the appearance of aggregate elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize the aggregate root element and the aggregate cell elements. +Aggregates are displayed as summary rows in the DataGrid footer, providing a consolidated view of totals, averages, or counts. These rows can be styled using CSS to match the layout and design of the grid. Styling options are available for: -## Customizing the aggregate root element +- **Aggregate root container:** The outer wrapper of the footer row. +- **Aggregate summary row and cells:** The row that shows summary values, and the cells that display each result. -To customize the appearance of the Grid's aggregate root elements, you can use the following CSS code: +## Customize the aggregate root element +The **.e-gridfooter** class styles the root container of the aggregate footer row. Use CSS to adjust its appearance: ```css .e-grid .e-gridfooter { @@ -21,13 +23,13 @@ To customize the appearance of the Grid's aggregate root elements, you can use t } ``` -In this example, the **e-gridfooter** class represents the root element of the aggregate row in the Grid footer. You can modify the `font-family` property to change the font of the aggregate root element. +Properties like **font-family**, **font-size**, and **padding** can be changed to fit the grid layout design. -![Customize aggregate root element](../images/style-and-appearance/aggregate-root-element.png) +![Aggregate footer root with custom font](../images/style-and-appearance/aggregate-root-element.png) -## Customizing the aggregate cell elements +## Customize the aggregate cell elements -To customize the appearance of the Grid's aggregate cell elements (summary row cell elements), you can use the following CSS code: +The **.e-summaryrow** and **.e-summarycell** classes define the appearance of the summary row and its individual cells in the Blazor DataGrid. Apply CSS to modify their look: ```css .e-grid .e-summaryrow .e-summarycell { @@ -35,27 +37,25 @@ To customize the appearance of the Grid's aggregate cell elements (summary row c } ``` -In this example, the **e-summaryrow** class represents the summary row containing aggregate cells, and the **e-summarycell** class targets individual aggregate cells within the summary row. You can modify the `background-color` property to change the `color` of the aggregate cell elements. +Properties such as **background-color**, **color**, and **text-align** can be adjusted to improve clarity and interaction. -![Customize aggregate cell element](../images/style-and-appearance/aggregate-cell-element.png) +![Aggregate summary cell with custom background color](../images/style-and-appearance/aggregate-cell-element.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + @{ var aggregate = (context as AggregateTemplateContext); -
    -

    Sum: @aggregate.Sum

    -
    +
    Sum: @aggregate.Sum
    }     @@ -67,9 +67,7 @@ In this example, the **e-summaryrow** class represents the summary row containin @{ var aggregate = (context as AggregateTemplateContext); -
    -

    Max: @aggregate.Max

    -
    +
    Max: @aggregate.Max
    }     @@ -77,26 +75,22 @@ In this example, the **e-summaryrow** class represents the summary row containin     - + - - + +     @code { - private SfGrid Grid; - public List Orders { get; set; } - + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -107,44 +101,43 @@ In this example, the **e-summaryrow** class represents the summary row containin {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - - return Orders; + return Data; } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } - public DateTime OrderDate { get; set; } + public int OrderID { get; } + public string CustomerID { get; } + public double Freight { get; } + public DateTime OrderDate { get; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/BNLoXStLKgmIIyaI" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIMNMcivWmiUmh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md index 2d39078f61..b0f0d2222a 100644 --- a/blazor/datagrid/style-and-appearance/editing.md +++ b/blazor/datagrid/style-and-appearance/editing.md @@ -1,7 +1,7 @@ --- layout: post -title: Editing customization in DataGrid | Syncfusion -description: Learn here all about editing customization in Syncfusion Blazor DataGrid component and more details. +title: Customize editing in Blazor DataGrid | Syncfusion +description: Learn how to style and customize edited and added rows, input fields, the edit dialog header, and command buttons in the Syncfusion Blazor DataGrid using CSS. platform: Blazor control: DataGrid documentation: ug @@ -9,25 +9,31 @@ documentation: ug # Editing customization in Syncfusion Blazor DataGrid -You can customize the appearance of editing-related elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various editing-related elements. +The appearance of editing elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the editing interface: -## Customizing the edited and added row element +- **Edited and newly added rows:** Highlights rows that are being modified or newly inserted. +- **Edit form input fields:** Displays text boxes used to enter or update values during editing. +- **Edit dialog header:** Shows the title or context of the current editing operation. +- **Command column buttons:** Displays action buttons such as Edit, Delete, Update, and Cancel. -To customize the appearance of edited and added row table elements in the Grid, you can use the following CSS code: +## Customize edited and added row elements + +The **.e-editedrow** and **.e-addedrow** classes style edited and newly added rows. Apply CSS to make these rows stand out: ```css .e-grid .e-editedrow table, .e-grid .e-addedrow table { background-color: #62b2eb; } ``` -In this example, the .**e-editedrow** class represents the edited row element, and the **.e-addedrow** class represents the added row element. You can modify the `background-color` property to change the color of these row table elements. -![Customizing the added row element](../images/style-and-appearance/edited-added-row-element.png) -![Customizing the edited row element](../images/style-and-appearance/edited-added-row-element-2.png) +Adjust properties such as **background-color** or **border** styles to highlight rows that are in edit mode. + +![Edited and added rows](../images/style-and-appearance/edited-added-row-element.png) +![Edited row styling](../images/style-and-appearance/edited-added-row-element-2.png) -## Customizing the edited row input element +## Customize edited row input elements -To customize the appearance of edited row input elements in the Grid, you can use the following CSS code: +The **.e-gridform** and **.e-input** classes style inputs inside the inline edit form in the Blazor DataGrid. Use CSS to adjust their appearance: ```css @@ -37,40 +43,37 @@ To customize the appearance of edited row input elements in the Grid, you can us } ``` -In this example, the **.e-gridform** class represents the editing form, and the **.e-input** class represents the input elements within the form. You can modify the `font-family` property to change the font and `color` property to change text color of the input elements. -![Customizing the edited and added row element](../images/style-and-appearance/edited-row-input-element.png) +Modify properties such as **font-family**, **color**, or **padding** to improve readability. + +![Edited row inputs with custom font and text color](../images/style-and-appearance/edited-row-input-element.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } - + private List Orders { get; set; } + private readonly List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" }; protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -81,56 +84,59 @@ In this example, the **.e-gridform** class represents the editing form, and the {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; + Freight = freight; + ShipCountry = shipCountry; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA")); } - - return Orders; + return Data; } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + public int OrderID { get; } + public string CustomerID { get; } + public string ShipCity { get; } + public string ShipName { get; } + public double Freight { get; } + public string ShipCountry { get; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLINOLffsrjCvCt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBIWNCxTcuUSDfi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the edit dialog header element +## Customize the edit dialog header -To customize the appearance of the edit dialog header element in the Grid, you can use the following CSS code: +The **.e-edit-dialog** and **.e-dlg-header-content** classes style the dialog header when dialog editing is enabled. Apply CSS to differentiate the header: ```css @@ -139,35 +145,34 @@ To customize the appearance of the edit dialog header element in the Grid, you c } ``` -In this example, the **.e-edit-dialog** class represents the edit dialog, and the **.e-dlg-header-content** class targets the header content within the dialog. You can modify the `background-color` property to change the color of the header element. -![Customizing the edit dialog header element](../images/style-and-appearance/edit-dialog-header-element.png) +Change properties such as **background-color** to visually separate the header from the rest of the dialog content. + +![Edit dialog header with custom background color](../images/style-and-appearance/edit-dialog-header-element.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - + - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } + private readonly List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" }; protected override void OnInitialized() { @@ -179,56 +184,59 @@ In this example, the **.e-edit-dialog** class represents the edit dialog, and th {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; + Freight = freight; + ShipCountry = shipCountry; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA")); } - - return Orders; + return Data; } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + public int OrderID { get; } + public string CustomerID { get; } + public string ShipCity { get; } + public string ShipName { get; } + public double Freight { get; } + public string ShipCountry { get; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBetEhJzsqPbguh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSMjiRTFXgRbNm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the command column buttons +## Customize command column buttons -To customize the appearance of command column buttons such as edit, delete, update, and cancel, you can use the following CSS code: +The **.e-edit**, **.e-delete**, **.e-update**, and **.e-cancel-icon** classes style the command column buttons in the Blazor DataGrid. Use CSS to adjust their appearance: ```css @@ -240,35 +248,35 @@ To customize the appearance of command column buttons such as edit, delete, upda } ``` -In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** classes represent the respective command column buttons. You can modify the `color` property to change the color of these buttons. -![Customize command column button](../images/style-and-appearance/commandbutton-1.png) -![Customize command column button](../images/style-and-appearance/commandbutton-2.png) +Style properties like **color**, **font-size**, and **font-weight** can be adjusted to differentiate action icons and enhance visibility during interaction. + +![Command buttons with custom delete and cancel icon colors](../images/style-and-appearance/commandbutton-1.png) +![Command buttons with custom edit and save icon colors](../images/style-and-appearance/commandbutton-2.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - - + + + - - - - + + + + - + - - @code { - private SfGrid Grid; - public List Orders { get; set; } - + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -292,49 +297,52 @@ In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** class {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); - public OrderData(int orderID, string customerID, double freight, string shipCountry) + public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry) { OrderID = orderID; CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; Freight = freight; ShipCountry = shipCountry; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, "France")); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Germany")); - Orders.Add(new OrderData(10250, "HANAR", 65.83, "Brazil")); - Orders.Add(new OrderData(10251, "VICTE", 41.34, "France")); - Orders.Add(new OrderData(10252, "SUPRD", 51.30, "Belgium")); - Orders.Add(new OrderData(10253, "HANAR", 58.17, "Brazil")); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Switzerland")); - Orders.Add(new OrderData(10255, "RICSU", 148.33, "Switzerland")); - Orders.Add(new OrderData(10256, "WELLI", 13.97, "Brazil")); - Orders.Add(new OrderData(10257, "HILAA", 81.91, "Venezuela")); - Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Austria")); - Orders.Add(new OrderData(10259, "CENTC", 3.25, "Mexico")); - Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Germany")); - Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Brazil")); - Orders.Add(new OrderData(10262, "RATTC", 48.29, "USA")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA")); } - - return Orders; + return Data; } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } - public string ShipCountry { get; set; } + public int OrderID { get; } + public string CustomerID { get; } + public string ShipCity { get; } + public string ShipName { get; } + public double Freight { get; } + public string ShipCountry { get; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrIjYBTfCdNCmvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVSMNiHTPsZJUUc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md index d9c71f66f2..89b38585b1 100644 --- a/blazor/datagrid/style-and-appearance/filtering.md +++ b/blazor/datagrid/style-and-appearance/filtering.md @@ -1,110 +1,126 @@ --- layout: post -title: Filtering customization in Blazor DataGrid | Syncfusion -description: Learn here all about filtering in Syncfusion Blazor DataGrid and more. +title: Customize filtering in Blazor DataGrid | Syncfusion +description: Learn how to style and customize the Syncfusion Blazor DataGrid filter UI using CSS—filter bar, dialog, icons, buttons, and menus. platform: Blazor control: DataGrid documentation: ug --- -# Filtering in Syncfusion® Blazor DataGrid +# Filtering customization in Syncfusion Blazor DataGrid -You can customize the appearance of filtering elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various filtering elements, including filter bar cell elements, filter bar input elements, focus styles, clear icons, filter icons, filter dialog content, filter dialog footer, filter dialog input elements, filter dialog button elements, and Excel filter dialog number filters. +The appearance of filtering elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the filtering interface: -## Customizing the filter bar cell element +- **Filter bar cell and input elements:** Used to enter filter values directly in the header row. +- **Input focus styles:** Visual highlight applied when the filter input field is focused. +- **Clear and filter icons:** Icons for clearing filter values and indicating active filters in column headers. +- **Filter dialog content and footer:** Sections of the filter popup used for entering filter criteria and confirming actions. +- **Input fields and buttons within the filter dialog:** Controls used to specify filter values and apply or cancel filtering. +- **Excel-style number filter visuals:** Menu-style interface for selecting numeric filter conditions in Excel-like filtering mode. -To customize the appearance of the filter bar cell element in the Grid header, you can use the following CSS code: +## Customize the filter bar cell element -```css +The **.e-filterbarcell** class styles the filter bar cells in the header row. Use CSS to adjust its appearance: +```css .e-grid .e-filterbarcell { background-color: #045fb4; } - ``` -In this example, the **.e-filterbarcell** class targets the filter bar cell element in the Grid header. You can modify the `background-color` property to change the color of the filter bar cell element. -![Filter bar cell element](../images/style-and-appearance/filter-bar-cell-element.png) +Properties like **background-color**, **padding**, and **border** can be changed to visually distinguish the filter row from header cells. -## Customizing the filter bar input element +![Filter bar cell with custom background](../images/style-and-appearance/filter-bar-cell-element.png) -To customize the appearance of the filter bar input element in the Grid header, you can use the following CSS code: +## Customize the filter bar input element +The **.e-input** class inside **.e-filterbarcell** styles the input field in the filter bar. Apply CSS to modify its look: ```css - -.e-grid .e-filterbarcell .e-input-group input.e-input{ +.e-grid .e-filterbarcell .e-input-group input.e-input { font-family: cursive; } - ``` -In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input** class targets the input element within the cell. You can modify the `font-family` property to change the font of the filter bar input element. -![Filter bar input element](../images/style-and-appearance/filter-bar-input-element.png) +Adjust properties such as **font-family**, **font-size**, and **border** can be adjusted to improve readability and match the grid design. -## Customizing the filter bar input focus +![Filter bar input with custom font](../images/style-and-appearance/filter-bar-input-element.png) -To customize the appearance of the filter bar input element's focus highlight, you can use the following CSS code: +## Customize the input focus -```css +The **.e-input-focus** class styles the filter bar input group when focused. Apply CSS to change its appearance: -.e-grid .e-filterbarcell .e-input-group.e-input-focus{ +```css +.e-grid .e-filterbarcell .e-input-group.e-input-focus { background-color: #deecf9; } - ``` -In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input-group.e-input-focus** class targets the focused input element. You can modify the `background-color` property to change the color of the focus highlight. + +Change properties like **background-color** and **border** to enhance focus visibility and support keyboard navigation. ![Filter bar input focus](../images/style-and-appearance/filter-bar-input-element-focus.png) -## Customizing the filter bar input clear icon +## Customize the filter bar input clear icon -To customize the appearance of the filter bar input element's clear icon, you can use the following CSS code: +The **.e-clear-icon::before** class defines the clear icon in the filter bar input. Apply CSS to change its appearance: ```css - .e-grid .e-filterbarcell .e-input-group .e-clear-icon::before { content: '\e72c'; } - ``` -In this example, the **.e-clear-icon** class targets the clear icon element within the input group. You can modify the `content` property to change the icon displayed. -![Filter bar input clear icon](../images/style-and-appearance/filter-bar-input-clear-icon.png) +The `content` property can be updated to use a different glyph from the icon set. + +![Filter bar input with customized clear icon](../images/style-and-appearance/filter-bar-input-clear-icon.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } - + + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -115,35 +131,35 @@ In this example, the **.e-clear-icon** class targets the clear icon element with {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -155,138 +171,139 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDryXIXVUYyWnGdg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDryMjMRrYykDUIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the Blazor DataGrid filtering icon +## Customize the filtering icon in the header -To customize the appearance of the Grid's filtering icon in the Grid header, you can use the following CSS code: +The **.e-icon-filter::before** class styles the filter icon in column headers. Apply CSS to modify its look: ```css - -.e-grid .e-icon-filter::before{ +.e-grid .e-icon-filter::before { content: '\e81e'; } - ``` -In this example, the **.e-icon-filter** class targets the filtering icon element. You can modify the `content` property to change the icon displayed. -![Grid filtering icon](../images/style-and-appearance/grid-filtering-icon.png) +Update the `content` value to match the desired icon glyph. -## Customizing the filter dialog content +![Header filter icon](../images/style-and-appearance/grid-filtering-icon.png) -To customize the appearance of the filter dialog's content element, you can use the following CSS code: +## Customize the filter dialog content -```css +The **.e-filter-popup .e-dlg-content** class styles the content area of the filter dialog. Apply CSS to change its appearance: +```css .e-grid .e-filter-popup .e-dlg-content { background-color: #deecf9; } - ``` -In this example, the **.e-filter-popup .e-dlg-content** classes target the content element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's content. + +Modify properties such as **background-color**, **padding**, and **border** to match the application theme. ![Filter dialog content](../images/style-and-appearance/filter-dialog-content.png) -## Customizing the filter dialog footer +## Customize the filter dialog footer -To customize the appearance of the filter dialog's footer element, you can use the following CSS code: +The **.e-filter-popup .e-footer-content** class styles the footer section of the filter dialog. Apply CSS to adjust its appearance: ```css - .e-grid .e-filter-popup .e-footer-content { background-color: #deecf9; } - ``` -In this example, the **.e-filter-popup .e-footer-content** classes target the footer element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's footer. + +Properties like **background-color**, **text-align**, and **border** can be changed to align with the layout design. ![Filter dialog footer](../images/style-and-appearance/filter-dialog-footer.png) -## Customizing the filter dialog input element +## Customize the filter dialog input field -To customize the appearance of the filter dialog's input elements, you can use the following CSS code: +The **.e-input** class inside **.e-filter-popup** targets input fields in the filter dialog. Use CSS to adjust its appearance: ```css - -.e-grid .e-filter-popup .e-input-group input.e-input{ +.e-grid .e-filter-popup .e-input-group input.e-input { font-family: cursive; } - ``` -In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-input** class targets the input elements within the dialog. You can modify the `font-family` property to change the font of the input elements. -![Filter dialog input element](../images/style-and-appearance/filter-dialog-input-element.png) +Adjust properties such as **font-family**, **color**, and **border** to improve clarity and consistency. -## Customizing the filter dialog button element +![Filter dialog input](../images/style-and-appearance/filter-dialog-input-element.png) -To customize the appearance of the filter dialog's button elements, you can use the following CSS code: +## Customize the filter dialog button element -```css +The **.e-filter-popup .e-btn** class styles buttons inside the filter dialog. Apply CSS to modify their appearance: -.e-grid .e-filter-popup .e-btn{ +```css +.e-grid .e-filter-popup .e-btn { font-family: cursive; } - ``` -In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-btn** class targets the button elements within the dialog. You can modify the `font-family` property to change the font of the button elements. -![Filter dialog button element](../images/style-and-appearance/filter-dialog-button-element.png) +Change properties like **font-family**, **background-color**, and **border** to match the design. -## Customizing the excel filter dialog number filters element +![Filter dialog buttons](../images/style-and-appearance/filter-dialog-button-element.png) -To customize the appearance of the excel filter dialog's number filters, you can use the following CSS code: +## Customize the Excel-style number filter menu -```css +The **.e-contextmenu-container ul** class inside **.e-filter-popup** styles the number filter list in the Excel-style filter dialog. Apply CSS to change its appearance: -.e-grid .e-filter-popup .e-contextmenu-container ul{ +```css +.e-grid .e-filter-popup .e-contextmenu-container ul { background-color: #deecf9; } - ``` -In this example, the **.e-filter-popup .e-contextmenu-container** ul classes target the number filter elements within the excel filter dialog. You can modify the `background-color` property to change the color of these elements. -![Excel filter dialog number filters element](../images/style-and-appearance/excel-filter-dialog-number-filters-element.png) +Properties such as **background-color**, **color**, and **text-align** can be adjusted to match the required design. + +![Excel-style filter menu](../images/style-and-appearance/excel-filter-dialog-number-filters-element.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -298,35 +315,35 @@ In this example, the **.e-filter-popup .e-contextmenu-container** ul classes tar {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -338,4 +355,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSjyjhAkUzNonV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLIsNixVEFSwNFe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/grouping.md b/blazor/datagrid/style-and-appearance/grouping.md index a99346e4b3..0c27f03567 100644 --- a/blazor/datagrid/style-and-appearance/grouping.md +++ b/blazor/datagrid/style-and-appearance/grouping.md @@ -1,50 +1,56 @@ --- layout: post -title: Grouping customization in Blazor DataGrid | Syncfusion -description: Learn here all about grouping in Syncfusion Blazor DataGrid and more. +title: Customize grouping in Blazor DataGrid | Syncfusion +description: Learn how to style and customize the grouping UI in Syncfusion Blazor DataGrid—group headers, icons, caption rows, and indent cells with CSS tips. platform: Blazor control: DataGrid documentation: ug --- -# Grouping in Syncfusion® Blazor DataGrid +# Grouping customization in Syncfusion Blazor DataGrid -You can customize the appearance of grouping elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the group header, group expand/collapse icons, group caption row, and grouping indent cell. +The appearance of grouping elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the grouping interface: -## Customizing the group header +- **Group header container and text:** Displays grouped column names and allows drag-and-drop grouping actions. +- **Expand and collapse icons:** Controls used to toggle visibility of grouped rows. +- **Group caption row:** Shows summary information for each group, such as group key and item count. +- **Grouping indent cell:** Adds visual indentation to grouped rows to indicate hierarchy. -To customize the appearance of the group header element, you can use the following CSS code: +## Customize the group header + +The **.e-groupdroparea** class styles the group header area in the Blazor DataGrid. Use CSS to adjust its appearance: ```css .e-grid .e-groupdroparea { background-color: #132f49; } - ``` -In this example, the **.e-groupdroparea** class targets the group header element. You can modify the `background-color` property to change the color of the group header. + +Properties like **background-color**, **padding**, **border**, and **font** can be changed to fit the grid layout design. ![Group header](../images/style-and-appearance/group-header.png) -## Customizing the group expand or collapse icons +## Customize the expand and collapse icons -To customize the appearance of the group expand/collapse icons in the Grid, you can use the following CSS code: +The **.e-icon-gdownarrow** and **.e-icon-grightarrow** classes define the expand and collapse icons in grouped rows. Apply CSS to modify their look: ```css -.e-grid .e-icon-gdownarrow::before{ - content:'\e7c9' - } -.e-grid .e-icon-grightarrow::before{ - content:'\e80f' +.e-grid .e-icon-gdownarrow::before { + content: '\e7c9'; +} + +.e-grid .e-icon-grightarrow::before { + content: '\e80f'; } ``` -In this example, the **.e-icon-gdownarrow** and **.e-icon-grightarrow** classes target the expand and collapse icons, respectively. You can modify the `content` property to change the icon displayed. You can use the available [Syncfusion® icons](https://blazor.syncfusion.com/documentation/appearance/icons) based on your theme. +Modify the `content`, color, or size to align with custom icon sets. Confirm that the appropriate icon font family is available so glyphs render correctly. Refer to the [Syncfusion icons](https://blazor.syncfusion.com/documentation/appearance/icons) documentation to choose glyphs for your theme. -![Group expand or collapse icons](../images/style-and-appearance/group-expand-or-collapse-icons.png) +![Expand and collapse icons](../images/style-and-appearance/group-expand-or-collapse-icons.png) -## Customizing the group caption row +## Customize the group caption row -To customize the appearance of the group caption row and the icons indicating record expansion or collapse, you can use the following CSS code: +The **.e-groupcaption** class styles the caption row, and **.e-recordplusexpand** and **.e-recordpluscollapse** classes style the record-level expand and collapse indicators: ```css .e-grid .e-groupcaption { @@ -57,13 +63,13 @@ To customize the appearance of the group caption row and the icons indicating re } ``` -In this example, the **.e-groupcaption** class targets the group caption row element, and the **.e-recordplusexpand** and **.e-recordpluscollapse** classes target the icons indicating record expansion or collapse. You can modify the `background-color` property to change the color of these elements. +Adjust properties such as **background-color**, **padding**, **border**, and **font** to maintain consistency with the rest of the grid. ![Group caption row](../images/style-and-appearance/group-caption-row.png) -## Customizing the grouping indent cell +## Customize the grouping indent cell -To customize the appearance of the grouping indent cell element, you can use the following CSS code: +The **.e-indentcell** class styles the indent cell used in grouped rows. Apply CSS to change its appearance: ```css .e-grid .e-indentcell { @@ -71,20 +77,23 @@ To customize the appearance of the grouping indent cell element, you can use the } ``` -In this example, the **.e-indentcell** class targets the grouping indent cell element. You can modify the `background-color` property to change the color of the indent cell. +Modify properties such as **background-color**, **padding**, and **border** to match the overall layout and maintain consistency. -![Grouping indent cell](../images/style-and-appearance/indent-cell.png) +![Indent cell](../images/style-and-appearance/indent-cell.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - + @@ -92,31 +101,48 @@ In this example, the **.e-indentcell** class targets the grouping indent cell el @code { - private SfGrid Grid; - public List Orders { get; set; } - public string[] Initial = (new string[] { "CustomerID" }); + private List Orders { get; set; } + private readonly string[] InitialColumns = { "CustomerID" }; protected override void OnInitialized() { @@ -128,40 +154,40 @@ In this example, the **.e-indentcell** class targets the grouping indent cell el {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -173,4 +199,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBeXyjLAcEEhVUs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBSCDinhwfxPloP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md index 942d6c0e5a..52426929c7 100644 --- a/blazor/datagrid/style-and-appearance/header.md +++ b/blazor/datagrid/style-and-appearance/header.md @@ -1,59 +1,62 @@ --- layout: post -title: Header customization in Blazor DataGrid | Syncfusion -description: Learn here all about header in Syncfusion Blazor DataGrid and more. +title: Header styling and visibility in Blazor DataGrid | Syncfusion +description: Learn how to style and hide the Syncfusion Blazor DataGrid header using CSS—customize header bar, cells, text, with CSS isolation tips. platform: Blazor control: DataGrid documentation: ug --- -# Header in Syncfusion® Blazor DataGrid +# Header customization in Syncfusion Blazor DataGrid -You can customize the appearance of the header elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the Grid header, header cell, and header cell div element. +The appearance of header elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the header interface: -## Customizing the Blazor DataGrid header +- **Header container**: The outer wrapper that holds all column headers. +- **Header cells**: Individual containers for each column title and associated icons. +- **Header text container**: The inner element that holds the header text content. -To customize the appearance of the Grid header root element, you can use the following CSS code: +## Customize the Blazor DataGrid header -```css +The **.e-gridheader** class styles the header container in the Blazor DataGrid. Use CSS to adjust its appearance: +```css .e-grid .e-gridheader { border: 2px solid green; } ``` -In this example, the **.e-gridheader** class targets the Grid header root element. You can modify the `border` property to change the style of the header border. This customization allows you to override the thin line between the header and content of the Grid. + +Style Properties like **border**, **padding**, and **background-color** can be changed to fit the grid layout design. ![Grid header](../images/style-and-appearance/grid-header.png) -## Customizing the Blazor DataGrid header cell +## Customize the Blazor DataGrid header cell -To customize the appearance of the Grid header cell elements, you can use the following CSS code: +The **.e-headercell** class styles individual header cells in the Blazor DataGrid. Apply CSS to modify its look: ```css - .e-grid .e-headercell { color: #ffffff; background-color: #1ea8bd; } - ``` -In this example, the **.e-headercell** class targets the header cell elements. You can modify the `color` and `background-color` properties to change the text color and background of the header cells. + +Properties such as **color**, **background-color**, **font**, and alignment can be adjusted to align with the grid design. ![Grid header cell](../images/style-and-appearance/grid-header-cell.png) -## Customizing the Blazor DataGrid header cell div element +## Customize the Blazor DataGrid header cell div element -To customize the appearance of the Grid header cell div element, you can use the following CSS code: +The **.e-headercelldiv** class styles the text container inside each header cell. Apply CSS to change its appearance: ```css - .e-grid .e-headercelldiv { font-size: 15px; font-weight: bold; color: darkblue; } ``` -In this example, the **.e-headercelldiv** class targets the div element within the header cell. You can modify the `font-size`, `font-weight`, `color` properties to change the font size, font-weight and color of the header text content. + +Change properties like **font-size**, **font-weight**, and **color** to highlight the header text and improve clarity. ![Grid header cell div element](../images/style-and-appearance/grid-header-cell-div-element.png) @@ -62,34 +65,33 @@ In this example, the **.e-headercelldiv** class targets the div element within t @using Syncfusion.Blazor.Grids - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -101,35 +103,35 @@ In this example, the **.e-headercelldiv** class targets the div element within t {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -141,44 +143,50 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBoNSXVUGazWuEg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBSiDWnrSSbAdxE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Hide Blazor DataGrid header +## Hide the Blazor DataGrid header -In the Syncfusion® Blazor DataGrid, the header row (which displays the column titles) can be hidden using simple CSS styles. +The **.e-gridheader .e-columnheader** class combination targets the column header row in the Blazor DataGrid. Use CSS to hide the header: + +```css +.e-grid .e-gridheader .e-columnheader { + display: none; +} +``` -Apply the following CSS to your application. This will completely hide the column headers of every Grid on the page: +To hide the header for a specific grid only, apply the style using the grid’s ID: ```css - +#Grid.e-grid .e-gridheader .e-columnheader { + display: none; +} ``` + +> Hiding headers also removes visual elements such as sorting arrows, filter icons, and column menu buttons. This may affect accessibility. If headers are hidden, ensure alternative labels are provided using attributes like `aria-label` or `aria-labelledby`. + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -189,35 +197,35 @@ Apply the following CSS to your application. This will completely hide the colum {% endhighlight %} {% highlight c# tabtitle="OrderDetails.cs" %} -public class OrderDetails +internal sealed class OrderDetails { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderDetails(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderDetails(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderDetails(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderDetails(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderDetails(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderDetails(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderDetails(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderDetails(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderDetails(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderDetails(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderDetails(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderDetails(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderDetails(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderDetails(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderDetails(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderDetails(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderDetails(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderDetails(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderDetails(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderDetails(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderDetails(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -229,6 +237,4 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVoDohZJpGSPqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -N> If you want to hide the header for particular Grid, then you can apply the above styles to that Grid using the ID (#Grid.e-grid .e-gridheader .e-columnheader) property value. \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXroMtixVyHRNvjg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/paging.md b/blazor/datagrid/style-and-appearance/paging.md index 0b0bbe9d12..98ddbf65f9 100644 --- a/blazor/datagrid/style-and-appearance/paging.md +++ b/blazor/datagrid/style-and-appearance/paging.md @@ -1,19 +1,25 @@ --- layout: post -title: Paging customization in Blazor DataGrid | Syncfusion -description: Learn here all about paging in Syncfusion Blazor DataGrid and more. +title: Pager styling and customization in Blazor DataGrid | Syncfusion +description: Learn how to style the Syncfusion Blazor DataGrid pager using CSS—customize container, buttons, numeric items, and page indicator. platform: Blazor control: DataGrid documentation: ug --- -# Paging in Syncfusion® Blazor DataGrid +# Paging customization in Syncfusion Blazor DataGrid -You can customize the appearance of the paging elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the pager root element, pager container element, pager navigation elements, pager page numeric link elements, and pager current page numeric element. +The appearance of paging elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the pager interface: -## Customizing the Blazor DataGrid pager root element +- **Root container:** The outermost wrapper that holds all pager content. +- **Pager container:** The inner layout that positions the controls. +- **Navigation buttons:** Commands for first, previous, next, and last page navigation. +- **Numeric page indicators:** Indicators that jump directly to specific pages. +- **Current page indicator:** The highlight that marks the active numeric page button. -To customize the appearance of the Grid pager root element, you can use the following CSS code: +## Customize the pager root element + +The **.e-gridpager** class styles the pager root element in the Blazor DataGrid. Use CSS to adjust its appearance: ```css .e-grid .e-gridpager { @@ -21,13 +27,14 @@ To customize the appearance of the Grid pager root element, you can use the foll background-color: #deecf9; } ``` -In this example, the **.e-gridpager** class targets the pager root element. You can modify the `font-family` to change the font family and `background-color` property to change the background color of the pager. -![Grid pager root element](../images/style-and-appearance/grid-pager-root-element.png) +Properties like **font-family**, **background-color**, and spacing-related styles can be changed to fit the grid layout design. + +![Pager root element](../images/style-and-appearance/grid-pager-root-element.png) -## Customizing the Blazor DataGrid pager container element +## Customize the pager container element -To customize the appearance of the Grid pager container element, you can use the following CSS code: +The **.e-pagercontainer** class styles the pager container in the Syncfusion® Blazor DataGrid. Apply CSS to modify its look: ```css .e-grid .e-pagercontainer { @@ -36,13 +43,13 @@ To customize the appearance of the Grid pager container element, you can use the } ``` -In this example, the **.e-pagercontainer** class targets the pager container element. You can modify the `border` property and `font-family` property to change the border color and font family of the pager container. +Properties such as **font-family**, **background-color**, and spacing-related styles can be adjusted to align with the grid design. -![Grid pager container element](../images/style-and-appearance/grid-pager-container-element.png) +![Pager container element](../images/style-and-appearance/grid-pager-container-element.png) -## Customizing the Blazor DataGrid pager navigation elements +## Customize the pager navigation elements -To customize the appearance of the Grid pager navigation elements, you can use the following CSS code: +The **.e-prevpagedisabled**, **.e-prevpage**, **.e-nextpage**, **.e-nextpagedisabled**, **.e-lastpagedisabled**, **.e-lastpage**, **.e-firstpage**, and **.e-firstpagedisabled** classes define the appearance of the pager navigation buttons in the Blazor DataGrid. Apply CSS to customize their styling: ```css .e-grid .e-gridpager .e-prevpagedisabled, @@ -57,34 +64,34 @@ To customize the appearance of the Grid pager navigation elements, you can use t } ``` -In this example, the classes **.e-prevpagedisabled, .e-prevpage, .e-nextpage, .e-nextpagedisabled, .e-lastpagedisabled, .e-lastpage, .e-firstpage,** and **.e-firstpagedisabled** target the various pager navigation elements. You can modify the `background-color` property to change the background color of these elements. +Adjust properties like **background-color** to match the design, while keeping clear focus styles for accessibility. -![Grid pager navigation elements](../images/style-and-appearance/grid-pager-navigation-element.png) +![Pager navigation elements](../images/style-and-appearance/grid-pager-navigation-element.png) -## Customizing the Blazor DataGrid pager page numeric link elements +## Customize the pager numeric button elements -To customize the appearance of the Grid pager current page numeric link elements, you can use the following CSS code: +The **.e-numericitem** class styles the numeric page buttons in the Blazor DataGrid. Apply CSS to change their appearance: ```css .e-grid .e-gridpager .e-numericitem { background-color: #5290cb; color: #ffffff; cursor: pointer; - } - +} + .e-grid .e-gridpager .e-numericitem:hover { background-color: white; - color: #007bff; + color: #007bff; } ``` -In this example, the **.e-numericitem** class targets the page numeric link elements. You can modify the `background-color`, `color` properties to change the background color and text color of these elements. +Modify properties such as **background-color**, **color**, and **hover** effects to improve clarity and interaction. -![Grid pager page numeric link elements](../images/style-and-appearance/pager-page-numeric-link-elements.png) +![Pager numeric button elements](../images/style-and-appearance/pager-page-numeric-link-elements.png) -## Customizing the Blazor DataGrid pager current page numeric element +## Customize the current page numeric element -To customize the appearance of the Grid pager current page numeric element, you can use the following CSS code: +The **.e-currentitem** class styles the current page indicator in the Blazor DataGrid pager. Use CSS to adjust it: ```css .e-grid .e-gridpager .e-currentitem { @@ -93,9 +100,9 @@ To customize the appearance of the Grid pager current page numeric element, you } ``` -In this example, the **.e-currentitem** class targets the current page numeric item. You can modify the `background-color` property to change the background color of this element and `color` property to change the text color. +Change properties like **background-color** and **color** to highlight the active page. -![Grid pager current page numeric element](../images/style-and-appearance/grid-pager-current-page-numeric-element.png) +![Current page numeric element](../images/style-and-appearance/grid-pager-current-page-numeric-element.png) {% tabs %} @@ -106,10 +113,10 @@ In this example, the **.e-currentitem** class targets the current page numeric i - + - - + + @@ -122,11 +129,10 @@ In this example, the **.e-currentitem** class targets the current page numeric i background-color: #5290cb; color: #ffffff; cursor: pointer; - } - + } .e-grid .e-gridpager .e-numericitem:hover { background-color: white; - color: #007bff; + color: #007bff; } .e-grid .e-gridpager .e-prevpagedisabled, .e-grid .e-gridpager .e-prevpage, @@ -150,7 +156,7 @@ In this example, the **.e-currentitem** class targets the current page numeric i @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -162,35 +168,35 @@ In this example, the **.e-currentitem** class targets the current page numeric i {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -202,4 +208,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVejyDhUQlhxJtR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBeitMeWnMUTNeW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/selection.md b/blazor/datagrid/style-and-appearance/selection.md index 43b546e79e..41ebf2a51e 100644 --- a/blazor/datagrid/style-and-appearance/selection.md +++ b/blazor/datagrid/style-and-appearance/selection.md @@ -1,26 +1,30 @@ --- layout: post -title: Selection customization in Blazor DataGrid | Syncfusion -description: Learn here all about selection in Syncfusion Blazor DataGrid and more. +title: Selection styling with CSS in Blazor DataGrid | Syncfusion +description: Learn how to style row and cell selection in Syncfusion Blazor DataGrid using CSS, with tips on isolation and selector specificity. platform: Blazor control: DataGrid documentation: ug --- -# Selection in Syncfusion® Blazor DataGrid +# Selection customization in Syncfusion Blazor DataGrid -You can customize the appearance of the selection in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the row selection background, cell selection background, and column selection background. +The appearance of selection elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for: -## Customizing the row selection background +- **Row selection background:** Highlights the entire row when selected. +- **Cell selection background:** Highlights individual cells when selected. -To customize the appearance of row selection, you can use the following CSS code: +## Customize row selection background + +The **.e-selectionbackground** class styles the background of selected rows in the DataGrid. Use CSS to modify its appearance: ```css .e-grid td.e-selectionbackground { background-color: #00b7ea; } ``` -In this example, the **.e-selectionbackground** class targets the background color of the row selection. You can modify the `background-color` property to change the background color of the selected rows. + +Properties such as **background-color**, **color**, and **font-weight** can be adjusted to match the grid’s design. ![Row selection](../images/style-and-appearance/row-selection.png) @@ -33,10 +37,10 @@ In this example, the **.e-selectionbackground** class targets the background col - + - - + + @@ -48,7 +52,7 @@ In this example, the **.e-selectionbackground** class targets the background col @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -60,35 +64,35 @@ In this example, the **.e-selectionbackground** class targets the background col {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); - public OrderData(int orderID, string customerID, double freight, DateTime orderDate) + public OrderData(int orderId, string customerId, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + OrderDate = orderDate; } public static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -100,11 +104,11 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLoDeNVAaPnabCX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXreMNsoWGPYQGPH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the cell selection background +## Customize cell selection background -To customize the appearance of cell selection, you can use the following CSS code: +The **.e-cellselectionbackground** class styles the background of selected cells in the DataGrid. Apply CSS to customize its appearance: ```css .e-grid td.e-cellselectionbackground { @@ -112,7 +116,7 @@ To customize the appearance of cell selection, you can use the following CSS cod } ``` -In this example, the **.e-cellselectionbackground** class targets the background color of the cell selection. You can modify the `background-color` property to change the background color of the selected cells. +Modify visual properties to align with the overall layout and improve clarity. ![Cell selection](../images/style-and-appearance/cell-selection.png) @@ -121,14 +125,14 @@ In this example, the **.e-cellselectionbackground** class targets the background @using Syncfusion.Blazor.Grids - + - + - + - - + + @@ -136,11 +140,16 @@ In this example, the **.e-cellselectionbackground** class targets the background .e-grid td.e-cellselectionbackground { background-color: #00b7ea; } + /* Optional: visible focus for cell mode */ + .e-grid td.e-focused { + outline: 2px solid #005a9e; + outline-offset: -2px; + } @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -152,35 +161,35 @@ In this example, the **.e-cellselectionbackground** class targets the background {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -192,4 +201,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtByjeXBpZNiRnBQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVIWDsoivLIZrXK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/sorting.md b/blazor/datagrid/style-and-appearance/sorting.md index da4547c290..c62ff3366a 100644 --- a/blazor/datagrid/style-and-appearance/sorting.md +++ b/blazor/datagrid/style-and-appearance/sorting.md @@ -1,35 +1,40 @@ --- layout: post -title: Sorting customization in Blazor DataGrid | Syncfusion -description: Learn here all about sorting in Syncfusion Blazor DataGrid and more. +title: Sorting Icon Styling in Blazor DataGrid | Syncfusion +description: Learn how to style sorting icons in Syncfusion Blazor DataGrid using CSS, with tips on theme icon codes and CSS isolation. platform: Blazor control: DataGrid documentation: ug --- -# Sorting in Syncfusion® Blazor DataGrid +# Sorting customization in Syncfusion Blazor DataGrid -You can customize the appearance of the sorting icons and multi sorting icons in the Syncfusion® Blazor DataGrid using CSS. You can use the available Syncfusion® [icons](https://blazor.syncfusion.com/themestudio/?theme=material3) based on your theme. Here's how to do it: +The appearance of sorting indicators in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for: -## Customizing the Blazor DataGrid sorting icon +- **Ascending and descending sort icons:** Show the current sort direction in column headers. +- **Multi-sorting order indicators:** Display the order of sorting when multiple columns are sorted. -To customize the sorting icon that appears in the Grid header when sorting is applied, you can use the following CSS code: +## Customize sorting icons + +The **.e-icon-ascending** and **.e-icon-descending** classes define the icons shown in the DataGrid header when a column is sorted in `ascending` or `descending` order. Use CSS to adjust its appearance: ```css .e-grid .e-icon-ascending::before { - content: '\e7a3'; /* Icon code for ascending order */ + content: '\e7a3'; /* Ascending icon code */ } + .e-grid .e-icon-descending::before { - content: '\e7b6'; /* Icon code for descending order */ + content: '\e7b6'; /* Descending icon code */ } ``` -In this example, the **.e-icon-ascending::before** class targets the sorting icon for ascending order, and the **.e-icon-descending::before** class targets the sorting icon for descending order. + +Adjust properties such as **content**, **color**, **font-size**, and **margin** to match the grid design. Ensure the correct icon font family is loaded to display the icons properly. ![Grid sorting icon](../images/style-and-appearance/grid-sorting-icons.png) -## Customizing the Blazor DataGrid multi sorting icon +## Customize multi-sorting indicators -To customize the multi sorting icon that appears in the Grid header when multiple columns are sorted, you can use the following CSS code: +The **.e-sortnumber** class styles the numeric indicator shown when multiple columns are sorted. Apply CSS to change their appearance: ```css .e-grid .e-sortnumber { @@ -38,7 +43,7 @@ To customize the multi sorting icon that appears in the Grid header when multipl } ``` -In this example, the **.e-sortnumber** class targets the background color and font family of the multi sorting icon. You can modify the `background-color` and `font-family` properties to customize the appearance of the multi sorting icon. +Modify properties such as **background-color**, **font-family**, **font-size**, and **border-radius** to align with the grid layout. Ensure accessibility by maintaining clear contrast and focus styles. ![Grid multi sorting icon](../images/style-and-appearance/grid-multi-sorting-icon.png) @@ -50,29 +55,56 @@ In this example, the **.e-sortnumber** class targets the background color and fo - + - - + + @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -84,35 +116,35 @@ In this example, the **.e-sortnumber** class targets the background color and fo {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -124,4 +156,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBSXoDhUccZrPyZ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXreCDMeBDUtgbSZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/style-and-appearance.md b/blazor/datagrid/style-and-appearance/style-and-appearance.md index dd68ec8987..bce442ade0 100644 --- a/blazor/datagrid/style-and-appearance/style-and-appearance.md +++ b/blazor/datagrid/style-and-appearance/style-and-appearance.md @@ -1,57 +1,59 @@ --- layout: post -title: Style and appearance in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about style and appearance in Syncfusion Blazor DataGrid and more details. +title: Syncfusion Blazor DataGrid Styling Guide with CSS and Theme Studio +description: Learn to customize the Syncfusion Blazor DataGrid using CSS and Theme Studio, including headers, rows, alternate rows, and grid lines. platform: Blazor control: DataGrid documentation: ug --- -# Style and appearance in Syncfusion® Blazor DataGrid +# Style and appearance in Syncfusion Blazor DataGrid -The Syncfusion® Blazor DataGrid offers various ways to customize its appearance using both default CSS and custom themes. Let's go over some common approaches: +The Syncfusion® Blazor DataGrid supports visual customization using CSS and theme-based styling. Styles can be applied to various elements to match the application's design. Styling options are available for: -**Default CSS overrides:** +- **DataGrid root element:** Defines the overall appearance of the grid container. +- **Alternate rows with frozen columns:** Applies styles to alternate rows when frozen columns are enabled. +- **Grid lines:** Controls the color and visibility of horizontal and vertical lines between cells. -You can use custom CSS to override the default styles of the Grid. This allows you to change colors, fonts, paddings, and more. You can inspect the generated HTML of the Grid using browser developer tools to identify the relevant CSS classes and styles. +**Override Default Styles:** -Here's a basic example of how you can override the header background color of the Grid: +Default styles such as **colors**, **typography**, **spacing**, and **borders** can be customized using CSS. Use browser developer tools to inspect the rendered HTML and identify relevant selectors. Where possible, use CSS variables or theme tokens to maintain consistency across components. ```css -/* In your control's CSS file */ .e-grid .e-headercell { background-color: #333; /* Override the header background color */ color: #fff; } ``` +Properties like **background-color**, **color**, **font-family**, and **padding** can be changed to match the grid layout design and improve visual consistency. + ![Change header background](../images/style-and-appearance/header-background.png) -**Using theme studio:** +**Using Theme Studio:** -Syncfusion's Theme Studio tool allows you to create custom themes for all their controls, including the Grid. This is a more advanced approach that lets you define a comprehensive set of styles to achieve a consistent look and feel throughout your application. +Syncfusion Theme Studio provides a unified approach to style all components, including the Blazor DataGrid. -1. Visit the [Syncfusion® Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material3). -2. Select the Grid from the left panel. -3. Customize various aspects of the control's appearance, such as colors, typography, and spacing. -4. Once done, you can download the generated CSS file and include it in your Blazor project. +1. Open the [Syncfusion® Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material3). +2. Select **Grid** in the left panel. +3. Customize colors, typography, spacing, and other visual tokens. +4. Download the generated CSS and include it in the Blazor project’s site stylesheet or theme bundle. -## Customizing the Blazor DataGrid root element +## Customize the DataGrid root element -To customize the appearance of the root element of the Syncfusion® Blazor Grid, you can use CSS. Here's an example of how to modify the font family and row colors using CSS: +The **.e-grid** class styles the root container of the Blazor DataGrid. Apply CSS to modify its appearance: ```css .e-grid { - font-family: cursive; + font-family: cursive; } - ``` -![Grid root element](../images/style-and-appearance/style-font-family.png) +Properties such as f **font-family**,**background-color**, and spacing-related styles can be adjusted to align with the grid design. -The above code snippet, the **.e-grid** class targets the root element of the Grid, and the `font-family` property is set to cursive to change the font family of Grid. +![Grid root element](../images/style-and-appearance/style-font-family.png) -In the following sample, the font family of Grid content is changed to **cursive**, and the background color of rows, selected rows, alternate rows, and row hovering color is modified using the below CSS styles. +This customization applies a `cursive` font to the grid content. Additional styling can be applied to rows, alternate rows, selected rows, and hover states. Avoid using `!important` for hover styles in production environments. Instead, increase selector specificity to maintain consistent styling control. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -59,7 +61,7 @@ In the following sample, the font family of Grid content is changed to **cursive @using Syncfusion.Blazor.Grids - + @@ -70,33 +72,39 @@ In the following sample, the font family of Grid content is changed to **cursive @code { private SfGrid Grid; - public bool IsEncode { get; set; } = true; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -108,69 +116,59 @@ In the following sample, the font family of Grid content is changed to **cursive {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); - public OrderData() + private static readonly List Data = new(); + public OrderData(int orderId, string customerId, double freight, string shipCity) { - + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipCity = shipCity; } - public OrderData(int? OrderID, string CustomerId, double? Freight, string ShipCity) + internal static List GetAllRecords() { - this.OrderID = OrderID; - this.CustomerID = CustomerId; - this.Freight = Freight; - this.ShipCity= ShipCity; - } - - public static List GetAllRecords() - { - if (Orders.Count() == 0) + if (Data.Count == 0) { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET",32.38, "Reims")); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); - Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); - Orders.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); - Orders.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); - Orders.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); - Orders.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); - Orders.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); - code += 5; - } + Data.Add(new OrderData(10248, "VINET", 32.38, "Reims")); + Data.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); + Data.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); + Data.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); + Data.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); + Data.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); + Data.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); + Data.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); + Data.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); } - return Orders; + + return Data; } - public int? OrderID { get; set; } + public int OrderID { get; set; } public string CustomerID { get; set; } - public double? Freight { get; set; } + public double Freight { get; set; } public string ShipCity { get; set; } } - + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrStpWnJrFIGhRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLoCDCeBCPXKind?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing alternate row with Frozen columns +## Customize alternate rows with frozen columns -To customize the alternate row style in the Grid when [Frozen columns](https://blazor.syncfusion.com/documentation/datagrid/frozen-column) are enabled, you can use the following CSS code: +The **.e-altrow .e-rowcell** selector styles cells in alternate rows when [Frozen columns](https://blazor.syncfusion.com/documentation/datagrid/frozen-column) are enabled in the Blazor DataGrid. ```css .e-grid .e-altrow .e-rowcell { background-color: #E8EEFA; } - ``` -In this example, the **.e-altrow .e-rowcell** class targets the cells in alternate rows and applies a custom background color. +Adjust properties like **background-color**,**font-family**, and **border** to maintain consistent styling across frozen and movable sections. -![Grid root element](../images/style-and-appearance/style-frozon.png) +![Alternate row styling with frozen columns](../images/style-and-appearance/style-frozon.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -188,17 +186,15 @@ In this example, the **.e-altrow .e-rowcell** class targets the cells in alterna @code { private SfGrid Grid; - public bool IsEncode { get; set; } = true; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -207,63 +203,54 @@ In this example, the **.e-altrow .e-rowcell** class targets the cells in alterna } {% endhighlight %} - {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); - public OrderData() - { + private static readonly List Data = new(); - } - - public OrderData(int? OrderID, string CustomerId, double? Freight, string ShipCity) + public OrderData(int orderId, string customerId, double freight, string shipCity) { - this.OrderID = OrderID; - this.CustomerID = CustomerId; - this.Freight = Freight; - this.ShipCity= ShipCity; + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipCity = shipCity; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count() == 0) + if (Data.Count == 0) { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET",32.38, "Reims")); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); - Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); - Orders.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); - Orders.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); - Orders.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); - Orders.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); - Orders.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); - code += 5; - } + Data.Add(new OrderData(10248, "VINET", 32.38, "Reims")); + Data.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); + Data.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); + Data.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); + Data.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); + Data.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); + Data.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); + Data.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); + Data.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); } - return Orders; + + return Data; } - public int? OrderID { get; set; } + public int OrderID { get; set; } public string CustomerID { get; set; } - public double? Freight { get; set; } + public double Freight { get; set; } public string ShipCity { get; set; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSNetLzivgmRSN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLysNWSLBgVRXGC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customize the color of Grid lines +## Customize the color of grid lines -The Syncfusion® Blazor DataGrid allows you to personalize the appearance of Grid lines to match your application's design. +The Syncfusion® Blazor DataGrid allows customization of grid lines to match application design requirements. Apply CSS to structural elements such as header cells, row cells, and the grid container to control color, thickness, and border style. -To customize the color of Grid lines, you can apply CSS styles directly to the Grid’s structural elements such as header cells and row cells. This approach gives you full control over the color, thickness, and style of the borders between cells. +The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property defines border visibility and supports options for `Horizontal`, `Vertical`, `Both`, or `None`. ```css /* Customize the color of Grid lines */ @@ -275,90 +262,88 @@ To customize the color of Grid lines, you can apply CSS styles directly to the G ``` -![Grid Line](../images/style-and-appearance/grid-line.png) - -The following example demonstrates how to customize the color of Grid lines while using [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property in Grid: +![Grid lines with custom borders](../images/style-and-appearance/grid-line.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - + + @code { - public List Orders { get; set; } - + private List Orders { get; set; } + protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); - } + } } {% endhighlight %} - {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); - public OrderData() - { + private static readonly List Data = new(); - } - public OrderData(int? OrderID, string CustomerID, double Freight,DateTime? OrderDate) + public OrderData(int orderId, string customerId, double freight, DateTime orderDate) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.OrderDate = OrderDate; + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count() == 0) + if (Data.Count == 0) { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", 32.38,new DateTime(1996,7,4))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6))); - Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7))); - Orders.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 7, 8))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10))); - Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11))); - Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12))); - code += 5; - } + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6))); + Data.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7))); + Data.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 7, 8))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10))); + Data.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11))); + Data.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12))); } - return Orders; + + return Data; } - public int? OrderID { get; set; } + + public int OrderID { get; set; } public string CustomerID { get; set; } - public double? Freight { get; set; } - public DateTime? OrderDate { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVeXGhOqfxsRDrR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXheCtiyVBIDLkTf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/toolbar.md b/blazor/datagrid/style-and-appearance/toolbar.md index 585e86f921..a47a1dfba1 100644 --- a/blazor/datagrid/style-and-appearance/toolbar.md +++ b/blazor/datagrid/style-and-appearance/toolbar.md @@ -1,55 +1,57 @@ --- layout: post -title: Toolbar in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about toolbar in Syncfusion Blazor DataGrid and more. +title: Toolbar styling in Blazor DataGrid using CSS | Syncfusion +description: Learn how to customize the Syncfusion Blazor DataGrid toolbar using CSS, including styling the toolbar container and buttons with CSS isolation tips. platform: Blazor control: DataGrid documentation: ug --- -# Toolbar in Syncfusion® Blazor DataGrid +# Toolbar customization in Syncfusion Blazor DataGrid -You can customize the appearance of the toolbar in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the toolbar root element and toolbar button element. +The appearance of toolbar elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the toolbar interface: -## Customizing the toolbar root element +- **Toolbar root container:** The outer wrapper that contains all toolbar items. +- **Toolbar buttons:** Shows interactive elements used for actions such as Add, Edit, Delete, Update, and Cancel. -To customize the appearance of toolbar root element, you can use the following CSS code: +## Customize the toolbar root element + +The **.e-toolbar-items** class styles the toolbar root container in the Blazor DataGrid. This container holds all toolbar items and can be styled using CSS: ```css .e-grid .e-toolbar-items { background-color: #deecf9; } ``` - -In this example, the **.e-toolbar-items** class targets the background color of the toolbar root element. You can modify the `background-color` property to change the background color of the toolbar. +Properties such as **background-color**, **padding**, **border**, and **box-shadow** can be modified to suit the layout design. ![Grid toolbar root element](../images/style-and-appearance/grid-toolbar-root-element.png) -## Customizing the toolbar button element - -To customize the appearance of toolbar buttons, you can use the following CSS code: +## Customize the toolbar button elements +The **.e-btn** class inside **.e-toolbar** defines the appearance of toolbar buttons in the Blazor DataGrid. Apply CSS to customize their styling: ```css .e-grid .e-toolbar .e-btn { background-color: #deecf9; } ``` - -In this example, the **.e-toolbar .e-btn** selector targets the background color of the toolbar button elements. You can modify the `background-color` property to change the background color of the toolbar buttons. +Properties such as **background-color**, **color**, **border**, **font-size**, and **padding** can be adjusted to align with the design. Ensure that customized colors meet WCAG contrast guidelines and that focus indicators remain visible for keyboard navigation. ![Grid toolbar button element](../images/style-and-appearance/grid-toolbar-button-element.png) - {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + @@ -66,8 +68,7 @@ In this example, the **.e-toolbar .e-btn** selector targets the background color @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -79,40 +80,40 @@ In this example, the **.e-toolbar .e-btn** selector targets the background color {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + internal OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } public static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -124,4 +125,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLIZeXhqQdjJsjY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBysDMtSWwHRQAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/diagram-classic/accessibility.md b/blazor/diagram-classic/accessibility.md deleted file mode 100644 index c0c55ace38..0000000000 --- a/blazor/diagram-classic/accessibility.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -layout: post -title: Accessibility in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Accessibility in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Accessibility in Blazor Diagram Component - -Diagram provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. WAI-ARIA Accessibility supports are achieved through the attributes like `aria-label`. It helps to provides information about elements in a document for assistive technology. - -**Aria-label:** Attribute provides the text label with some default description for below elements in diagram. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ElementDefault description
    ResizeNorthWestThumb to resize the selected object on the top-left corner.
    ResizeNorthEastThumb to resize the selected object on the top-right side direction.
    ResizeSouthWestThumb to resize the selected object on the bottom-left side direction.
    ResizeSouthEastThumb to resize the selected object on the bottom-right side direction.
    ResizeNorthThumb to resize the selected object on the top side direction.
    ResizeSouthThumb to resize the selected object on the bottom side direction.
    ResizeWestThumb to resize the selected object on the left side direction.
    ResizeEastThumb to resize the selected object on the right side direction.
    ConnectorSourceThumbThumb to move the source point of the connector.
    ConnectorTargetThumbThumb to move the target point of the connector.
    RotateThumbThumb to rotate the selected object.
    \ No newline at end of file diff --git a/blazor/diagram-classic/annotations/appearance.md b/blazor/diagram-classic/annotations/appearance.md deleted file mode 100644 index 1b6b5d0309..0000000000 --- a/blazor/diagram-classic/annotations/appearance.md +++ /dev/null @@ -1,669 +0,0 @@ ---- -layout: post -title: Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Appearance in Blazor Diagram Component - -## Customize the size for an annotation - -Diagram allows you to set size for annotations by using the Height and Width properties. The default value of the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Width), and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Height) properties are 0, and it takes the node or connector size as default. - -The following code example shows how the annotation size is customized. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7" }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "Annotation length will be varied", - Width = 50, - Height = 50 - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Connector Size Customization](../images/connector_size_customization.png) - -## Hyperlink - -Diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Hyperlink) to the nodes or connectors annotation. It can also be customized. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the annotation for the Node - Annotations = new ObservableCollection() - { - // Add text as hyperlink. - new DiagramNodeAnnotation() - { - Hyperlink = new NodeHyperlink(){ Link = "https://www.syncfusion.com"} - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -![HyperLink](../images/hyperlink.png) - -### Hyperlink with content - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the annotation for the Node - Annotations = new ObservableCollection() - { - // Add text as hyperlink. - new DiagramNodeAnnotation() - { - Hyperlink = new NodeHyperlink() - { Content = "Syncfusion", Link = "https://www.syncfusion.com" } - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -![HyperLink with content](../images/hyperlink-content.gif) - -## Wrapping - -When text overflows node boundaries, you can control it by using the [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_TextWrapping) which wraps text into multiple lines. The wrapping property of the annotation defines how the text should be wrapped. - -The following code explains how to wrap a text in a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - //Sets the annotation for the node - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation Text Wrapping", - Style = new AnnotationStyle(){ TextWrapping = TextWrap.Wrap} - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -| Value | Description | Image | -| -------- | -------- | -------- | -| No Wrap | Text will not be wrapped. | ![Label No Wrap](../images/Wrap1.png) | -| Wrap | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Label Wrap](../images/Wrap2.png) | -| WrapWithOverflow (Default) | Text-wrapping occurs, when the text overflows beyond the available node width. However, the text may overflow beyond the node width in the case of a very long word. | ![Label WrapWith Overflow](../images/Wrap3.png) | - -### Text overflow - -The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow can have the following values. - -* **Wrap**: Wraps the text to next line, when it exceeds its bounds. -* **Ellipsis**: It truncates the overflown text and render an ellipsis ("...") to represent the clipped text. -* **Clip**: The text is clipped and the overflow text will not be shown. - -The following code sample shows how the different types of overflow property working for the different types of text wrapping. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the style for the text to be displayed - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "The text element with property of overflow as Wrap and wrapping as NoWrap", - Style = new AnnotationStyle() - { - TextOverflow = TextOverflow.Wrap, - TextWrapping=TextWrap.NoWrap - } - }, - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -| TextOverflow | Wrapping | Image | -| -------- | -------- | -------- | -| Wrap | No Wrap | ![Label No Wrap](../images/flowwrap_nowrap.png) | -| Wrap| Wrap | ![Label Wrap](../images/flowwrap_wrap.png) | -| Wrap | WrapWithOverflow | ![Label WrapWith Overflow](../images/flowwrap_wrapwithoverflow.png) | -| Ellipsis | No Wrap | ![Label No Wrap](../images/flowEllipsis_nowrap.png) | -| Ellipsis| Wrap | ![Label Wrap](../images/flowEllipsis_wrap.png) | -| Ellipsis | WrapWithOverflow | ![Label WrapWith Overflow](../images/flowEllipsis_wrapwithoverflow.png) | -| Clip | No Wrap | ![Label No Wrap](../images/flowClip_nowrap.png) | -| Clip| Wrap | ![Label Wrap](../images/flowClip_wrap.png) | -| Clip | WrapWithOverflow | ![Label WrapWith Overflow](../images/flowClip_wrapwithoverflow.png) | - -N> All the customization over the overflow is also applicable to connector’s annotation. - -## Change the appearance of annotation - -You can change the font style of the annotations with the font specific properties (FontSize, FontFamily, Color). The following code explains how to customize the appearance of the annotation. - -* The label’s [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_TextDecoration) properties are used to style the label’s text. - -* The label’s [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_StrokeWidth) properties are used to define the background color and border color of the annotation and the `Opacity` property is used to define the transparency of the annotations. - -* The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Visibility) property of the annotation enables or disables the visibility of annotation. - -The Fill, Border, and Opacity appearances of the text can also be customized with appearance specific properties of annotation. The following code explains how to customize Background, Opacity, and Border of the annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the annotation for the node - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation Text", - Style = new AnnotationStyle() - { - Color="black", - Bold = true, - Italic = true, - TextDecoration=TextDecoration.Underline, - FontSize = 12, - FontFamily = "TimesNewRoman" - } - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Label WrapWith Overflow](../images/Annotation_appearance.png) - -## Update the annotation style at runtime - -You can change the font style of the annotations with the font specific properties (FontSize, FontFamily, and Color). The following code explains how to update the appearance of the annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code -{ - // Reference of the diagram - SfDiagram Diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the annotation for the node - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation Text", - Style = new AnnotationStyle() - { - Color = "black", - Bold = true, - Italic = true, - TextDecoration = TextDecoration.Underline, - FontSize = 12, - FontFamily = "TimesNewRoman" - } - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } - - public void UpdateStyle() - { - // Change the style of the annotation - Diagram.BeginUpdate(); - Diagram.Nodes[0].Annotations[0].Style.Bold = false; - Diagram.Nodes[0].Annotations[0].Style.TextDecoration = TextDecoration.None; - Diagram.Nodes[0].Annotations[0].Style.Color = "Red"; - Diagram.EndUpdate(); - } -} -``` - -## Change the editing mode - -Diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, the annotation is in view mode. But it can be brought to edit mode in two ways. - -* You can edit the annotation programmatically by using the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_StartTextEdit_System_Object_System_String_) method. -* Also, you can edit the annotation interactively. -* By double-clicking the annotation. -* By selecting the item and pressing the F2 key. - -Double-clicking any annotation will enable the editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated. When you double-click the node/connector/diagram model, the [DoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnDoubleClick) event gets triggered. - -## Set annotation to read only - -Diagram allows to create read-only annotations. You have to set the read-only property of annotation to enable or disable the read-only [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Constraints). The following code explains how to enable read-only mode. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - //Sets the constraints as Read only - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation Text", - Constraints = AnnotationConstraints.ReadOnly - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -## Create multiple annotations - -You can add any number of annotations to a node or connector. The following code example shows how to add multiple annotations to a node. Different labels by position is same or different point of the shapes of connector depends upon the offset values specified. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - // Sets the multiple annotation for the node - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Left",Offset = new NodeAnnotationOffset(){ X = .12,Y = .1} - }, - new DiagramNodeAnnotation() - { - Content = "Center",Offset = new NodeAnnotationOffset(){ X = .5,Y = .5} - }, - new DiagramNodeAnnotation() - { - Content = "Right",Offset = new NodeAnnotationOffset(){ X = .82,Y = .9} - } - }, - }; - NodeCollection.Add(node1); - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() { Content = "Offset as 0",Offset=0 }, - new DiagramConnectorAnnotation() { Content = "Offset as 0.5",Offset=0.5 }, - new DiagramConnectorAnnotation() { Content = "Offset as 1",Offset=1 }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Multiple Annotations](../images/Annotations.png) - -N>* Type of the annotation’s property of the node or connector was ObservableCollection. -
    * Default value of the annotation will be null. -
    * All the same customization can be applicable for the annotations. -
    * Text Editing can be stated only the first annotation of the annotation collection when you double click the node or connector. - -## Constraints - -[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationConstraints.html) are used to enable or disable certain behaviors of the annotation. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled with bitwise operators. - -AnnotationConstraints may have multiple behaviors as follows: - -| Constraints | Usages | -|---|---| -| ReadOnly | Enables or disables whether the annotation to be read only or not. | -| Select | Enables or disables whether the annotation to be selectable. | -| Drag | Enables or disables whether the annotation to be dragged. | -| Resize | Enables or disables an Annotation to be Resized. | -| Rotate | Enables or disables whether the annotation to be Rotated. | -| Interaction | Enables or disables select, drag, resize and rotate behaviors. | -| None | Disables all behaviors of Annotation. | - -N>The default value is AnnotationConstraints.InheritReadOnly for constraints property of the annotation. - -Refer to [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationConstraints.html) to learn about how to enable or disable the annotation constraints. - -## Annotation template - -Diagram provides the template support for annotation. You should define an SVG/HTML content to the diagram’s `AnnotationTemplate` property. - -The following code explains how to define a template in node’s annotation. similarly, you can define it in connectors. - -```cshtml - - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - @{ - - - - - - - - - - - -
    IDLabel1
    Width - -
    - } -     -     -     - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - public Type model = typeof(Node); - - public class Node - { - public string Id { get; set; } - public double Width { get; set; } - } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - ConnectorCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label1", AnnotationType=AnnotationType.Template } - }; - NodeCollection.Add(node); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 220, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 310, Y = 150 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Id="label2", - AnnotationType=AnnotationType.Template - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Annotation Template](../images/Annotation_Template.png) - -N>* You need to specify the width value by default, if the annotation has template. -
    * The AnnotationTemplate property accepts the template string. - -## See also - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to interact the annotation at runtime](./interaction) - -* [How to add annotation for Node](./node-annotation) - -* [How to add annotation for Connector](./connector-annotation) diff --git a/blazor/diagram-classic/annotations/connector-annotation.md b/blazor/diagram-classic/annotations/connector-annotation.md deleted file mode 100644 index b170c6c765..0000000000 --- a/blazor/diagram-classic/annotations/connector-annotation.md +++ /dev/null @@ -1,234 +0,0 @@ ---- -layout: post -title: Annotation for connector in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Annotation for connector in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Annotation for Connector in Blazor Diagram Component - -Annotations of a connector can be positioned using the following properties of AnnotationEditorViewModel class. - -* Offset -* Alignment -* Displacement -* SegmentAngle - -## Offset - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Offset) property of annotation is used to align the annotations based on fractions. 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width/Height. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() { Content = "Offset as 0",Offset=0 }, - new DiagramConnectorAnnotation() { Content = "Offset as 0.5",Offset=0.5 }, - new DiagramConnectorAnnotation() { Content = "Offset as 1",Offset=1 }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following image shows the relationship between the annotation position and offset (fraction values). - -![Annotation](../images/ConnectorAnnotation_Offset.png) - -N> By default, offset value of the connector annotation is 0.5. - -## Alignment - -The connector’s annotation can be aligned over its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Alignment) property of annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "Before", - Alignment=AnnotationAlignment.Before - }, - new DiagramConnectorAnnotation() - { - Content = "After", - Alignment=AnnotationAlignment.After - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following screenshot shows how the annotation of the connector aligned over its path. - -![Annotation](../images/ConnectorAnnotation_Alignment.png) - -N> By default, Alignment value of the connector annotation is `Center`. - -## Displacement - -The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in center of the connector path. When you assign value to the Displacement property, annotation will be displaced from its position by displacement value. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "After", - Displacement=new ConnectorDisplacementPoint(){X=50,Y=50}, - Alignment=AnnotationAlignment.After - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following sample shows how the annotation of the displacement happens from its path. - -| Property| Value | Output | -|---|---|---| -| Displacement | (50,50) | ![Source](../images/DispalcementAfter50.png) | -| | (20,20) | ![Center](../images/DispalcementAfter20.png) | -| | (0,0) | ![Target](../images/DispalcementAfter0.png) | - -N> By default, Offset value of the connector annotation is { 0.5, 0.5}. - -## Segment angle - -The [SegmentAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_SegmentAngle) property is used to rotate the annotation based on the connectors segment direction. By default, annotation will be in rotated in the connector path. When you assign value to the SegmentPath property, annotation will be rotated from its position based on the annotation direction. - -The following code example shows how the connector annotation rotated in its path direction. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "Annotation", - SegmentAngle=true, - Offset=0.7 - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -| Segment Angle | Output | -|---|---| -| True | ![Source](../images/SegmentAngle_True.png) | -| False | ![Center](../images/SegmentAngle_False.png) | - -N> By default, the SegmentAngle will be disabled. - -## See also - -* [How to add annotation for Node](./node-annotation) - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to interact the annotation at runtime](./interaction) diff --git a/blazor/diagram-classic/annotations/events.md b/blazor/diagram-classic/annotations/events.md deleted file mode 100644 index 6db3a18b66..0000000000 --- a/blazor/diagram-classic/annotations/events.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -layout: post -title: Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in the Blazor Diagram component of Syncfusion and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Events in Blazor Diagram Component - -## Text edit - -The TextEdit event will notify the annotation content changes after editing. The [IBlazorTextEditEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorTextEditEventArgs.html) interface is used to get event arguments. - -The following code example shows how to register and get the notification from the TextEdit event. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - - //Triggered this event when complete the editing for Annotation and update the old text and new text values. - private void TextEdited(IBlazorTextEditEventArgs args) - { - Console.WriteLine("Oldvalue", args.OldValue); - Console.WriteLine("NewValue", args.NewValue); - } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Content = "Annotation" } - }; - NodeCollection.Add(node); - } -} -``` - -## Double click - -The DoubleClick event will notify the annotation start editing. The [IDoubleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDoubleClickEventArgs.html) interface is used to get the position actually clicked and clicked object. - -The following code example shows how to register and get the notification from the [OnDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDoubleClickEventArgs.html) event. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection - { get; set; } - - //Triggered this event when double click on the Annotation and update the position and source for clicked item. - private void OnDoubleClick(IBlazorDoubleClickEventArgs args) - { - Console.WriteLine("Position", args.Position); - Console.WriteLine("Source", args.Source); - } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Content = "Annotation" } - }; - NodeCollection.Add(node); - } -} -``` - -## Key down - -The keydown event occurs when a keyboard key is pressed down and updated the respective keyboard key pressed. - -## Key up - -The keyup event occurs when a keyboard key is released and updated the respective keyboard key pressed. - -The following code example shows how to register and get the notification from the onkeydown and onkeyup events. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection - { get; set; } - - //Occurs when click the annotation and enter the character in key down state - private void OnKeyDown(IKeyEventArgs args) - { - - } - - //Occurs when click the annotation and enter the character in key release state - private void OnKeyUp(IKeyEventArgs args) - { - - } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Content = "Annotation" } - }; - NodeCollection.Add(node); - } -} -``` - -## See also - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to interact the annotation at runtime](./interaction) - -* [How to add annotation for Node](./node-annotation) - -* [How to add annotation for Connector](./connector-annotation) diff --git a/blazor/diagram-classic/annotations/interaction.md b/blazor/diagram-classic/annotations/interaction.md deleted file mode 100644 index 032a7551d8..0000000000 --- a/blazor/diagram-classic/annotations/interaction.md +++ /dev/null @@ -1,284 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -Basic interactions of selecting and resizing can be applied over an annotation. These interactions can be controlled by annotation and its parent node or connector. To learn about annotation constraints, refer to the [Annotation Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Constraints). - -## Selecting the annotation - -Selection of annotation can be enabled by using the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Constraints) property of `Annotation` and setting its value to `AnnotationConstraints.Select`. - -The following code snippet explains how the select constraints are enabled for annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - Height=30, - Width=70, - Constraints=AnnotationConstraints.Select - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Annotation Selection](../images/Annotation_Selection.png) - -## Dragging the annotation - -The dragging process can be applied over an annotation and dragging can be controlled by the annotation and its parent node or connector. Dragging of annotation can be enabled by using the Constraints property of annotation and setting its value to `AnnotationConstraints.Drag`. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - Height=30, - Width=70, - Constraints=AnnotationConstraints.Select|AnnotationConstraints.Drag - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Annotation Drag](../images/Annotation_Drag.gif) - -## Resizing the annotation - -Resizing of the annotation can be enabled by using the Constraints property of `Annotation` and setting its value to `AnnotationConstraints.Resize`. The following code snippet explains how the Resize constraints are enabled for annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - Height=30, - Width=70, - Constraints=AnnotationConstraints.Select|AnnotationConstraints.Resize - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Annotation Selection](../images/Annotation_Resize.gif) - -## Rotate the annotation - -Resizing of the annotation can be enabled by using the Constraints property of `Annotation` and setting its value to `AnnotationConstraints.Resize`. The following code snippet explains how the Resize constraints are enabled for annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - Height=30, - Width=70, - Constraints=AnnotationConstraints.Select|AnnotationConstraints.Rotate - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Annotation Rotate](../images/Annotation_Rotate.gif) - -### How to restrict the dragging area - -The diagram control now supports defining the [DragLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) to the label when dragging from the connector and also update the position to the nearest segment offset. You can set the value to dragLimit left, right, top, and bottom properties that allows dragging of connector labels to a certain limit based on the user defined values. - -The following code explains how to set a dragLimit for connector annotations. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "Annotation", - Constraints=AnnotationConstraints.Select|AnnotationConstraints.Drag, - DragLimit=new ConnectorAnnotationDragLimit(){ Left=10,Top=10,Right=10,Bottom=10} - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Annotation DragLimit](../images/Annotation_DragLimit.gif) - -N>* By default, the drag limit will be disabled for the connector. It can be enabled by setting connector constraints to drag. -
    * The drag limit is applicable only for the connector. - -## See also - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to add annotation for Node](./node-annotation) - -* [How to add annotation for Connector](./connector-annotation) diff --git a/blazor/diagram-classic/annotations/labels.md b/blazor/diagram-classic/annotations/labels.md deleted file mode 100644 index 80162760cb..0000000000 --- a/blazor/diagram-classic/annotations/labels.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -layout: post -title: Actions of annotation in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Actions of annotation in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Actions of annotation in Blazor Diagram Component - -The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.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. - - - -## Create annotations - -An annotation can be added to a node or connector by defining the annotation object and adding that to the annotation collection of the node or connector. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Content) property of annotation defines the text to be displayed. The following code explains how to create an annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - // A annotation is created and stored in Annotations collection of Node. - new DiagramNodeAnnotation() { Content = "Node" } - } - }; - NodeCollection.Add(node); - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - //A annotation is created and stored in Annotations collection of Connector. - new DiagramConnectorAnnotation() { Content = "Connector" } - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Annotation](../images/Annotation.png) - - -N>* [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_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 center point of its path. - -## Add annotations at runtime - -Annotations can be added at runtime by using the [AddLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddLabels_System_Object_System_Object_) method. The following code explains how to add an annotation to a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - // Reference to diagram - SfDiagram diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node); - } - - //Method to add labels at runtime - public void AddLabel() - { - ObservableCollection annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Annotation" }, - }; - // AddLabels method is used to add annotations at run time - diagram.AddLabels(diagram.Nodes[0], annotations); - } -} -``` - -Also, the annotations can be added at runtime by using the `Add` method. - -```csharp -//Method to add labels at runtime -public void AddLabel() -{ - diagram.Nodes[0].Annotations = new ObservableCollection(); - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() { Content = "Annotation" }; - (diagram.Nodes[0].Annotations as ObservableCollection).Add(annotation); -} -``` - -![Annotation](../images/Annotation_Add.png) - -N> You cannot reset the annotation collection directly to add or update the annotation collection. - -## Remove annotations - -A collection of annotations can be removed from the node by using the [RemoveLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_RemoveLabels_System_Object_System_Object_) method. The following code explains how to remove an annotation to a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label", Content = "Annotation" }, - }; - NodeCollection.Add(node); - } - - //Method to remove labels at runtime - public void RemoveLabel() - { - ObservableCollection annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label", Content = "Annotation" } - }; - // RemoveLabels method is used to remove label at run time. - diagram.RemoveLabels(diagram.Nodes[0], annotations); - } -} -``` - -Also, A collection of annotations can be removed from the node by using the `Remove` and `RemoveAt` method. - -```csharp -//Method to remove labels at runtime using RemoveAt method. -public void RemoveLabel() -{ - (diagram.Nodes[0].Annotations as ObservableCollection).RemoveAt(0); -} - -//Method to remove labels at runtime using Remove method. -public void RemoveLabel() -{ - DiagramNodeAnnotation annotation = diagram.Nodes[0].Annotations[0] as DiagramNodeAnnotation; - (diagram.Nodes[0].Annotations as ObservableCollection).Remove(annotation); -} -``` - -N>* You can delete multiple annotations from node to pass the collection of annotation objects as argument. -
    * Both the AddLabels and RemoveLabels API’s are applicable to nodes and connectors. -
    * The `Add`, `Remove`, and `RemoveAt` methods are applicable for connectors too. - -## Update annotations at runtime - -You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. - -The following code sample shows how the annotation of the node changed at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Node" } - }, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node); - } - - public void UpdateLabel() - { - diagram.Nodes[0].Annotations[0].Content = "Updated Annotation"; - } -} -``` - -## See also - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to interact the annotation at runtime](./interaction) - -* [How to localize the annotation Text](../../common/localization) - -* [Accessibility](../accessibility) diff --git a/blazor/diagram-classic/annotations/node-annotation.md b/blazor/diagram-classic/annotations/node-annotation.md deleted file mode 100644 index d4e5dcc3c2..0000000000 --- a/blazor/diagram-classic/annotations/node-annotation.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -layout: post -title: Annotation for node in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Annotation for node in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Annotation for node in Blazor Diagram Component - -Diagram allows you to customize the position and appearance of the annotation efficiently. Annotation can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [DiagramNodeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html) class. Annotations of a node can be positioned using the following properties of [DiagramNodeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html). - -* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Offset) -* [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_HorizontalAlignment) -* [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_VerticalAlignment) -* [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Margin) - -## Offset - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. - -The following code shows the relationship between the shape annotation position and path annotation offset (fraction values). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Offset(0,0)", - Offset = new NodeAnnotationOffset() { X = 0, Y = 0 } - } - }, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node); - } -} -``` - -| Offset values | Output | -|---|---| -| (0,0) | ![Left](../images/Offset0,0.png) | -| (0,0.5) | ![Left](../images/Offset0,5.png) | -| (0,1) | ![Left](../images/Offset0,1.png) | -| (0.5,0) | ![Left](../images/Offset5,0.png) | -| (0.5,0.5) | ![Left](../images/Offset5,5.png) | -| (0.5,1) | ![Left](../images/Offset5,1.png) | -| (1,0) | ![Left](../images/Offset1,0.png) | -| (1,0.5) | ![Left](../images/Offset1,5.png) | -| (1,1) | ![Left](../images/Offset1,1.png) | - -N>* Type of the offset property for node’s shape annotation is NodeAnnotationOffset. -
    * Type of the offset property for connector’s path annotation is double. - -## Horizontal and vertical alignment - -* The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_HorizontalAlignment) property of annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. -* The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_VerticalAlignment) property is used to set how the annotation is vertically aligned at the annotation position. - -The following table shows all the possible alignments visually with 'offset (0, 0)'. - -| Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | -| -------- | -------- | -------- | -| Left | Top | ![Left Top Label Alignment](../images/Label1.png) | -| Center | Top | ![Center Top Label Alignment](../images/Label2.png) | -| Right | Top | ![Right Top Label Alignment](../images/Label3.png) | -| Left | Center | ![Left Center Label Alignment](../images/Label4.png) | -| Center | Center| ![Center Center Label Alignment](../images/Label5.png) | -| Right | Center | ![Right Center Label Alignment](../images/Label6.png) | -| Left | Bottom | ![Left Bottom Label Alignment](../images/Label7.png) | -| Center | Bottom | ![Center Bottom Label Alignment](../images/Label8.png) | -| Right |Bottom |![Right Bottom Label Alignment](../images/Label9.png) | - -The following code explains how to align annotations. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 250, - OffsetY = 250, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - HorizontalAlignment = HorizontalAlignment.Left, - VerticalAlignment = VerticalAlignment.Center - } - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node1); - } -} -``` - -N>* The value of the `HorizontalAlignment` is `Center` by default. -
    * The value of the `VerticalAlignment` is `Center` by default. -
    * Alignment positioned based on the offset value. - -## Margin - -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Margin) is an absolute value used to add some blank space to any one of its four sides. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the margin for the content - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Task1", - Margin = new NodeAnnotationMargin(){ Top = 10}, - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Top, - Offset = new NodeAnnotationOffset(){ X = .5 ,Y = 1} - } - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node1); - } -} -``` - -## Text align - -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_TextAlign) property of annotation allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the textAlign as left for the content - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Text align is set as Left", - Style = new AnnotationStyle(){ TextAlign = TextAlign.Left} - } - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node1); - } -} -``` - -## See also - -* [How to add annotation for Connector](./connector-annotation) - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to interact the annotation at runtime](./interaction) diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-activity.md b/blazor/diagram-classic/bpmn-shapes/bpmn-activity.md deleted file mode 100644 index 2e78970006..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-activity.md +++ /dev/null @@ -1,734 +0,0 @@ ---- -layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Activity in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Activity in Blazor Diagram Component - -The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. There are two types of activities. They are listed as follows: - -* Task: Occurs within a process and it is not broken down to a finer level of detail. -* Subprocess: Occurs within a process and it is broken down to a finer level of detail. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //sets the type of shape to Bpmn and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets the activity type to task - Activity = new DiagramBpmnActivity() { Activity = BpmnActivities.Task }, - } - }; - NodeCollection.Add(node); - } -} -``` - -## BPMN activity task - -The [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnTask.html) property of the node allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the `Type` property of task is set to **None**. The following code explains how to create different types of BPMN tasks. - -The events property of tasks allows you to represent these results as an event attached to the task. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets the type to bpmn and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets activity to Task - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.Task, - //Sets the type of the task to Send - Task = new DiagramBpmnTask() { Type = BpmnTasks.Send } - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The various types of BPMN tasks are tabulated as follows. - -| Shape | Image | -| -------- | -------- | -| Service | ![Service Task BPMN Shape](../images/Service.png) | -| Send | ![Send Task BPMN Shape](../images/Send.png) | -| Receive | ![Receive Task BPMN Shape](../images/Receive.png) | -| Instantiating Receive | ![Instantiating Receive Task BPMN Shape](../images/InsService.png) | -| Manual |![Manual Task BPMN Shape](../images/Manual.png) | -| Business Rule | ![Business Rule Task BPMN Shape](../images/Bussiness.png) | -| User | ![User Task BPMN Shape](../images/User.png) | -| Script | ![Script Task BPMN Shape](../images/Script.png) | - -## BPMN activity sub process - -A [Sub-process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html) is a group of tasks that is used to hide or reveal details of additional levels using the `Collapsed` property. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn and shape to Activity - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - Activity = new DiagramBpmnActivity() - { - //Sets activity to subprocess - Activity = BpmnActivities.SubProcess, - // Set collapsed of subprocess to true - SubProcess = new DiagramBpmnSubProcess() { Collapsed = true } - }, - } - }; - NodeCollection.Add(node); - } -} -``` - -The different types of subprocess are as follows: -* Event subprocess -* Transaction - -### Event sub process - -A [SubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html) is defined as an event SubProcess when it is triggered by an event. An event SubProcess is placed within another subprocess that part of the normal flow of its parent process is not. You can set event to a subprocess with the `Event` and `Trigger` properties of the subprocess. The `Type` property of subprocess allows you to define the type of subprocess whether it should be event subprocess or transaction subprocess. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - // Position of the node - OffsetX = 100, - OffsetY = 100, - // Size of the node - Width = 100, - Height = 100, - // Unique id of the node - Id = "node1", - // Sets the type to Bpmn and shape to Activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets activity to SubProcess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets the collapsed to true and type to Event - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Type = BpmnSubProcessTypes.Event, - //Sets event to Start and trigger to Message - Events = new ObservableCollection() - { - new DiagramBpmnSubEvent() - { - Event = BpmnEvents.Start, Trigger = BpmnTriggers.Message - } - } - } - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Transaction sub process - -The [Transaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Transaction) is a set of activities that logically belong together that all contained activities must complete their parts of the transaction, otherwise the process is fail. - -The execution result of a transaction is one of -* Successful Completion -* Unsuccessful Completion (Cancel) -* Hazard (Exception) - -The `Events` property of subprocess allows you to represent these results as an event attached to the subprocess. - -* The event object allows you to define the type of event by which the subprocess will be triggered. The name of the event can be defined to identify the event at runtime. - -* The event’s offset property is used to set the fraction or ratio (relative to parent) that defines the position of the event shape. - -* The trigger property defines the type of the event trigger. - -* You can also use define ports and labels to subprocess events by using the event’s ports and labels properties. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - // Position of the node - OffsetX = 100, - OffsetY = 100, - // Size of the node - Width = 100, - Height = 100, - // Unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets the activity to subprocess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets collapsed to true and type to Transaction - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Type = BpmnSubProcessTypes.Transaction, - //Sets offset and visible for cancel and offset for failure - Transaction = new DiagramBpmnTransactionSubProcess() - { - Cancel = new CancelSubEvent() - { - Visible = true, - Offset = new BpmnSubEventOffset() { X = 0.25, Y = 1 } - }, - Failure = new FailureSubEvent() - { - Offset = new BpmnSubEventOffset() { X = 0.75, Y = 1 } - } - } - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Process - -[Processes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Processes) is an array collection that defines the children values for BPMN subprocess. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "Start", - Width = 50, - Height = 50, - Margin = new NodeMargin() { Left = 10, Top = 50 }, - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Event, - Event = new DiagramBpmnEvent() { Event = BpmnEvents.Start } - } - }; - DiagramNode node2 = new DiagramNode() - { - Id = "End", - Width = 50, - Height = 50, - Margin = new NodeMargin() { Left = 200, Top = 50 }, - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Event, - Event = new DiagramBpmnEvent() { Event = BpmnEvents.End } - } - }; - DiagramNode node3 = new DiagramNode() - { - Id = "Node1", - Width = 50, - Height = 50, - Margin = new NodeMargin() { Left = 100, Top = 200 }, - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = false - } - } - }, - Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop - }; - DiagramNode node4 = new DiagramNode() - { - Id = "ActivityProcessNode", - Width = 300, - Height = 300, - MaxHeight = 400, - MaxWidth = 400, - MinWidth = 200, - MinHeight = 200, - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = false, - Type = BpmnSubProcessTypes.Event, - Processes = new string[] { "Start", "End", "Node1" } - } - } - }, - Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop - }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(node3); - NodeCollection.Add(node4); - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "Connector1", - SourceID = "Start", - TargetID = "Node1" - }; - DiagramConnector connector2 = new DiagramConnector() - { - Id = "Connector2", - SourceID = "Node1", - TargetID = "End" - }; - ConnectorCollection.Add(connector1); - ConnectorCollection.Add(connector2); - } -} -``` - -### Loop - -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Loop) is a task that is internally being looped. The loop property of task allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Loop) is **None**. - -You can define the loop property in subprocess BPMN shape as shown in the following code. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Set the activity to subprocess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets collapsed to true and loop to standard - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Loop = BpmnLoops.Standard, - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The following table contains various types of BPMN loops. - -| Loops | Task | Subprocess | -| -------- | -------- | --------| -| Standard | ![Standard Task BPMN Shape](../images/Standard1.png) | ![Standard Subprocess BPMN Shape](../images/Standard2.png) | -| SequenceMultiInstance | ![Sequence MultiInstance Task BPMN Shape](../images/Sequence1.png) | ![SequenceMultiInstance Subprocess BPMN Shape](../images/Sequence2.png)| -| ParallelMultiInstance | ![ParallelMultiInstance Task BPMNShape](../images/PMultiInstance1.png) | ![ParallelMultiInstance Subprocess BPMN Shape](../images/PMultiInstance2.png) | - -### Compensation - -[Compensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Compensation) is triggered when the operation is partially failed and enabled it with the compensation property of the task and the subprocess. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Set the activity to task - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.Task, - //set compensation to true - Task = new DiagramBpmnTask() - { - Compensation = true, - }, - } - } - }; - DiagramNode node2 = new DiagramNode() - { - //Position of the node - OffsetX = 300, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node2", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Set the activity to SubProcess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets collapsed and compensation to true - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Compensation = true, - }, - } - } - }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - } -} -``` - -### Call - -A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnTask.html#Syncfusion_Blazor_Diagrams_DiagramBpmnTask_Call) activity is a global subprocess that is reused at various points of the business flow and set it with the call property of the task. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //sets the activity to task - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.Task, - //Sets call to true - Task = new DiagramBpmnTask() - { - Call = true, - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Ad-Hoc - -An ad-hoc subprocess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [Ad-hoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Adhoc) property of subprocess. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets the activity to subprocess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //sets collapsed and ad hoc to true - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Adhoc = true - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Boundary - -Boundary represents the type of task that is being processed. The [Boundary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Boundary) property of subprocess allows you to define the type of boundary. By default, it is set to **Default**. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type to Bpmn and shape to Activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets activity to SubProcess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets collapsed to true and boundary to Call - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Boundary = BpmnBoundary.Call - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The following table contains various types of BPMN boundaries. - -| Boundary | Image | -| -------- | -------- | -| Call | ![Call Boundary BPMN Shape](../images/Call.png) | -| Event | ![Event Boundary BPMN Shape](../images/Eventtask.png) | -| Default | ![Default Boundary BPMN Shape](../images/DefaultBoundary.png) | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-connectors.md b/blazor/diagram-classic/bpmn-shapes/bpmn-connectors.md deleted file mode 100644 index e64e6e5d0e..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-connectors.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Connectors in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Connectors in Blazor Diagram Component - -The `BPMN Connectors` are lines that connect BPMN flow objects. - -They are classified as follows. -* Association -* Sequence -* Message - -## Association - -The [BPMN Association](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BpmnAssociationFlows.html) flow is used to link flow objects with its corresponding text or artifact. An association is represented as a dotted graphical line with an opened arrow. The types of association are as follows: - -* Directional -* BiDirectional -* Default - -The association property allows you to define the type of association. The following code example explains how to create an association. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - //Unique Id of the connector - Id = "connector1", - // Start and end point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 }, - //Sets the type to Bpmn, flow to Association and association to bidirectional - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.Bpmn, - BpmnFlow = BpmnFlows.Association, - Association = BpmnAssociationFlows.BiDirectional - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following table shows the visual representation of association flows. - -| Association | Image | -| -------- | -------- | -| Default | ![Default BPMN FlowShapes](../images/Default1.png) | -| Directional | ![Directional BPMN FlowShapes](../images/Directional1.png) | -| BiDirectional | ![BiDirectional BPMN FlowShapes](../images/BiDirectional.png) | - -N> The default value for the property `Association` is **Default**. - -## Sequence - -A [Sequence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BpmnSequenceFlows.html) flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. The types of sequence are as follows: - -* Normal -* Conditional -* Default - -The sequence property allows you to define the type of sequence. The following code example explains how to create a sequence flow. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - //Unique Id of the connector - Id = "connector1", - // Start and end point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 }, - //Sets type to Bpmn, flow to Sequence, and sequence to Conditional - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.Bpmn, - BpmnFlow = BpmnFlows.Sequence, - Sequence = BpmnSequenceFlows.Conditional - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following table contains various representation of sequence flows. - -| Sequence | Image | -| -------- | -------- | -| Default | ![Default Sequence BPMN Shpae](../images/Default2.png) | -| Conditional | ![Conditional Sequence BPMN Shpae](../images/Conditional.png) | -| Normal | ![Normal Sequence BPMN Shpae](../images/Normal.png) | - -N> The default value for the property `Sequence` is **Normal**. - -## Message - -A [Message](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BpmnMessageFlows.html) flow shows the flow of messages between two participants and is represented by dashed line. The types of message are as follows: - -* InitiatingMessage -* NonInitiatingMessage -* Default - -The message property allows you to define the type of message. The following code example explains how to define a message flow. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - //Unique Id of the connector - Id = "connector1", - // Start and end point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 }, - //Sets type to Bpmn, flow to Message, and message to InitiatingMessage - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.Bpmn, - BpmnFlow = BpmnFlows.Message, - Message = BpmnMessageFlows.InitiatingMessage - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following table contains various representation of message flows. - -| Message | Image | -| -------- | -------- | -| Default | ![Default Message BPMN Shape](../images/Default1.png) | -| InitiatingMessage | ![InitiatingMessage Message BPMN Shape](../images/IMessage.png) | -| NonInitiatingMessage | ![NonInitiatingMessage Message BPMN Shape](../images/NIMessage.png) | - -N> The default value for the property `Message` is **Default**. \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-data-object.md b/blazor/diagram-classic/bpmn-shapes/bpmn-data-object.md deleted file mode 100644 index e4dcf74845..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-data-object.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -layout: post -title: BPMN Data object in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Data object in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Data Object in Blazor Diagram Component - -A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [DataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShape.html#Syncfusion_Blazor_Diagrams_DiagramShape_DataObject), set the shape to **DataObject** and the type property defines whether data is an input or output. You can create multiple instances of data object with the collection property of data. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the Diagram*@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type to Bpmn and shape to DataObject - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.DataObject, - //Sets collection to true when Dataobject is not a Single instance - DataObject = new DiagramBpmnDataObject() - { - Collection = true, - Type = BpmnDataObjects.Input - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The following table contains various representation of the BPMN data object. - -| Boundary | Image | -| -------- | -------- | -| Collection Data Object | ![Collection Data BPMN Shape](../images/Dataobject.png) | -| Data Input | ![Data Input BPMN Shape](../images/DataInput.png) | -| Data Output | ![Data Output BPMN Shape](../images/DataOutput.png) | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-data-source.md b/blazor/diagram-classic/bpmn-shapes/bpmn-data-source.md deleted file mode 100644 index 40d6aa4f68..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-data-source.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: post -title: BPMN Datasource in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Datasource in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Datasource in Blazor Diagram Component - -Datasource is used to store or access data associated with a business process. To create a datasource, set the shape to **DataSource**. The following code example explains how to create a datasource. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type to Bpmn and shape to DataSource - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.DataSource, - } - }; - NodeCollection.Add(node); - } -} -``` - -![BPMN Datasource](../images/bpmn-datasource.png) \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-event.md b/blazor/diagram-classic/bpmn-shapes/bpmn-event.md deleted file mode 100644 index d3a31315ef..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-event.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Event in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Event in Blazor Diagram Component - -An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnEvent.html#Syncfusion_Blazor_Diagrams_DiagramBpmnEvent_Event) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: - -* Start - indicates the beginning of the process and every business process start with an event. -* Intermediate - indicates the middle of the process. -* End - indicates the beginning of the process and every business process end with an event. - -The event property of the node allows you to define the type of the event. The default value of the event is **start**. The following code example explains how to create a BPMN event. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn and shape to Event - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Event, - // Set the event type to End - Event = new DiagramBpmnEvent() { Event = BpmnEvents.End } - } - }; - NodeCollection.Add(node); - } -} -``` - -## BPMN event trigger - -Event triggers are notated as icons inside the circle and they represent the specific details of the process. The Trigger property of the node allows you to set the type of trigger and by default, it is set to None. The following code example explains how to create a BPMN trigger. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn and shape to Event - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Event, - // Set the event type to NonInterruptingIntermediate and set the trigger as message - Event = new DiagramBpmnEvent() - { - Event = BpmnEvents.NonInterruptingIntermediate, - Trigger = BpmnTriggers.Message - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The following table illustrates the type of event triggers. - -| Triggers | Start | Non-Interrupting Start | Intermediate | Non-Interrupting Intermediate | Throwing Intermediate | End | -| -------- | -------- | -------- | -------- | -------- | -------- | -------- | -| None | ![None Trigger Start event BPMN Shape](../images/None1.png) | ![None Trigger Interupting event BPMN Shape](../images/None2.png) | ![None Trigger Intermediate event BPMN Shape](../images/None3.png) | ![None Trigger NonInteruptingIntermediate BPMNShape](../images/None4.png) | | ![None Trigger End event event BPMNShape](../images/None5.png) | -| Message | ![Message Trigger Start Event BPMN Shape](../images/Message1.png) | ![Message Trigger NonInterupting Event BPMN Shape](../images/Message2.png) | ![Message Trigger Intermediate Event BPMN Shape](../images/Message3.png) | ![Message Trigger NonInteruptingIntermediate Event BPMN Shape](../images/Message4.png) |![Message Trigger ThrowingIntermediate Event BPMNShape](../images/Message5.png) | ![Message Trigger End Event BPMN EndShape](../images/Message6.png) | -| Timer | ![Timer Trigger Start Event BPMNShape](../images/Timer1.png) | ![Timer Trigger NonInterupting Event BPMN Shape](../images/Timer2.png) | ![Timer Trigger Intermediate Event BPMN Shape](../images/Timer3.png)|![Timer Trigger NonInteruptingIntermediate Event BPMN Shape](../images/Timer4.png) | | | -| Conditional | ![Conditional Trigger Start BPMN Shape](../images/Conditional1.png) | ![Conditional Trigger NonInterupting BPMN Shape](../images/Conditional2.png) | ![Conditional Trigger Intermediate BPMN Shape](../images/Conditional3.png) |![Conditional Trigger NonInteruptingIntermediateBPMNShape](../images/Conditional4.png) | | | -| Link | | |![Link Trigger Intermediate Event BPMNShape](../images/Link1.png) | | ![Link Trigger ThrowingIntermediate Event BPMN Shape](../images/Link2.png) | | -| Signal | ![Signal Trigger Start Event BPMN Shape](../images/Signal1.png) | ![Signal Trigger NonInterrupting Event BPMN Shape](../images/Signal2.png) | ![Signal Trigger Intermediate Event BPMN Shape](../images/Signal3.png) | ![Signal Trigger NonInterrupting Event BPMN Shape](../images/Signal4.png) | ![SignalThrowing Trigger Intermediate Event BPMN Shape](../images/Signal5.png) | ![Signal Trigger End Event BPMN Shape](../images/Signal6.png) | -| Error | ![Error Trigger Start Event BPMN Shape](../images/Error1.png) | | ![Error Trigger Intermediate Event BPMN Shape](../images/Error2.png) | | | ![Error Trigger End Event BPMN Shape](../images/Error3.png)| -| Escalation | ![Escalation Trigger Start Event BPMN Shape](../images/Esclation1.png) | ![Escalation Trigger Non-Interrupting Event BPMN Shape](../images/Esclation2.png) | ![Escalation Trigger Intermediate Event BPMN Shape](../images/Esclation3.png) | ![Escalation Trigger Non-Interrupting Event BPMN Shape](../images/Esclation4.png)| ![Escalation Trigger Throwing Intermediate Event BPMN Shape](../images/Esclation5.png) | ![Escalation Trigger End Event BPMN Shape](../images/Esclation6.png)| -| Termination | | | | | | ![Termination Trigger End Event BPMN Shape](../images/Termination1.png)| -| Compensation |![Compensation Trigger Start Event BPMN Shape](../images/Compensation1.png) | | ![Compensation Trigger Intermediate Event BPMN Shape](../images/Compensation2.png) | | ![Compensation Trigger Throwing Intermediate Event BPMN Shape](../images/Compensation3.png) |![Compensation Trigger End BPMN Event Shape](../images/Compensation4.png) | -| Cancel | | | ![Cancel Trigger Intermediate Event BPMN Shape](../images/Cancel1.png) | | | ![Cancel Trigger End Event BPMN Shape](../images/Cancel2.png) | -| Multiple | ![Multiple Trigger Start Event BPMN Shape](../images/Multiple1.png) | ![Multiple Trigger Non-Interrupting Event BPMN Shape](../images/Multiple2.png) | ![Multiple Trigger Intermediate BPMN Shape](../images/Multiple3.png) | ![Multiple Trigger Non-Interrupting Event BPMN Shape](../images/Multiple4.png) | ![Multiple Trigger Throwing Intermediate Event BPMN Shape](../images/Multiple5.png) | ![Multiple Trigger End Event BPMN Shape](../images/Multiple6.png) | -| Parallel | ![Parallel Trigger Start Event BPMN Shape](../images/Parallel1.png) | ![Parallel Trigger Non-Interrupting Event BPMN Shape](../images/Parallel2.png) | ![Parallel Trigger Intermediate Event BPMN Shape](../images/Parallel3.png) | ![Parallel Trigger End Event BPMN Shape](../images/Parallel4.png) | | | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-gateway.md b/blazor/diagram-classic/bpmn-shapes/bpmn-gateway.md deleted file mode 100644 index 991a7ccb54..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-gateway.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Gateway in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Gateway in Blazor Diagram Component - -Gateway is used to control the flow of a process and it is represented as a diamond shape. To create a gateway, the shape property of the node should be set to “Gateway” and the [Gateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnGateway.html) property can be set with any of the appropriate gateways. The following code example explains how to create a BPMN Gateway. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn and shape to Gateway - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Gateway, - //Sets type of the gateway to None - Gateway = new DiagramBpmnGateway() - { - Type = BpmnGateways.None - } - } - }; - NodeCollection.Add(node); - } -} -``` - -N> By default, the `Gateway` will be set to **None**. - -There are several types of gateways as follows: - -| Shape | Image | -| -------- | -------- | -| None | ![GateWay BPMN Shape](../images/bpmn-gataway-none.png) | -| Exclusive | ![Exclusive GateWay BPMN Shape](../images/Exclusive.png) | -| Parallel | ![Parallel GateWay BPMN Shape](../images/Parallel.png) | -| Inclusive | ![Inclusive GateWay BPMN Shape](../images/Inclusive.png) | -| Complex | ![Complex GateWay BPMN Shape](../images/Complex.png) | -| EventBased | ![EventBased GateWay BPMNShape](../images/EventBased.png) | -| ExclusiveEventBased | ![Exclusive EventBased GateWay BPMN Shape](../images/EEBased.png) | -| ParallelEventBased | ![Parallel EventBased GateWay BPMN Shape](../images/PEBased.png) | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-group.md b/blazor/diagram-classic/bpmn-shapes/bpmn-group.md deleted file mode 100644 index 06c843cf36..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-group.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: post -title: BPMN Group in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Group in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Group in Blazor Diagram Component - -A group is used to frame a part of the diagram, shows that elements included in it are logically belong together and does not have any other semantics other than organizing elements. To create a group, the shape property of the node should be set to **group**. The following code example explains how to create a BPMN group. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type to Bpmn and shape to Group - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Group, - } - }; - NodeCollection.Add(node); - } -} -``` - -![BPMN Group](../images/bpmn-group.png) \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-shapes.md b/blazor/diagram-classic/bpmn-shapes/bpmn-shapes.md deleted file mode 100644 index 2455097e96..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-shapes.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Shapes in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Shapes in Blazor Diagram Component - -BPMN(Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, in the node property shape, type should be set to “Bpmn” and its shape should be set as any one of the built-in shapes. - -The following code example explains how to create a simple business process. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - // Position of the node - OffsetX = 100, - OffsetY = 100, - // Size of the node - Width = 100, - Height = 100, - // Unique Id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn - Type = Shapes.Bpmn - } - }; - NodeCollection.Add(node); - } -} -``` - -N> The default value for the property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) is “event”. - -The list of BPMN shapes are as follows: - -| Shape | Image | -| -------- | -------- | -| Event | ![Event Shape](../images/Event.png) | -| Gateway | ![Gateway Shape](../images/Gateway.png) | -| Task | ![Task Shape](../images/Task.png) | -| Message | ![Message Shape](../images/Message.png) | -| DataSource | ![Datasource Shape](../images/Datasource.png) | -| DataObject | ![Dataobject Shape](../images/Dataobject.png) | -| Group | ![Group Shape](../images/Group.png) | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram-classic/bpmn-shapes/bpmn-text-annotation.md deleted file mode 100644 index dba3617c8c..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-text-annotation.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Text Annotation in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Text Annotation in Blazor Diagram Component - -* A BPMN object can be associated with a text annotation that does not affect the flow but gives details about objects within a flow. The annotation property of the node is used to connect an annotation element to the BPMN node. - -* The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. - -* The annotation angle property is used to set the angle between the BPMN shape and the annotation. - -* The annotation direction property is used to set the direction of the text annotation. - -* To set the size for text annotation, use width and height properties. - -* The annotation length property is used to set the distance between the BPMN shape and the annotation. - -* The annotation text property defines the additional information about the flow object in a BPMN process. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type as Bpmn and shape as DataObject - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.DataObject, - //Sets collection as true when Dataobject is not a Single instance - DataObject = new DiagramBpmnDataObject() - { - Collection = true, - Type = BpmnDataObjects.Input - } - }, - //Sets the id, angle, and text for the annotation - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id="Left", - RotateAngle=45, - Content="Left" - } - } - }; - NodeCollection.Add(node); - } -} -``` - -![BPMN Text Annotation](../images/bpmn-text-annotation.png) \ No newline at end of file diff --git a/blazor/diagram-classic/commands.md b/blazor/diagram-classic/commands.md deleted file mode 100644 index 8ada66d39c..0000000000 --- a/blazor/diagram-classic/commands.md +++ /dev/null @@ -1,678 +0,0 @@ ---- -layout: post -title: Commands in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Commands in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Commands in Blazor Diagram Component - - - -There are several commands available in the diagram as follows. - -* Alignment commands -* Distribute commands -* Sizing commands -* Clipboard commands -* Grouping commands -* Z-order commands -* Zoom commands -* Nudge commands -* FitToPage commands -* Undo/Redo commands - -## Alignment commands - -Alignment commands enable you to align the selected or defined objects such as nodes and connectors with respect to the selection boundary. Refer to `Align` commands which shows how to use align methods in the diagram. - - -| Parameters | Description | -|:------------| :------ | -|[Alignment Options](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AlignmentOptions.html) | Defines the specific direction, with respect to which the objects to be aligned. The accepted values of the argument "alignment options" are as follows.
    Left - Aligns all the selected objects at the left of the selection boundary.
    Right - Aligns all the selected objects at the right of the selection boundary.
    Center - Aligns all the selected objects at the center of the selection boundary.
    Top - Aligns all the selected objects at the top of the selection boundary.
    Bottom - Aligns all the selected objects at the bottom of the selection boundary.
    Middle - Aligns all the selected objects at the middle of the selection boundary.| -| Objects | Defines the objects to be aligned. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets aligned. | -[Alignment Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AlignmentMode.html) | Defines the specific mode, with respect to which the objects to be aligned. This is an optional parameter. The default alignment mode is `Object`.
    The accepted values of the argument "alignment mode" are as follows.
    Object - Aligns the objects based on the first object in the selected list.
    Selector - Aligns the objects based on the selection boundary. | - - -The following code example illustrates how to align all the selected objects at the left side of the selection boundary. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Align() - { - //Aligns the selected items to left - diagram.Align(AlignmentOptions.Left, null, AlignmentMode.Selector); - } -} -``` - -## Distribute - -The [Distribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Distribute_Syncfusion_Blazor_Diagrams_DistributeOptions_System_Object_) commands enable to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. - -The factor to distribute the shapes `DistributeOptions` are listed as follows: - -* RightToLeft: Distributes the objects based on the distance between the right and left sides of the adjacent objects. -* Left: Distributes the objects based on the distance between the left sides of the adjacent objects. -* Right: Distributes the objects based on the distance between the right sides of the adjacent objects. -* Center: Distributes the objects based on the distance between the center of the adjacent objects. -* BottomToTop: Distributes the objects based on the distance between the bottom and top sides of the adjacent objects. -* Top: Distributes the objects based on the distance between the top sides of the adjacent objects. -* Bottom: Distributes the objects based on the distance between the bottom sides of the adjacent objects. -* Middle: Distributes the objects based on the distance between the vertical center of the adjacent objects. - -The following code example illustrates how to execute the space commands. - -```cshtml - -@using Syncfusion.Blazor.Diagrams - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Distribute() - { - //Distribute the elements in equal spacing - diagram.Distribute(DistributeOptions.RightToLeft); - } -} -``` - -## Sizing Commands - -Sizing [SameSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SameSize_Syncfusion_Blazor_Diagrams_SizingOptions_System_Object_) commands enable to equally size the selected nodes with respect to the first selected object. - -`SizingOptions` are as follows: - -* Width: Scales the width of the selected objects. -* Height: Scales the height of the selected objects. -* Size: Scales the selected objects both vertically and horizontally. - -The following code example illustrates how to execute the size commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void SameSize() - { - //Changing the selected nodes to same size - SizingOptions sizingOptions = SizingOptions.Size; - diagram.SameSize(sizingOptions); - } -} -``` - -## Clipboard - -Clipboard commands are used to cut, copy, or paste the selected elements. Refer to the following link which shows how to use clipboard methods in the diagram. - -* Cuts the selected elements from the diagram to the diagram’s clipboard, [Cut](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Cut). - -* Copies the selected elements from the diagram to the diagram’s clipboard, [Copy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Copy). - -* Pastes the diagram’s clipboard data (nodes/connectors) into the diagram, [Paste](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Paste_System_Object_). - -The following code illustrates how to execute the clipboard commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Cut() - { - //copies the selected nodes - this.diagram.Cut(); - } - - private void Copy() - { - //copies the selected nodes - this.diagram.Copy(); - } - - private void Paste() - { - //pastes the copied objects - this.diagram.Paste(); - } -} -``` - -## Grouping - -**Grouping commands** are used to group/ungroup the selected elements on the diagram. Refer to the following link which shows how to use grouping commands in the diagram. - -[Group](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Group) the selected nodes and connectors in the diagram. - -[Ungroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_UnGroup) the selected nodes and connectors in the diagram. - -The following code illustrates how to execute the grouping commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void SelectAll() - { - //Selects the nodes - this.diagram.SelectAll(); - } - private void Group() - { - //Groups the selected elements. - this.diagram.Group(); - } -} -``` - -## Z-Order command - -**Z-Order commands** enable you to visually arrange the selected objects such as nodes and connectors on the page. - -## BringToFront command - -The [BringToFront](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringToFront) command visually brings the selected element to front over all the other overlapped elements. The following code illustrates how to execute the `BringToFront` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void BringToFront() - { - //Brings to front the selected node. - this.diagram.BringToFront(); - } -} -``` - -## SendToBack command - -The [SendToBack](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SendToBack) command visually moves the selected element behind all the other overlapped elements. The following code illustrates how to execute the `SendToBack` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void SendToBack() - { - //Sends to front the selected node. - this.diagram.SendToBack(); - } -} -``` - -## MoveForward command - -The [MoveForward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_MoveForward) command visually moves the selected element over the nearest overlapping element. The following code illustrates how to execute the `MoveForward` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void MoveForward() - { - //move to Forward the selected node. - this.diagram.MoveForward(); - } -} -``` - -## SendBackward command - -The [SendBackward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SendBackward) command visually moves the selected element behind the underlying element. The following code illustrates how to execute the `SendBackward` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void SendBackward() - { - //send to Forward the selected node. - this.diagram.SendBackward(); - } -} -``` - -## Zoom - -The [Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Zoom_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) command is used to zoom-in and zoom-out the diagram view. - -The following code illustrates how to zoom-in/zoom out the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Zoom() - { - // Sets the ZoomFactor - //Defines the FocusPoint to zoom the Diagram with respect to any point - //When you do not set focus point, zooming is performed with reference to the center of current Diagram view. - this.diagram.Zoom(1.2, new PointModel() { X = 100, Y = 100 }); - } -} -``` - -## Nudge command - -The [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Nudge_Syncfusion_Blazor_Diagrams_NudgeDirection_System_Nullable_System_Double__System_Nullable_System_Double__) commands move the selected elements towards up, down, left, or right by 1 pixel. - -`NudgeDirection` nudge command moves the selected elements towards the specified direction by 1 pixel, by default. - -The accepted values of the argument "direction" are as follows: - -* Up: Moves the selected elements towards up by the specified delta value. -* Down: Moves the selected elements towards down by the specified delta value. -* Left: Moves the selected elements towards left by the specified delta value. -* Right: Moves the selected elements towards right by the specified delta value. - -The following code illustrates how to execute nudge command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void NudgeRight() - { - //Nudges to right - this.diagram.Nudge(NudgeDirection.Right); - } -} -``` - -## Nudge by using arrow keys - -The corresponding arrow keys are used to move the selected elements towards up, down, left, or right direction by 1 pixel. - -![Nudge Command](images/Commands_img4.png) - -Nudge commands are particularly useful for accurate placement of elements. - -## BringIntoView - -The [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringIntoView_System_Object_) command brings the specified rectangular region into the viewport of the diagram. - -The following code illustrates how to execute the `BringIntoView` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void BringIntoView() - { - var bound = new System.Drawing.Rectangle(600, 600, 500, 400); - //Brings the specified rectangular region of the Diagram content to the viewport of the page. - this.diagram.BringIntoView(bound); - } -} -``` - -## BringToCenter - -The [BringToCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringToCenter_System_Object_) command brings the specified rectangular region of the diagram content to the center of the viewport. - -The following code illustrates how to execute the `BringToCenter` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void BringToCenter() - { - var bound = new System.Drawing.Rectangle(600, 600, 500, 400); - //Brings the specified rectangular region of the Diagram content to the viewport of the page. - this.diagram.BringToCenter(bound); - } -} -``` - -## FitToPage command - -The [FitToPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_FitToPage_Syncfusion_Blazor_Diagrams_IFitOptions_) command helps to fit the diagram content into the view with respect to either width, height, or at the whole. - -The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_Mode) parameter defines whether the diagram must be horizontally/vertically fit into the viewport with respect to width, height, or entire bounds of the diagram. - -The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_Region) parameter defines the region that must be drawn as an image. - -The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_Margin) parameter defines the region/bounds of the diagram content that is to be fit into the view. - -The [CanZoomIn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_CanZoomIn) parameter enables/disables zooming to fit the smaller content into a larger viewport. - -The [CustomBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_CustomBounds) parameter the custom region that must be fit into the viewport. - -The following code illustrates how to execute `FitToPage` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void FitToPage() - { - //fit the diagram to the page - diagram.FitToPage(); - } -} -``` - -## Undo and Redo command - -The [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Undo) and [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Redo) commands help you to revert/restore the changes. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Undo() - { - //Revert the changes - diagram.Undo(); - } - - private void Redo() - { - //Restore the changes - diagram.Redo(); - } -} -``` - -## Command manager - -Diagram provides support to map or bind command execution with desired combination of key gestures. Diagram provides some built-in commands. -The [CommandManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommandManager.html) provides support to define custom commands. The custom commands are executed when the specified key gesture is recognized. - -### Command Execution Event - -You can use the [OnCommandExecuted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnCommandExecuted) event to trigger when execute the custom command in diagram. - -### Custom command - -To define a custom command, specify the following properties: -* [Gesture](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommand.html#Syncfusion_Blazor_Diagrams_DiagramCommand_Gesture): A combination of [Keys](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramKeyGesture.html#Syncfusion_Blazor_Diagrams_DiagramKeyGesture_Key) and [KeyModifiers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramKeyGesture.html#Syncfusion_Blazor_Diagrams_DiagramKeyGesture_KeyModifiers). -* [Parameter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommand.html#Syncfusion_Blazor_Diagrams_DiagramCommand_Parameter): Defines any additional parameters that are required at runtime. -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommand.html#Syncfusion_Blazor_Diagrams_DiagramCommand_Name): Defines the name of the command. - -To explore the properties of custom commands, refer to the [Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommandManager.html). - -The following code example shows how to define a custom command. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @* Initializing the custom commands *@ - - - - - - - - - - - @* To define the custom commands execution event *@ - - - -@code { - // Reference to diagram - SfDiagram Diagram; - - // Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - //Initializing the nodes collection - NodeCollection = new ObservableCollection(); - - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Node" } - } - }; - - NodeCollection.Add(diagramNode); - - DiagramNode diagramNode1 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Node" } - } - }; - NodeCollection.Add(diagramNode1); - } - - /// - /// Custom command execution event - /// - public void CommandExecute(ICommandExecuteEventArgs args) - { - if (args.Gesture.KeyModifiers == KeyModifiers.Control && args.Gesture.Key == Keys.G) - { - //Custom command to group the selected nodes - Diagram.Group(); - } - if (args.Gesture.KeyModifiers == KeyModifiers.Control && args.Gesture.Key == Keys.U) - { - //Custom command to ungroup the selected items - if (Diagram.SelectedItems.Nodes.Count > 0 && Diagram.SelectedItems.Nodes[0].Children != null && - Diagram.SelectedItems.Nodes[0].Children.Length > 0) - { - Diagram.UnGroup(); - } - } - } -} -``` - -### Modify the existing command - -When any one of the default commands is not desired, they can be disabled. To change the functionality of a specific command, the command can be completely modified. - -The following code example shows how to disable a command and how to modify the built-in commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @* Initializing the custom commands *@ - - - - - - - - - - - - - - - - - @* To define the custom commands execution event *@ - - - -@code { - // Reference to diagram - SfDiagram Diagram; - - // Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - //Initializing the nodes collection - NodeCollection = new ObservableCollection(); - - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Node" } - } - }; - NodeCollection.Add(diagramNode); - } - - /// - /// Custom command execute event - /// - public void CommandExecute(ICommandExecuteEventArgs args) - { - if (args.Gesture.Key == Keys.Left) - { - //Allow left arrow key to nudge the selected node in left - if (Diagram.SelectedItems.Nodes.Count > 0) - Diagram.Nudge(NudgeDirection.Left); - } - if (args.Gesture.Key == Keys.Down || args.Gesture.Key == Keys.Up || - args.Gesture.Key == Keys.Right) - { - //to disable a built-in command and none of action execute - } - } -} -``` - -## See Also - -* [How to create the custom context menu items](./context-menu) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/connectors.md b/blazor/diagram-classic/connectors/connectors.md deleted file mode 100644 index d54088f0f3..0000000000 --- a/blazor/diagram-classic/connectors/connectors.md +++ /dev/null @@ -1,685 +0,0 @@ ---- -layout: post -title: Actions of connectors in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Actions of connectors in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Actions of Connectors in Blazor Diagram Component - -Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them. - -## Create connector - -Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html), refer to [Connector Properties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html). - -## Add connectors through connectors collection - -The [SourcePoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourcePoint) and [TargetPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetPoint) properties of connector allow you to define the end points of a connector. - -The following code example illustrates how to add a connector through connector collection, - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - // Type of the connector segemnts - Type = Segments.Straight, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector default](../images/connector-default.png) - -## Add connectors at runtime - -You can add a connector at runtime by using the server-side method `AddConnector` in the Diagram component. The following code explains how to add connectors at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public void AddConnector() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Add the connector at the run time. - Diagram.AddConnector(diagramConnector); - } -} - -``` - -Also, the connector can be added at runtime by using the `Add` method. - -```csharp -// Add connector at runtime -public void AddConnector() -{ - DiagramConnector Connector2 = new DiagramConnector() - { - Id = "Connector2", - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 }, - }; - ConnectorCollection.Add(Connector2); -} -``` - -## Connectors from the palette - -Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram when required. - -For more information about adding connectors from symbol palette, refer to the [Symbol Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the symbol palette *@ -
    - - -
    - - - - -@code{ - SfDiagram diagram; - SfSymbolPalette SymbolPalette; - public ObservableCollection Connectors { get; set; } - public ObservableCollection Palettes; - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - //Initializes connector symbols for the symbol palette - Connectors = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Link1", - // Sets the preview size - PreviewSize = new SymbolSizeModel() { Width = 100, Height = 100 }, - // Type of the connector segemnts - Type = Segments.Straight, - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 60, Y = 60 } - }, - new DiagramConnector() - { - Id = "Link2", - // Sets the preview size - PreviewSize = new SymbolSizeModel() { Width = 100, Height = 100 }, - // Type of the connector segemnts - Type = Segments.Orthogonal, - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 60, Y = 60 }, - Style = new ConnectorShapeStyle() { StrokeWidth = 1 }, - // Sets the shape for target decorator - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.OpenArrow } - }, - new DiagramConnector() - { - Id = "Link3", - // Sets the preview size - PreviewSize = new SymbolSizeModel() { Width = 100, Height = 100 }, - // Type of the connector segemnts - Type = Segments.Bezier, - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 60, Y = 60 }, - // Sets the shape for target decorator - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None } - } - }; - Palettes.Add(new SymbolPalettePalette() { Id = "Connectors", Expanded = true, Symbols = Connectors, Title = "Connectors" }); - } -} -``` - -![Connector From Palette](../images/connector-palette.gif) - -## Draw connectors using drawing object - -Connectors can be interactively drawn by clicking and dragging on the diagram surface by using [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DrawingObject). - -For more information about drawing connectors, refer to [Draw Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTools.html). - -![Drawing Connector](../images/connectorDrawing.gif) - -## Remove connectors at runtime - -A connector can be removed from the diagram at runtime by using the [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Remove_System_Object_) method. - -The following code shows how to remove a connector at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // Reference of the diagram - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - // Style of the connector segment - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - // Type of the connector - Type = Segments.Straight, - }; - //Add the connector at the run time. - ConnectorCollection.Add(diagramConnector); - } - - // Remove Node at runtime - public void RemoveConnector() - { - Diagram.Remove(ConnectorCollection[0]); - } -} -``` - -A connector can be removed from the diagram by using the native `RemoveAt` method. Refer to the following example that shows how to remove the connector at runtime. - -```csharp - -public void RemoveConnector() -{ - ConnectorCollection.RemoveAt(0); -} - -``` - -## Update connectors at runtime - -You can change any connector's properties at runtime. - -The following code example explains how to change the connector properties. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } - - public void AddConnector() - { - Diagram.BeginUpdate(); - Diagram.Connectors[0].SourcePoint.X = 50; - Diagram.Connectors[0].SourcePoint.Y = 50; - Diagram.EndUpdate(); - } -} -``` - -## Connections - -The connectors are used to create a link between two points, nodes or ports to represent the relationships between them. - -### Connections with nodes - -The [SourceID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourceID) and [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetID) properties allow to define the nodes to be connected. - -The following code example illustrates how to connect two nodes. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Creates source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create a target node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - - //create the connector with source node and target node id. - DiagramConnector diagramConnector = new DiagramConnector() - { - //Source node id of the connector. - SourceID = "node1", - //Target node id of the connector. - TargetID = "node2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Adding conector into connector's collection - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Node to Node Connection](../images/NodeToNodeConnection.png) - -When you remove [NodeConstraints.InConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html) from Default, the node accepts only an outgoing connection to dock in it. Similarly, when you remove [NodeConstraints.OutConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html) from Default, the node accepts only an incoming connection to dock in it. - -When you remove both InConnect and OutConnect [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html) from `Default`, the node restricts connector to establish connection in it. The following code illustrates how to disable InConnect constraints. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - //Creates source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - //To disbale the inconnect constraints to node. - node1.Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect; - } -} -``` - -### Connections with ports - -The [SourcePortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourcePortID) and [TargetPortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetPortID) properties allow to create connections between some specific points of source/target nodes. - -The following code example illustrates how to create port to port connections. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - public SfDiagram diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Create a source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - //Create the port for source node - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 1, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }, - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - //Create a target node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - //Create the port for target node. - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port2", - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 0, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }, - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - //create the connector from port to port - DiagramConnector diagramConnector = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - //source node port id. - SourcePortID = "port1", - //Target node port id. - TargetPortID = "port2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Port to Port Connection](../images/PortToPortConnection.png) - -When you set [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html) to `InConnect`, the port accepts only an incoming connection to dock in it. Similarly, when you set [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html) to `OutConnect`, the port accepts only an outgoing connection to dock in it. When you set [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html) to `None`, the port restricts connector to establish connection in it. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection - NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - //Creates source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - //To disbale the inconnect constraints to node. - node1.Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect; - DiagramPort Port = new DiagramPort() - { - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 0, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }; - //Port constraints to allow in connectors. - Port.Constraints = PortConstraints.InConnect; - NodeCollection[0].Ports.Add(Port); - } -} -``` - -## See also - -* [How to customize the connector properties](./customization) - -* [How to interact the connector](./interactions) - -* [How to change the segments](./segments) - -* [How to get the connector events](./events) - -* [How to add annotations to the connectors](../annotations/labels) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/customization.md b/blazor/diagram-classic/connectors/customization.md deleted file mode 100644 index 003616f831..0000000000 --- a/blazor/diagram-classic/connectors/customization.md +++ /dev/null @@ -1,666 +0,0 @@ ---- -layout: post -title: Customization in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Customization in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Customization in Blazor Diagram Component - -## Decorator - -Diagram allows you to customize the connector appearances. The following topics shows how to customize several properties of the connectors. - -* Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the [SourceDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourceDecorator) and [TargetDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetDecorator) properties of the connector. - -* The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Shape) property of `SourceDecorator` allows to define the shape of the decorators. Similarly, the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Shape) property of `TargetDecorator` allows to define the shape of the decorators. - -* To create custom shape for source decorator, use [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_PathData) property. Similarly, to create custom shape for target decorator, use [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_PathData) property. - -* The following code example illustrates how to create decorators of various shapes. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 100 }, - SourceDecorator = new ConnectorSourceDecorator() - { - Shape = DecoratorShapes.Circle, - Style = new DecoratorShapeStyle() - { - StrokeColor = "#37909A", - Fill = "#37909A", - StrokeWidth = 1 - }, - }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Custom, - Style = new DecoratorShapeStyle() - { - StrokeColor = "#37909A", - Fill = "#37909A", - StrokeWidth = 1 - }, - PathData = "M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5 C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z" - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## Padding - -Padding is used to leave the space between the Connector's end point and the object to where it is connected. - -* The [SourcePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourcePadding) property of connector defines space between the source point and the source node of the connector. - -* The [TargetPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetPadding) property of connector defines space between the end point and the target node of the connector. - -* The following code example illustrates how to leave space between the connection end points and source, target nodes. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - //Create a node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create a node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - - DiagramConnector diagramConnector = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - //Specifies the source and target padding values. - SourcePadding = 20, - TargetPadding = 20, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Padding](../images/ConnectorPadding.png) - -## Flip - -The diagram provides support to flip the connector. The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Flip) is performed to give the mirrored image of the original element. - -* The Flip is also applicable for nodes. - -N> The flip is not applicable when the connectors connect in nodes - -The flip types are as follows: - -* `HorizontalFlip` is used to interchange the connector source and target x points. - -* `VerticalFlip` is used to interchange the connector source and target y points. - -* `Both` is used to interchange the source point as target point and target point as source point - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //Specify the flip direction - Flip = FlipDirection.Both, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Flip](../images/connector-flip.png) - -## Bridging - -Line bridging creates a bridge for lines to smartly cross over the other lines at points of intersection. By default, [BridgeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BridgeDirection) is set to `Top`. Depending on the given direction, the bridging direction appears. Bridging can be enabled/disabled either with the `Connector.Constraints` or `Diagram.Constraints`. - -The following code example illustrates how to enable line bridging. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - //Enable the bridging constraint for diagram. - public DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; - - protected override void OnInitialized() - { - DiagramConnector diagramConnector1 = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - - ConnectorCollection.Add(diagramConnector1); - - DiagramConnector diagramConnector2 = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "#6BA5D7", - Fill = "#6BA5D7", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector2); - } -} -``` - -The [BridgeSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_BridgeSpace) property of connectors can be used to define the width for line bridging. - -Limitation: `Bezier` segments do not support bridging. - -![Connector Corner Radius](../images/Bridging.png) - -## Corner radius - -Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_CornerRadius) property. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //specify the corner radius value. - CornerRadius = 10, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Corner Radius](../images/CornerRadious.png) - -## Appearance - -* The connector’s [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorShapeStyle.html#Syncfusion_Blazor_Diagrams_ConnectorShapeStyle_StrokeWidth), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorShapeStyle.html#Syncfusion_Blazor_Diagrams_ConnectorShapeStyle_StrokeColor), [StrokeDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorShapeStyle.html#Syncfusion_Blazor_Diagrams_ConnectorShapeStyle_StrokeDashArray), and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorShapeStyle.html#Syncfusion_Blazor_Diagrams_ConnectorShapeStyle_Opacity) properties are used to customize the appearance of the connector segments. - -* The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Visible) property of the connector enables or disables the visibility of connector. - -* Default values for all the `Connectors` can be set using the [ConnectorDefaults](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ConnectorDefaults) properties. For example, if all connectors have the same type or having the same property then such properties can be moved into `ConnectorDefaults`. - -### Segment appearance - -The following code example illustrates how to customize the segment appearance. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - //To customize appearance of the connector segments - Style = new ConnectorShapeStyle() - { - StrokeColor = "red", - StrokeWidth = 2, - StrokeDashArray = "2,2" - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -### Decorator appearance - -* The source decorator’s [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DecoratorShapeStyle.html#Syncfusion_Blazor_Diagrams_DecoratorShapeStyle_StrokeColor), [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DecoratorShapeStyle.html#Syncfusion_Blazor_Diagrams_DecoratorShapeStyle_StrokeWidth), and [StrokeDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DecoratorShapeStyle.html#Syncfusion_Blazor_Diagrams_DecoratorShapeStyle_StrokeDashArray) properties are used to customize the color, width, and appearance of the decorator. - -* To set the border stroke color, stroke width, and stroke dash array for the target decorator, use `StrokeColor`, `StrokeWidth`, and `StrokeDashArray`. - -* To set the size for source and target decorator, use width and height properties. - -The following code example illustrates how to customize the appearance of the decorator. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - SourceDecorator = new ConnectorSourceDecorator() - { - Shape = DecoratorShapes.Arrow, - Height = 15, - Width = 15, - Style = new DecoratorShapeStyle() - { - StrokeColor = "blue", - Fill = "yellow", - StrokeWidth = 3 - }, - }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Height = 15, - Width = 15, - Style = new DecoratorShapeStyle() - { - StrokeColor = "red", - Fill = "yellow", - StrokeWidth = 3 - }, - }, - Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Decorator Appearance](../images/Decorator.png) - -## Constraints - -* The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Constraints) property of connector allows to enable/disable certain features of connectors. - -* To enable or disable the constraints, refer [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Constraints). - -The following code illustrates how to disable selection. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "black", - StrokeColor = "black", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "black", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - //Disable the select constraint - Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## Custom properties - -* The [AddInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_AddInfo) property of connectors allow you to maintain additional information to the connectors. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "black", - StrokeColor = "black", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "black", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - //Define the add info value. - AddInfo = "Central Connector", - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## Stack order - -The connectors [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_ZIndex) property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order. - -The following code illustrates how to render connector based on the stack order. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector1 = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 100 }, - //Specify the z-index value - ZIndex = 2, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "black", - Fill = "black", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "black", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector1); - - DiagramConnector diagramConnector2 = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //Specify the z-index value - ZIndex = 1, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "black", - Fill = "black", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "black", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector2); - } -} -``` - -## See also - -* [How to interact the connector](./interactions) - -* [How to change the segments](./segments) - -* [How to get the connector events](./events) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/events.md b/blazor/diagram-classic/connectors/events.md deleted file mode 100644 index 8fa923c55c..0000000000 --- a/blazor/diagram-classic/connectors/events.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -layout: post -title: Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Events in Blazor Diagram Component - -## Selection change - -The [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) event will be triggered when you select or unselect the node or connector. The [IBlazorSelectionChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorSelectionChangeEventArgs.html) interface is used to get selection change event arguments. - -The following code example explains how to get the selection change event in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - // SelectionChange event for diagram - public void SelectionChanged(IBlazorSelectionChangeEventArgs args) - { - Console.WriteLine(args.NewValue.Connectors[0].Id); - } -} -``` - -## Position change - -The [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) events will be triggered when dragging the node or connector in interaction. The [IBlazorDraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDraggingEventArgs.html) interface is used to get position change event arguments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - // Position change event for diagram - public void OnPositionChange(IBlazorDraggingEventArgs args) - { - Console.WriteLine(args.NewValue.Connectors[0].Id); - } -} -``` - -## Connection change - -The [OnConnectionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnConnectionChange) event will notify when the connection is changed. The [IBlazorConnectionChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorConnectionChangeEventArgs.html) interface is used to get event arguments. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - //Defines diagram's constraints values. - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - private void OnConnectionChange(IBlazorConnectionChangeEventArgs args) - { - Console.WriteLine("Oldvalue", args.OldValue); - Console.WriteLine("NewValue", args.NewValue); - } - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## See also - -* [How to customize the connector properties](./customization) - -* [How to interact the connector](./interactions) - -* [How to change the segments](./segments) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/interactions.md b/blazor/diagram-classic/connectors/interactions.md deleted file mode 100644 index 3d8f08d675..0000000000 --- a/blazor/diagram-classic/connectors/interactions.md +++ /dev/null @@ -1,343 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -Connectors can be selected, dragged, and routed over the diagram page. - -## Select - -A connector can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Select_System_Object_System_Nullable_System_Boolean__) method and clear the selection in the diagram using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearSelection). The following code explains how to select and clear selection in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - public void OnSelect() - { - // Select the Connector - Diagram.Select(new ObservableCollection() { Diagram.Connectors[0] }, null); - } - public void UnSelect() - { - // clear selection in the diagram - Diagram.ClearSelection(); - } -} -``` - -And also the selection can be enabled during the interaction. - -* An element can be selected by clicking that element. -* When you select the elements in the diagram, the [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) event gets triggered and do customization in this event. - -![Select](../images/connector-select.gif) - -## Drag - -A connector can be dragged at runtime by using the [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Drag_System_Object_System_Double_System_Double_) method. The following code explains how to drag the connector by using the drag method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - public void OnDrag() - { - // Drag the connector - Diagram.Drag(Diagram.Connectors[0], 10, 10); - } -} -``` - -And also drag the connector during the interaction. - -* An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements moves all the selected elements. -* When you drag the elements in the diagram, the [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) event gets triggered and to do customization in this event. - -![Drag](../images/connector-drag.gif) - -## End point dragging - -The connector can be selected by clicking it. When the connector is selected, circles will be added on the starting and ending of the connector that is represented by Thumbs. Clicking and dragging those handles helps you to adjust the source and target points. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![End point dragging](../images/connector-end-point.gif) - -## How to route connectors - -The connectors in the diagram can be overlapped with any neighboring nodes when the node is placed in contact with the connector. This will make less clarity about the connector path flow. This can be avoided using the Routing process. The routing is the process of updating the connector’s geometry to avoid the overlapping with any neighboring nodes in their path. - -This behavior can be enabled by adding the `DiagramConstraints.LineRouting` enum value to the Constraints property of the diagram. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints Constraints { get; set; } - - protected override void OnInitialized() - { - Constraints = DiagramConstraints.Default | DiagramConstraints.LineRouting | DiagramConstraints.Bridging; - //Creates source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create a target node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - //Create a target node - DiagramNode node3 = new DiagramNode() - { - OffsetX = 500, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node3", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node3); - - //create the connector with source node and target node id. - DiagramConnector diagramConnector = new DiagramConnector() - { - //Source node id of the connector. - SourceID = "node1", - //Target node id of the connector. - TargetID = "node2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - //Adding conector into connector's collection - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Routing](../images/LineRouting.gif) - -## Segment editing - -### Straight segment editing - -* End point of each straight segment is represented by a thumb that enables to edit the segment. -* Any number of new segments can be inserted into a straight line by clicking, when Shift and Ctrl keys are pressed (Ctrl+Shift+Click). - -![Straight Segment Editing Addition](../images/straight-segment-add.gif) - -* Straight segments can be removed by clicking the segment end point, when Ctrl and Shift keys are pressed (Ctrl+Shift+Click). - -![Straight Segment Editing Remove](../images/straight-segment-remove.gif) - -### Orthogonal Segment Editing - -* Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging it. -* When necessary, some segments are added or removed automatically, when dragging the segment. This is to maintain proper routing of orthogonality between segments. - -![Orthogonal Segment Edit](../images/orthogonal-segment-edit.gif) - -### Bezier segment editing - -* A segment control point of the Bezier connector is used to change the bezier vectors, points of the connector. - -## See also - -* [How to customize the connector properties](./customization) - -* [How to change the segments](./segments) - -* [How to get the connector events](./events) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/segments.md b/blazor/diagram-classic/connectors/segments.md deleted file mode 100644 index 0a13e1ecb2..0000000000 --- a/blazor/diagram-classic/connectors/segments.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -layout: post -title: Segments in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Segments in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Segments in Blazor Diagram Component - -The path of the connector is defined with a collection of segments. There are three types of segments. - -## Straight - -To create a straight line, specify the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Type) of the segment as **straight** and add a straight segment to [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Segments) collection and need to specify [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Type) for the connector. The following code example illustrates how to create a default straight segment. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - //Defines the diagram constraints. - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - - //Specify the segment type as straight. - Type = Segments.Straight, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Straight Segment](../images/connector-straight.png) - -## Orthogonal - -Orthogonal segments are used to create segments that are perpendicular to each other. Set the segment [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Type) as orthogonal to create a default orthogonal segment and need to specify `Type`. The following code example illustrates how to create a default orthogonal segment. - -Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to [connector.Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Segments) collection. The following code example illustrates how to create a connector with multiple segments. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - - //Specify the segments type as Orthogonal. - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -The [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.OrthogonalSegmentModel.html#Syncfusion_Blazor_Diagrams_OrthogonalSegmentModel_Length) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.OrthogonalSegmentModel.html#Syncfusion_Blazor_Diagrams_OrthogonalSegmentModel_Direction) properties allow to define the flow and length of segment. The following code example illustrates how to create customized orthogonal segments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - //Specify the connector type as orthogonal. - Type = Segments.Orthogonal, - //Initialize the segments collection - Segments = new ObservableCollection() - { - //Create a new segment with length and direction - new DiagramConnectorSegment() - { - Length = 100, - Type = Segments.Orthogonal, - Direction = Direction.Right, - }, - //Create another new segment with length and direction - new DiagramConnectorSegment() - { - Length = 100, - Type = Segments.Orthogonal, - Direction = Direction.Bottom, - } - }, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Orthogonal Segment](../images/connector-orthogonal.png) - -N> You need to mention the segment type as same as what you mentioned in connector type. There should be no contradiction between connector type and segment type. - -## Avoid overlapping - -Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes. The following preview illustrates how orthogonal segments are re-routed. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code -{ - public ObservableCollection NodeCollection = new ObservableCollection(); - - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Create source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 1, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }, - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create target node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port2", - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 0, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }, - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - //Create a connector. - DiagramConnector diagramConnector = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - SourcePortID = "port1", - TargetPortID = "port2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## Bezier - -Bezier segments are used to create curve segments and the curves are configurable either with the control points or with vectors. - -To create a bezier segment, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) of the segment is set as bezier and need to specify type for the connector. The following code example illustrates how to create a default bezier segment. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Bezier, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } -} - -``` - -![Connector Bezier Segment](../images/connector-bezier.png) - -## See also - -* [How to customize the connector properties](./customization) - -* [How to interact the connector](./interactions) - -* [How to get the connector events](./events) diff --git a/blazor/diagram-classic/constraints.md b/blazor/diagram-classic/constraints.md deleted file mode 100644 index 65b073f4d5..0000000000 --- a/blazor/diagram-classic/constraints.md +++ /dev/null @@ -1,720 +0,0 @@ ---- -layout: post -title: Constraints in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Constraints in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Constraints in Blazor Diagram Component - -Constraints are used to enable or disable certain behaviors of the diagram, nodes, and connectors. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled using the Bitwise operators `(&, |, ~, <<, etc.)`. - -To know more about Bitwise operators, refer to the [Bitwise Operations](#bitwise-operations). - -## Diagram constraints - -Diagram constraints allow you to enable or disable the following behaviors: - -* Page editing -* Bridging -* Zoom and pan -* Undo or redo -* Tooltip - -The following list of diagram constraints are used to Enables or Disables certain features of the diagram. - -| Constraints | Description | -| -------- | -------- | -|None|Disable all diagram functionalities| -|Bridging|Enables or Disable Bridging support for connector in diagram| -|Undo/redo|Enables or Disable the Undo/Redo support for the diagram| -|Tooltip|Enables or Disable Tooltip support support for the diagram| -|UserInteraction|Enables or Disable user interaction support for the diagram| -|ApiUpdate|Enables or Disable update API support for the diagram| -|PageEditable|Enables or Disable Page Editable support for the diagram| -|Zoom|Enables or Disable Zoom support for the diagram| -|PanX|Enables or Disable Paning X coordinate support for the diagram| -|PanY|Enables or Disable Paning Y coordinate support for the diagram| -|Pan|Enables or Disable panning both X and Y coordinates support for the diagram| -|ZoomTextEdit|Enables or Disables zooming the text box while editing the text| -|LineRouting|Enables or Disable the line routing for the diagram| -|Virtualization|Enables or Disable Virtualization support the diagram| -|Default|Enables or Disable all constraints in diagram| - -The following example shows how to disable page editing using the diagram constraints. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with constraints *@ - - - -@code{ - //sets the Diagram constraints... - DiagramConstraints DiagramConstraints = DiagramConstraints.Default & ~DiagramConstraints.PageEditable; - - //Initialize the Nodes Collection. - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows how the virtualization can be enabled for the diagram. - -```csharp -//enabled the Virtualization functionality for the diagram -Diagram.Constraints = DiagramConstraints.Default | DiagramConstraints.Virtualization; -``` - -For more information about diagram constraints, refer to the [DiagramConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConstraints.html). - -N> By default, the following constraints are enabled in the diagram, -
    * UndoRedo -
    * UserInteraction -
    * ApiUpdate -
    * PageEditable -
    * Zoom -
    * Pan - -The diagram constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations) in the diagram. - -## Node constraints - -Node constraints allows you to enable or disable the following behaviors of node. They are as follows: - -* Selection -* Deletion -* Drag -* Resize -* Rotate -* Connect -* Shadow -* Tooltip - -The following list of node constraints are used to Enables or Disables certain features of node. - -| Constraints | Description | -| -------- | -------- | -|None|Disable all node Constraints| -|Select|Enables or Disables node to be selected| -|Drag|Enables or Disables node to be Dragged| -|Rotate|Enables or Disables node to be rotating| -|Shadow|Enables or disables node to display shadow| -|PointerEvents|Enables or disables node to provide pointer option| -|Delete|Enables or Disables node to be deleting| -|InConnect|Enables or disables node to provide in connect option| -|OutConnect|Enables or disables node to provide out connect option| -|Individual|Enables node to provide individual resize option| -|Expandable|Enables node to provide Expandable option| -|AllowDrop|Enables node to provide allow to drop option| -|Inherit|Enables node to inherit the interaction option from the parent object| -|ResizeNorthEast|Enable or disable to Resizing NorthEast side of the node| -|ResizeEast|Enable or disable to Resizing East side of the node| -|ResizeSouthEast|Enable or disable to Resizing SouthEast side of the node| -|ResizeSouth|Enable or disable to Resizing South side of the node| -|ResizeSouthWest|Enable or disable to Resizing SouthWest side of the node| -|ResizeWest|Enable or disable to Resizing West side of the node| -|ResizeNorthWest|Enable or disable to Resizing NorthWest side of the node| -|ResizeNorth|Enable or disable to Resizing North side of the node| -|Resize|Enables or Disables to Resizing of the node| -|AspectRatio|Enables the Aspect ratio of the node| -|Tooltip|Enables or disables tool tip for the Nodes| -|InheritTooltip|Enables or disables inherit tool tip option from the parent object| -|ReadOnly|Enables the ReadOnly support for annotation in node| -|HideThumbs|Enable to hide all resize thumbs for the node| -|AllowMovingOutsideLane|Enables or disables child in parent for the swimLane node| -|Default|Enables all default constraints for the node| - -The following example shows how to disable rotation using the node constraints. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - //sets the NodeConstraints constraints... - Constraints = NodeConstraints.Default & ~NodeConstraints.Rotate - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows how the tooltip can be enabled for the node. - -```csharp -//enabled the tooltip constraints for the node -node.Constraints = NodeConstraints.Default | NodeConstraints.Tooltip; -``` - -For more information about node constraints, refer to the [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html). - -N> By default, the following constraints are enabled for the node, -
    * Select -
    * Drag -
    * Resize -
    * Rotate -
    * Delete -
    * InConnect -
    * OutConnect -
    * Expandable -
    * InheritTooltip - -N> The node constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Connector constraints - -Connector constraints allow you to enable or disable certain behaviors of connectors. - -* Selection -* Deletion -* Drag -* Segment editing -* Tooltip -* Bridging - -The following list of connector constraints are used to Enables or Disables certain features of connectors. - -| Constraints | Description | -| -------- | -------- | -|None|Disable all connector Constraints| -|Select|Enables or Disables node to be selected| -|Delete|Enables or Disables node to be deleting| -|Drag|Enables or Disables node to be Dragged| -|DragSourceEnd|Enables connectors source end to be selected| -|DragTargetEnd|Enables connectors target end to be selected| -|DragSegmentThumb|Enables control point and end point of every segment in a connector for editing| -|AllowDrop|Enables allow drop support to the connector| -|Bridging|Enables bridging to the connector| -|BridgeObstacle|Enables or Disables Bridge Obstacles with overlapping of connectors| -|InheritBridging|Enables to inherit bridging option from the parent object| -|PointerEvents|Enables to set the pointer events| -|Tooltip|Enables or disables tool tip for the connectors| -|InheritTooltip|Enables or disables to inheriting tool tip option from the parent object| -|Interaction|Enables or disables Interaction for the connector| -|ReadOnly|Enables or disables readonly for the connector| -|LineRouting|Enables or disables routing to the connector| -|InheritLineRouting|Enables or disables to inheriting routing option from the parent| -|Default|Enables all constraints for the connector| - -The following code shows how to disable selection by using the connector constraints. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with ConnectorCollection *@ - - - -@code{ - ObservableCollection ConnectorCollection; - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "connector1", - Type = Segments.Straight, - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //sets the ConnectorConstraints... - Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following another code example shows how the tooltip can be enabled for the connector. - -```csharp -//enabled the tooltip constraints for the connector -connector.Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip; -``` - -For more information about connector constraints, refer to the [ConnectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorConstraints.html). - -N>By default, the following constraints are enabled for the connector, -
    * Select -
    * Drag -
    * DragSourceEnd -
    * DragTargetEnd -
    * Delete -
    * BridgeObstacle -
    * InheritBridging -
    * PointerEvents -
    * InheritTooltip -
    * InheritLineRouting - -**Note** : The connector constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Port constraints - -You can enable or disable certain behaviors of port. They are as follows: - -* Connect -* ConnectOnDrag - -The following list of port constraints are used to Enables or Disables certain features of ports. - -| Constraints | Description | -| -------- | -------- | -|None|Disable all port Constraints| -|Drag|Enables or disables to drag the port| -|Draw|Enables to create the connection when mouse hover on the port| -|InConnect|Enables or disables to only connect the target end of connector| -|OutConnect|Enables or disables to only connect the source end of connector| -|Default|Enables all constraints for the port| - -The following code shows how to disable creating connections with a port. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - node.Ports = new ObservableCollection() - { - new DiagramPort() - { - Id="port1", - Offset=new NodePortOffset(){X=0,Y=0.5}, - Shape=PortShapes.Circle, - Visibility=PortVisibility.Visible, - //sets the PortConstraints... - Constraints=PortConstraints.None - } - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows to modify the port constraints to accept target connection alone. - -```csharp -//Enable to create target connection alone. -port.Constraints = PortConstraints.InConnect; -``` - -For more information about port constraints, refer to the [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html). - -N> By default, the following constraints are enabled for the port, -
    * InConnect -
    * OutConnect - -**Note** : The port constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Annotation constraints - -You can enable or disable read-only mode for the annotations by using the annotation constraints. - -The following list of annotation constraints are used to Enables or Disables certain features of annotations. - -| Constraints | Description | -| -------- | -------- | -|ReadOnly|Enables or Disables the ReadOnly Constraints| -|InheritReadOnly|Enables or Disables to inherit the ReadOnly option from the parent object| -|Select|Enables or Disable select support for the annotation| -|Drag|Enables or Disable drag support for the annotation| -|Resize|Enables or Disable resize support for the annotation| -|Rotate|Enables or Disable rotate support for the annotation| -|Interaction|Enables or Disable annotation to inherit the interaction option| -|None|Disables all constraints for the annotation| - -The following code shows how to enable read-only mode for the annotations. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id="annotation1", - Content="Annotation Text Wrapping", - //sets the Constraints for Annotation... - Constraints=AnnotationConstraints.ReadOnly, - Style=new AnnotationStyle(){Color="#000000", Fill="transparent", - FontFamily="TimesNewRoman", FontSize=12, Bold=true, Italic=true}, - } - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows how to enable the selection and dragging functionality for the annotation. - -```csharp -//Enable select and drag constraints for the annotation. -annotation.Constraints = AnnotationConstraints.Select | AnnotationConstraints.Drag; -``` - -For more details about annotation constraints, refer to the [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationConstraints.html). - -N> The annotation constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Selector constraints - -Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector constraints. The part of selector is categorized as follows: - -* Resizer -* Rotator -* User handles - -The following list of selector constraints are used to Enables or Disables certain features of selected items. - -| Constraints | Description | -| -------- | -------- | -|None|Hides all the selector elements| -|ConnectorSourceThumb|Shows or hides the source thumb of the connector| -|ConnectorTargetThumb|Shows or hides the target thumb of the connector| -|ResizeSouthEast|Shows or hides the bottom right resize handle of the selector| -|ResizeSouthWest|Shows or hides the bottom left resize handle of the selector| -|ResizeNorthEast|Shows or hides the top right resize handle of the selector| -|ResizeNorthWest|Shows or hides the top left resize handle of the selector| -|ResizeEast|Shows or hides the middle right resize handle of the selector| -|ResizeWest|Shows or hides the middle left resize handle of the selector| -|ResizeSouth|Shows or hides the bottom center resize handle of the selector| -|ResizeNorth|Shows or hides the top center resize handle of the selector| -|Rotate|Shows or hides the rotate handle of the selector| -|UserHandle|Shows or hides the user handles of the selector| -|ToolTip|Shows or hides the default tooltip of selected items| -|ResizeAll|Shows or hides all resize handles of the selector| -|All|Shows all handles of the selector| - -The following code shows how to hide rotator. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - ObservableCollection NodeCollection; - - DiagramSelectedItems selectedItems = new DiagramSelectedItems() { Constraints = SelectorConstraints.All & ~SelectorConstraints.Rotate }; - - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows how to enable the userhandle functionality for the selected item. - -```csharp -//Enable userhandle constraint for the selected item. -selectedItems.Constraints = SelectorConstraints.All | SelectorConstraints.UserHandle; -``` - -For more information about selector constraints, refer to the [SelectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SelectorConstraints.html). - -N> By default, the following constraints are enabled for the selected items, -
    * ResizeAll -
    * UserHandle -
    * Rotate -
    * ToolTip - -**Note** : The port constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Snap constraints - -Snap constraints control the visibility of gridlines and enable or disable snapping. Snap constraints allow to set the following behaviors. - -* Show only horizontal or vertical gridlines. -* Show both horizontal and vertical gridlines. -* Snap to either horizontal or vertical gridlines. -* Snap to both horizontal and vertical gridlines. - -The following list of snapping constraints are used to Enables or Disables certain features of snapping. - -| Constraints | Description | -| -------- | -------- | -|None|Disable to snapping the nodes/connectors in diagram| -|ShowHorizontalLines|Displays only the horizontal gridlines in diagram| -|ShowVerticalLines|Displays only the Vertical gridlines in diagram| -|ShowLines|Display both Horizontal and Vertical gridlines| -|SnapToHorizontalLines|Enables the object to snap only with horizontal gridlines| -|SnapToVerticalLines|Enables the object to snap only with Vertical gridlines| -|SnapToLines|Enables the object to snap with both horizontal and Vertical gridlines| -|SnapToObject|Enables the object to snap with the other objects in the diagram| -|All|Shows gridlines and enables snapping| - -The following code shows how to show only horizontal gridlines. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @* Initialize the snapsettings with constraints *@ - - - -@code{ - ObservableCollection NodeCollection; - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - NodeCollection.Add(node); - } -} -``` - -For more information about snap constraints, refer to the [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SnapConstraints.html). - -N> By default, the following constraints are enabled for the snap functionality in the diagram, -
    * ShowLines -
    * SnapToLines - -**Note** : The snap constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Boundary constraints - -Boundary constraints defines a boundary for the diagram inside that the interaction should be done. Boundary constraints allow to set the following behaviors. - -* Infinite boundary -* Diagram sized boundary -* Page sized boundary - -The following list of constraints are used to Enables or Disables certain features of boundary interactions of the diagram. - -| Constraints | Description | -| -------- | -------- | -|Infinity|Allow the interactions to take place at the infinite height and width| -|Diagram|Allow the interactions to take place around the diagram height and width| -|Page|Allow the interactions to take place around the page height and width| - -The following code shows how to limit the interaction done inside a diagram within a page. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @* Initialize the pagesettings with boundary constraints *@ - - - -@code{ - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - NodeCollection.Add(node); - } -} -``` - -For more information about selector constraints, refer to the [BoundaryConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BoundaryConstraints.html). - -N> By default, the following boundary constraints are enabled for the snap functionality in the diagram, -
    * Diagram - -**Note** : The boundary constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Inherit behaviors - -Some of the behaviors can be defined through both the specific object (node or connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. - -The following code example shows how to inherit the line bridging behavior from the diagram model. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with constraints *@ - - - -@code{ - //Sets the diagram constraints - public DiagramConstraints DiagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; - - ObservableCollection ConnectorCollection; - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - - DiagramConnector connector = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //sets the ConnectorConstraints... - Constraints = ConnectorConstraints.Default | ConnectorConstraints.InheritBridging - }; - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector2", - SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 100, Y = 200 }, - }; - ConnectorCollection.Add(connector); - ConnectorCollection.Add(connector1); - } -} -``` - -## Bitwise operations - -Bitwise operations are used to manipulate the flagged enumerations `enum`. In this section, Bitwise operations are shown by using the node constraints. The same is applicable when working with node constraints, connector constraints, or port constraints. - -## Add operation - -You can add or enable multiple values at a time by using the Bitwise `|` (OR) operator. - -The following code shows to add line routing constraints into the default diagram constraints to enable line routing functionality into the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ -//To adding line routing constraint with default contraints. -DiagramConstraints DiagramConstraint = DiagramConstraints.Default | DiagramConstraints.LineRouting; -} -``` - -## Remove Operation - -You can remove or disable values by using the Bitwise ‘&~’ (XOR) operator. - -The following code shows to remove zoom and pan constraints from the default constraints to disable zoom and panning functionality in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ -//To removing zoom and panning constraints from the default contraints -//It has disabled zoom and panning funcationality for the diagram. -DiagramConstraints DiagramConstraint = DiagramConstraints.Default &~ (DiagramConstraints.Zoom | DiagramConstraints.Pan); -} -``` - -## Check operation - -You can check any value by using the Bitwise ‘&’ (AND) operator. - -```csharp -if ((node.constraints & (NodeConstraints.Rotate)) == (NodeConstraints.Rotate)); -``` - -In the previous example, check whether the rotate constraints are enabled in a node. When node constraints have rotated constraints, the expression returns a rotate constraint. \ No newline at end of file diff --git a/blazor/diagram-classic/context-menu.md b/blazor/diagram-classic/context-menu.md deleted file mode 100644 index 488b5fcfc9..0000000000 --- a/blazor/diagram-classic/context-menu.md +++ /dev/null @@ -1,372 +0,0 @@ ---- -layout: post -title: Context Menu in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Context Menu in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Context Menu in Blazor Diagram Component - - - -In graphical user interface (GUI), a context menu is a type of menu that appears when you perform right-click operation. You can create a nested level of context menu items. -Diagram provides some in-built context menu items and allows to define custom menu items through the [ContextMenuSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html) property. - -## Default context menu - -The [Show](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html#Syncfusion_Blazor_Diagrams_DiagramContextMenuSettings_Show) property helps you to enable or disable the context menu. Diagram provides some default context menu items such as copy, cut, select all, order,cut undo, redo, and group options. The following code shows how to enable the default context menu items. - -```cshtml - - // Define context menu - - - -``` - -![Default Context Menu](images/defaultContextMenu.gif) - -The following code shows how to disable the default context menu items. - -```cshtml - -// Define context menu - - - -``` - -## Custom context menu - -Custom context menu provides an option to add the new custom items to the context menu. - -* Apart from the default context menu items, define some additional context menu items. Those additional items have to be defined and added to the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html#Syncfusion_Blazor_Diagrams_DiagramContextMenuSettings_Items) property of the context menu. - -* You can set the text and ID for the context menu item using the context menu `Text` and `Id` properties respectively. - -* You can set an image for the context menu item using the context menu url property. - -* The `IconCss` property defines the class or multiple classes separated by a space for the menu item that is used to include an icon. Menu item can include the font icon and sprite image. - -* The `Target` property used to set the target to show the menu item. - -* The `Separator` property defines the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the separator property. - -### Custom context menu along with default context menu - -The following code example shows how to add custom context menu items along with the default context menu. set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html#Syncfusion_Blazor_Diagrams_DiagramContextMenuSettings_ShowCustomMenuOnly) property to false to render both custom context menu and default context menu. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - // Defines context menu and set the ShowCustomMenuOnly to false to render the custom context menu along with the default context menu - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Create a node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 100, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - //Create a node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 100, - Height = 100, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - - DiagramConnector diagramConnector1 = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "black", - Fill = "black", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector1); - } - // Add the custom context menu items - List contextMenuItemModels = new List() - { - new ContextMenuItemModel() - { - Text ="color", - Id="Save", - Target =".e-elementcontent", - // Add the nested custom context menu items - Items = new List() - { - new ContextMenuItemModel(){ Text ="Red", Id="Red", }, - new ContextMenuItemModel(){ Text ="Yellow", Id="Yellow", }, - new ContextMenuItemModel(){ Text ="Green", Id="Green", } - } - }, - }; -} -``` - -![Default Menu With Custom Context Menu](images/DefaultMenuWithCustomMenu.gif) - -### Custom context menu alone - -To display the custom context menu items alone, set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html#Syncfusion_Blazor_Diagrams_DiagramContextMenuSettings_ShowCustomMenuOnly) property to true. -The following code example shows how to add custom context menu items alone. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - // Defines context menu and set the ShowCustomMenuOnly to true to render the custom context menu alone - - - -``` - -![Custom Context Menu](images/CustomContextMenu.gif) - -## Events - -The Diagram control provides event support for context menu that triggers when rendering the context menu and triggers when clicking the items of the context menu. - -### OnContextMenuOpen - -The Diagram control triggers the event [OnContextMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnContextMenuOpen) when performing right click on the diagram or the diagram object. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - // Defines OnContextMenuOpen event - - // Defines context menu - - - - -@code -{ - public void OnContextMenuOpen(DiagramBeforeMenuOpenEventArgs arg) - { - //Action to be performed - } -} -``` - -### ContextMenuItemClicked - -The Diagram control triggers the event [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_ContextMenuItemClicked) when clicking the context menu item. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - // Defines the ContextMenuItemClicked event - - // Defines the context menu - - - - -@code -{ - public void ContextMenuItemClicked(DiagramMenuEventArgs arg) - { - //Action to be performed - } -} -``` - -The following code example shows how to add separate custom context menu items for node and connector. In the following code, the node color context menu item only render for node and the connector color context menu item only render for connector. - -```cshtml - - // Defines the ContextMenuItemClicked event - - // Defines the context menu - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Create a node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 100, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create a node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 200, - OffsetY = 100, - Height = 100, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - - DiagramConnector diagramConnector1 = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "black", - Fill = "black", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector1); - } - List contextMenuItemModels = new List() - { - new ContextMenuItemModel() - { - Text ="Node Color", - Id="Node", - Target =".e-elementcontent", - Items = new List() - { - new ContextMenuItemModel(){ Text ="Red", Id="Red", }, - new ContextMenuItemModel(){ Text ="Yellow", Id="Yellow", }, - new ContextMenuItemModel(){ Text ="Green", Id="Green", } - } - }, - new ContextMenuItemModel() - { - Text ="Connector Color", - Id="Connector", - Target =".e-elementcontent", - Items = new List() - { - new ContextMenuItemModel(){ Text ="Red", Id="black", }, - new ContextMenuItemModel(){ Text ="Yellow", Id="blue", }, - new ContextMenuItemModel(){ Text ="Green", Id="brown", } - } - }, - }; - - public void OnContextMenuOpen(DiagramBeforeMenuOpenEventArgs arg) - { - if (diagram.SelectedItems.Nodes.Count > 0) - { - arg.HiddenItems.Add("Connector"); - } - if (diagram.SelectedItems.Connectors.Count > 0) - { - arg.HiddenItems.Add("Node"); - } - } -} -``` - -![Custom Context Menu](images/seperateContextMenu.gif) \ No newline at end of file diff --git a/blazor/diagram-classic/data-binding.md b/blazor/diagram-classic/data-binding.md deleted file mode 100644 index 9fb914df4f..0000000000 --- a/blazor/diagram-classic/data-binding.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -layout: post -title: Data Binding in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Data Binding in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Data Binding in Blazor Diagram Component - -* Diagram can be populated with the `Nodes` and `Connectors` based on the information provided from an external data source. - -* Diagram exposes its specific data-related properties allowing you to specify the data source fields from where the node information has to be retrieved from. - -* The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramDataSource.html#Syncfusion_Blazor_Diagrams_DiagramDataSource_DataSource) property is used to define the data source either as a collection of objects or as an instance of [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramDataSource.html#Syncfusion_Blazor_Diagrams_DiagramDataSource_DataSource) that needs to be populated in the diagram. - -* The `ID` property is used to define the unique field of each JSON data. - -* The `ParentId` property is used to defines the parent field which builds the relationship between ID and parent field. - -* The `Root` property is used to define the root node for the diagram populated from the data source. - -* To explore those properties, see [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DataSourceSettings). - -* Diagram supports two types of data binding. They are: - - 1. Local data - 2. Remote data - -## Local data - -Diagram can be populated based on the user defined JSON data (Local Data) by mapping the relevant data source fields. - -To map the user defined JSON data with diagram, configure the fields of [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DataSourceSettings). The following code example illustrates how to bind local data with the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - //Defines the node default values. - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 95, - Height = 30, - BackgroundColor = "#6BA5D7", - Shape = new DiagramShape() { Type = Shapes.Basic, BasicShape = BasicShapes.Rectangle }, - Style = new NodeShapeStyle { Fill = "#ffeec7", StrokeColor = "#ffeec7", StrokeWidth = 1, }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "black" - }, - } - } - }; - //Defines the connector's default values. - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#4d4d4d", StrokeWidth = 2 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - } - }; - //Create the layout info - TreeInfo LayoutInfo = new TreeInfo() - { - //Enable the sub-tree. - CanEnableSubTree = true, - //Specify the sub-tree orientation - Orientation = SubTreeOrientation.Horizontal, - }; - //Create the data map settings. - List datamap { get; set; } = new List() - { - new DiagramDataMapSetting() { Property = "Shape.TextContent", Field = "Name" } - }; - - DiagramLayout LayoutValue = new DiagramLayout() { }; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - Type = LayoutType.HierarchicalTree, - VerticalSpacing = 30, - HorizontalSpacing = 30, - EnableAnimation = true, - LayoutInfo = this.LayoutInfo - }; - } - - //Create the hierarchical details with needed properties. - public class HierarchicalDetails - { - public string Name { get; set; } - public string FillColor { get; set; } - public string Category { get; set; } - } - - //Create the data source with node name and fill color values. - public List DataSource = new List() - { - new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#916DAF"}, - new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor=""}, - new HierarchicalDetails(){ Name ="Tree Layout", Category="Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Organizational Chart", Category="Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Hierarchical Tree", Category="Tree Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Radial Tree", Category="Tree Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Mind Map", Category="Hierarchical Tree",FillColor=""}, - new HierarchicalDetails(){ Name ="Family Tree", Category="Hierarchical Tree",FillColor=""}, - new HierarchicalDetails(){ Name ="Management", Category="Organizational Chart",FillColor=""}, - new HierarchicalDetails(){ Name ="Human Resources", Category="Management",FillColor=""}, - new HierarchicalDetails(){ Name ="University", Category="Management",FillColor=""}, - new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor=""} - }; -} -``` - -## See Also - -* [How to arrange the diagram nodes and connectors using varies layout](https://blazor.syncfusion.com/documentation/diagram-classic/layout/automatic-layout/) \ No newline at end of file diff --git a/blazor/diagram-classic/events.md b/blazor/diagram-classic/events.md deleted file mode 100644 index 7b633f2e4c..0000000000 --- a/blazor/diagram-classic/events.md +++ /dev/null @@ -1,531 +0,0 @@ ---- -layout: post -title: Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in the Blazor Diagram component of Syncfusion and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Events in Blazor Diagram Component - -## Created - -Triggered when the diagram is rendered completely. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void Created() - { - //Action to be performed. - } -} -``` - -N> A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Refer the [Link](https://blazor.syncfusion.com/documentation/diagram-component/events) - - -## Clicked - -Triggers when a node, connector, or diagram is clicked. - -| Argument Name | Description | -| -------- | -------- | -| Element | Returns the object that is clicked or id of the diagram. | -| Position | Returns the object position that is actually clicked. | -| Count | Returns the number of times clicked. | -| ActualObject | Returns the actual object that is clicked or id of the diagram. | -| Button | Returns the button clicked. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void Clicked(IBlazorClickEventArgs args) - { - //Action to be performed. - } -} -``` - -## ContextMenuItemClicked - -Triggers when a context menu item is clicked. - -| Argument Name | Description | -| -------- | -------- | -| Element | Returns the object that is clicked. | -| Item | Returns the actual object that is clicked. | -| Name | Returns the name of the object that is clicked. | -| Cancel | Returns whether to cancel the change or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void ContextMenuItemClicked(DiagramMenuEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnContextMenuOpen - -Triggers before opening the context menu. - -| Argument Name | Description | -| -------- | -------- | -| Cancel | Returns whether to cancel the change or not. | -| Element | Returns the object that is clicked. | -| HiddenItems | Defines the hidden items of the diagram context menu. | -| Items | Defines the items of the diagram context menu. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnContextMenuOpen(DiagramBeforeMenuOpenEventArgs args) - { - //Action to be performed. - } -} -``` - -## DataLoaded - -Triggers after the diagram is are populated from the external data source - -| Argument Name | Description | -| -------- | -------- | -| Diagram | Returns the diagram. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void DataLoaded(IDataLoadedEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnDoubleClick - -Triggers when a node, connector, or diagram is clicked. - -| Argument Name | Description | -| -------- | -------- | -| Count | Returns the number of times clicked. | -| Position | Returns the object position that is actually clicked. | -| Element | Returns the object that is clicked or id of the diagram. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnDoubleClick(IBlazorDoubleClickEventArgs args) - { - //Action to be performed. - } -} -``` - -## DragEnter - -Triggers when a symbol is dragged into a diagram from the symbol palette. - -| Argument Name | Description | -| -------- | -------- | -| Cancel | Returns whether to add or remove the symbol from the diagram. | -| DiagramId | Returns the id of the diagram. | -| Element | Returns the node or connector that is dragged into a diagram. | -| Source | Returns the node or connector that is to be dragged into a diagram. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void DragEnter(IBlazorDragEnterEventArgs args) - { - //Action to be performed. - } -} -``` - -## DragLeave - -Triggers when a symbol is dragged outside of the diagram. - -| Argument Name | Description | -| -------- | -------- | -| DiagramId | Returns the id of the diagram. | -| Element | Returns the node or connector that is dragged outside of the diagram. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void DragLeave(IBlazorDragLeaveEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnDrop - -Triggers when a symbol is dragged and dropped from the symbol palette to the drawing area. - -| Argument Name | Description | -| -------- | -------- | -| Cancel | Returns node or connector that is being dropped. | -| Element | Returns the node or connector that is dragged into a diagram. | -| Position | Returns the position of the object. | -| Source | Returns the object from where the element is dragged. | -| Target | Returns the object over which the object will be dropped. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnDrop(IBlazorDropEventArgs args) - { - //Action to be performed. - } -} -``` - -## HistoryChanged - -Triggers when a change is reverted or restored(undo/redo). - -| Argument Name | Description | -| -------- | -------- | -| Cause | Returns the cause of the event. | -| Change | Returns an array of objects, where each object represents the changes made in the last undo/redo. | -| Source | Returns a collection of objects that are changed in the last undo/redo. | -| Action | Returns the event action. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void HistoryChanged(IBlazorHistoryChangeArgs args) - { - //Action to be performed. - } -} -``` - -## MouseEnter - -Triggered when the mouse enters a node/connector. - -| Argument Name | Description | -| -------- | -------- | -| ActualObject | Returns when the mouse hovers to the target node or connector. | -| Element | Returns a parent node of the target node or connector. | -| Target | Returns the target object over which the selected object is dragged. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void MouseEnter(IBlazorMouseEventArgs args) - { - //Action to be performed. - } -} -``` - -## MouseLeave - -Triggered when the mouse leaves node/connector. - -| Argument Name | Description | -| -------- | -------- | -| ActualObject | Returns when the mouse hovers to the target node or connector. | -| Element | Returns a parent node of the target node or connector. | -| Target | Returns the target object over which the selected object is dragged. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void MouseLeave(IBlazorMouseEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnPositionChange - -Triggers while dragging the elements in a diagram. - -| Argument Name | Description | -| -------- | -------- | -| Source | Returns the node or connector that is being dragged. | -| State | Returns the state of drag event (Starting, dragging, and completed). | -| NewValue | Returns the current node or connector that is being dragged. | -| OldValue | Returns the previous node or connector that is dragged. | -| Target | Returns the target node or connector that is dragged. | -| TargetPosition | Returns the offset of the selected items. | -| AllowDrop | Returns whether the object that can be dropped over the element. | -| Cancel | Returns whether to cancel the change or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnPositionChange(IBlazorDraggingEventArgs args) - { - //Action to be performed. - } -} -``` - -## PropertyChanged - -Triggers once the node or connector property changed. - -| Argument Name | Description | -| -------- | -------- | -| Element | Returns the selected element. | -| Cause | Returns the action is nudged or not. | -| NewValue | Returns the new value of the property that is being changed. | -| OldValue | Returns the old value of the node property that is being changed. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void PropertyChanged(IBlazorPropertyChangeEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnRotateChange - -Triggers when the diagram elements are rotated. - -| Argument Name | Description | -| -------- | -------- | -| Source | Returns the node that is selected for rotation. | -| State | Returns the state of an event. | -| NewValue | Returns the current rotation angle. | -| OldValue | Returns the previous rotation angle. | -| Cancel | Returns whether to cancel the change or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnRotateChange(IRotationEventArgs args) - { - //Action to be performed. - } -} -``` - -## SelectionChanged - -Triggers when the selection is changed in the diagram. - -| Argument Name | Description | -| -------- | -------- | -| Cause | Returns the actual cause of the event. | -| State | Returns the state of an event. | -| NewValue | Returns the collection of nodes and connectors that have to be added to the selection list. | -| OldValue | Returns the collection of nodes and connectors that have to be removed from the selection list. | -| Type | Returns whether the item is added or removed from the selection list. | -| Cancel | Returns whether or not to cancel the selection change event or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void SelectionChanged(IBlazorSelectionChangeEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnSizeChange - -Triggers when a node is resized. - -| Argument Name | Description | -| -------- | -------- | -| Source | Returns the node that is selected for resizing. | -| State | Returns the state of an event. | -| NewValue | Returns the new width, height, offsetX, and offsetY values of the element that is being resized. | -| OldValue | Returns the previous width, height, offsetX, and offsetY values of the element that is being resized. | -| Cancel | Returns whether or not to cancel the size change event or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnSizeChange(ISizeChangeEventArgs args) - { - //Action to be performed. - } -} -``` - -## TextEdited - -Triggers when editor got focus at the time of node’s label or text node editing. - -| Argument Name | Description | -| -------- | -------- | -| Element | Returns a node or connector in which annotation is being edited. | -| Annotation | Returns an annotation which that is being edited. | -| NewValue | Returns the new text value of the element that is being changed. | -| OldValue | Returns the old text value of the element. | -| Cancel | Returns whether or not to cancel the event or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void TextEdited(IBlazorTextEditEventArgs args) - { - //Action to be performed. - } -} -``` - -## Native events - -The Diagram control provides event support, which triggers while interacting with the diagram. Also, Syncfusion® provides native event support in blazor for the following events - -| Event Name | Event Type | -| -------- | -------- | -| onfocus | FocusEventArgs | -| onclick | MouseEventArgs | -| onmousemove | MouseEventArgs | -| onmouseover | MouseEventArgs | -| onmouseout | MouseEventArgs | -| onmousedown | MouseEventArgs | -| onmouseup | MouseEventArgs | -| ondblclick | MouseEventArgs | -| onkeydown | KeyboardEventArgs | -| onkeyup | KeyboardEventArgs | -| ondrop | DragEventArgs | - -The native events can be defined as mentioned below. For example, the onmousedown event in diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - -@code -{ - public void OnMouseDown(MouseEventArgs args) - { - //Action to be performed - } -} -``` diff --git a/blazor/diagram-classic/export.md b/blazor/diagram-classic/export.md deleted file mode 100644 index 1ca1640604..0000000000 --- a/blazor/diagram-classic/export.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -layout: post -title: Printing and Exporting in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Printing and Exporting in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Printing and Exporting in Blazor Diagram Component - -Diagram provides support to export its content as image/svg files. The server-side method [ExportDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ExportDiagram_Syncfusion_Blazor_Diagrams_IExportOptions_) helps to export the diagram. The following code illustrates how to export the diagram as image. - - - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - //Sets the Mode for diagram export - Mode = ExportModes.Data, - }; - diagram.ExportDiagram(options); - } -} -``` - -## Exporting options - -Diagram provides support to export the desired region of the diagram to desired formats. - -## File Name - -[FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_FileName) is the name of the file to be downloaded. By default, the file name is set to **Diagram**. - -## Format - -[Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Format) is to specify the type/format of the exported file. By default, the diagram is exported as .jpg format. You can export diagram to the following formats: - -* JPG -* PNG -* BMP -* SVG - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Data, - //Sets the format for diagram export - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Margin - -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Margin) specifies the amount of space that has to be left around the diagram. - - - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Data, - FileName = "diagram", - Stretch = Stretch.None, - //Sets the margin for diagram export - Margin = new DiagramMargin { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} - -``` - -## Mode - -[Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Mode) specifies whether the diagram is to be exported as files or as data (ImageURL/SVG). The exporting options are as follows: - -* Data: Exports and downloads the diagram as image. -* Download: Exports the diagram as data of formats ImageURL/SVG. - -For more information about the exporting modes, refer to Exporting Modes. - -The following code example illustrates how to export the diagram as raw data. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - //Sets the mode for diagram export - Mode = ExportModes.Data, - FileName = "diagram", - Stretch = Stretch.None, - Margin = new Syncfusion.Blazor.Diagrams.MarginModel() { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Region - -You can export any particular [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Region) of the diagram and the region is categorized as follows. - -* Region that fits all nodes and connectors that are added to model. -* Region that fits all pages (single or multiple pages based on page settings). - -For more information about region, refer to Regions. - -The following code example illustrates how to export the region occupied by the diagram elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Data, - FileName = "format", - Stretch = Stretch.None, - //Sets the region for diagram export - Region = DiagramRegions.Content, - Margin = new Syncfusion.Blazor.Diagrams.MarginModel() { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Custom bounds - -Diagram provides support to export any specific region of the diagram by using [Bounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Region). - -The following code example illustrates how to export the region occupied by the diagram elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - //Define bounds class for export the diagram - public class exportBounds - { - public double x { get; set; } - public double y { get; set; } - public double width { get; set; } - public double height { get; set; } - } - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Download, - FileName = "format", - PageHeight = 400, - PageWidth = 400, - Stretch = Stretch.None, - Region = DiagramRegions.CustomBounds, - //Sets the custom bound for diagram export - Bounds = new exportBounds() { x = 10, y = 10, width = 100, height = 100 }, - Margin = new Syncfusion.Blazor.Diagrams.MarginModel() { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Export diagram with stretch option - -Diagram provides support to export the diagram as image for [Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Stretch) option. The exported images will be clearer but larger in file size. - -The following code example illustrates how to export the region occupied by the diagram elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Data, - FileName = "region", - Stretch = Stretch.Stretch, - Region = DiagramRegions.Content, - Margin = new Syncfusion.Blazor.Diagrams.MarginModel() { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Print - -The server-side method [Print](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Print_Syncfusion_Blazor_Diagrams_IPrintOptions_) helps to print the diagram as image. - -| Name | Type | Description| -|-------- | -------- | -------- | -| region | enum | Sets the region of the diagram to be printed. | -| bounds | object | Prints any custom region of diagram. | -| stretch| enum | Resizes the diagram content to fill its allocated space and printed.| -| multiplePage | boolean | Prints the diagram into multiple pages. | -| pageWidth | number | Sets the page width of the diagram while printing the diagram into multiple pages. | -| pageHeight| number | Sets the page height of the diagram while printing the diagram into multiple pages.| -| pageOrientation | enum | Sets the orientation of the page. | - -The following code example illustrates how to export the region occupied by the diagram elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnPrint() - { - //Sets the print option for diagram - IPrintOptions options = new IPrintOptions() - { - MultiplePage = true, - PageHeight = 400, - PageWidth = 400, - Region = DiagramRegions.PageSettings, - }; - diagram.Print(options); - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/getting-started.md b/blazor/diagram-classic/getting-started.md deleted file mode 100644 index 0306b4e49c..0000000000 --- a/blazor/diagram-classic/getting-started.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -layout: post -title: Getting Started with Blazor Diagram Component | Syncfusion -description: Checkout and learn about getting started with Blazor Diagram component of Syncfusion, and more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Getting Started with Blazor Diagram Component - -This section briefly explains about how to include a Diagram in your Blazor Server-Side application. You can refer [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) page for the introduction and configuring the common specifications. - -## Importing Syncfusion® Blazor component in the application - - 1. Install **Syncfusion.Blazor.Diagrams** NuGet package to the application by using the **NuGet Package Manager**. - 2. You can add the client-side style resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package in the **HEAD** element of the **~/Pages/_Host.cshtml** page. - -```cshtml - - - - - -``` - -N> For Internet Explorer 11 kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie) for more information. - -```cshtml - - - - - - -``` - -## Adding component package to the application - -Open **~/_Imports.Blazor** file and import the **Syncfusion.Blazor.Diagrams** packages. - -```cshtml -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Diagrams -``` - -## Add SyncfusionBlazor service in Startup.cs - -Open the **Startup.cs** file and add services required by Syncfusion® components using **services.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows. - -```c# -using Syncfusion.Blazor; - -namespace BlazorApplication -{ - public class Startup - { - .... - .... - public void ConfigureServices(IServiceCollection services) - { - .... - .... - services.AddSyncfusionBlazor(); - } - } -} -``` - -**Note**: To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by `AddSyncfusionBlazor(true)` and load the scripts in the **HEAD** element of the **~/Pages/_Host.cshtml** page. - -```cshtml - - - - - -``` - -## Adding Diagram component to the Application - -Diagram component can be rendered by using the `SfDiagram` tag helper in ASP.NET Core Blazor application. Add the Diagram component in any web page `razor` in the `Pages` folder. For example, the Diagram component is added in the `~/Pages/Index.razor` page. - -The following example shows a basic Diagram component. - -```cshtml - - - -``` - -## Adding Nodes and Connectors - -Let us create and add a `nodes` with specific position, size, label and shape. Connect two or more nodes by using a -`connectors`. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel -@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes -@using DiagramSegments = Syncfusion.Blazor.Diagrams.Segments - - - - -@code -{ - int connectorCount = 0; - // Reference to diagram - SfDiagram diagram; - // Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - // Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - // Defines default values for DiagramNode object - public DiagramNode NodeDefaults { get; set; } - // Defines default values for DiagramConnector object - public DiagramConnector ConnectorDefaults { get; set; } - - protected override void OnInitialized() - { - InitDiagramModel(); - } - - private void InitDiagramModel() - { - InitDiagramDefaults(); - NodeCollection = new ObservableCollection(); - ConnectorCollection = new ObservableCollection(); - CreateNode("Start", 50, FlowShapes.Terminator, "Start"); - CreateNode("Init", 140, FlowShapes.Process, "var i = 0;'"); - CreateNode("Condition", 230, FlowShapes.Decision, "i < 10?"); - CreateNode("Print", 320, FlowShapes.PreDefinedProcess, "print(\'Hello!!\');"); - CreateNode("Increment", 410, FlowShapes.Process, "i++;"); - CreateNode("End", 500, FlowShapes.Terminator, "End"); - DiagramConnectorSegment segment1 = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 30, - Direction = Direction.Right - }; - DiagramConnectorSegment segment2 = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 300, - Direction = Direction.Bottom - }; - DiagramConnectorSegment segment3 = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 30, - Direction = Direction.Left - }; - DiagramConnectorSegment segment4 = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 200, - Direction = Direction.Top - }; - CreateConnector("Start", "Init"); - CreateConnector("Init", "Condition"); - CreateConnector("Condition", "Print"); - CreateConnector("Condition", "End", "Yes", segment1, segment2); - CreateConnector("Print", "Increment", "No"); - CreateConnector("Increment", "Condition", null, segment3, segment4); - } - - private void CreateConnector(string sourceId, string targetId, string label = default(string), DiagramConnectorSegment segment1 = null, DiagramConnectorSegment segment2 = null) - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = string.Format("connector{0}", ++connectorCount), - SourceID = sourceId, - TargetID = targetId - }; - - if (label != default(string)) - { - var annotation = new DiagramConnectorAnnotation() - { - Content = label, - Style = new AnnotationStyle() { Fill = "white" } - }; - diagramConnector.Annotations = new ObservableCollection() { annotation }; - } - - if (segment1 != null) - { - diagramConnector.Segments = new ObservableCollection() { segment1, segment2 }; - } - - ConnectorCollection.Add(diagramConnector); - } - - private void InitDiagramDefaults() - { - DiagramNodeAnnotation defaultAnnotation = new DiagramNodeAnnotation() - { - Style = new AnnotationStyle() - { - Color = "white", - Fill = "transparent" - } - }; - NodeDefaults = new DiagramNode() - { - Width = 140, - Height = 50, - OffsetX = 300, - Annotations = new ObservableCollection() { defaultAnnotation }, - Style = new NodeShapeStyle() { Fill = "#357BD2", StrokeColor = "white" } - }; - - ConnectorDefaults = new DiagramConnector() - { - Type = DiagramSegments.Orthogonal, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow, Width = 10, Height = 10 } - }; - } - - private void CreateNode(string id, double y, FlowShapes shape, string label, bool positionLabel = false) - { - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() { Content = label }; - if (positionLabel) - { - annotation.Margin = new NodeAnnotationMargin() { Left = 25, Right = 25 }; - }; - - DiagramNode diagramNode = new DiagramNode() - { - Id = id, - OffsetY = y, - Shape = new DiagramShape() { Type = DiagramShapes.Flow, FlowShape = shape }, - Annotations = new ObservableCollection() { annotation } - }; - NodeCollection.Add(diagramNode); - } -} -``` - -![Diagram](images/Diagram.png) - -N> You can refer to our [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Diagram example](https://blazor.syncfusion.com/demos/diagramcomponent/flowchart?theme=fluent) to understand how to present and manipulate data. - -## See Also - -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/diagram-classic/grid-lines.md b/blazor/diagram-classic/grid-lines.md deleted file mode 100644 index 3acea902bd..0000000000 --- a/blazor/diagram-classic/grid-lines.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -layout: post -title: Gridlines in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Gridlines in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Gridlines in Blazor Diagram Component - -Gridlines are the pattern of lines drawn behind the diagram elements. It provides a visual guidance while dragging or arranging the objects on the diagram surface. - -The model’s [SnapSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SnapSettings) property is used to customize the gridlines and control the snapping behavior in the diagram. - -## Customize the gridlines visibility - -The [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SnapConstraints.html) enables you to show/hide the gridlines. The following code example illustrates how to show or hide gridlines. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Shows both horizontal and vertical gridlines *@ - - - - - - - - -@code{ - SnapConstraints snapConstraints = SnapConstraints.ShowLines; -} -``` - -To show only horizontal/vertical gridlines or to hide gridlines, refer to [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SnapConstraints.html). - -## Appearance - -The appearance of the gridlines can be customized by using a set of predefined properties. - -* The [HorizontalGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_HorizontalGridlines) and the [VerticalGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_VerticalGridlines) properties allow to customize the appearance of the horizontal and vertical gridlines respectively. - -* The horizontal gridlines [LineColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineColor) and [LineDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineDashArray) properties are used to customizes the line color and line style of the horizontal gridlines. - -* The vertical gridlines [LineColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineColor) and [LineDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineDashArray) properties are used to customizes the line color and line style of the vertical gridlines. - -The following code example illustrates how to customize the appearance of gridlines. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Shows both horizontal and vertical gridlines *@ - - @* Customizes the line color and line style to the gridlines *@ - - - - - - -``` - -## Line intervals - -Thickness and the space between gridlines can be customized by using horizontal gridline’s [LinesInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineIntervals) and vertical gridline’s [LinesInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineIntervals) properties. In the line intervals collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines. - -The following code example illustrates how to customize the thickness of lines and the line intervals. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Customize the appearance of the grid lines *@ - - - - - - - - -@code{ - //Sets the line intervals for the gridlines - public double[] LineIntervals { get; set; } = new double[] - { - 1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15 - }; -} -``` - -![Diagram Gridlines appearances](images/Gridlines.png) - -## Snapping - -### Snap to lines - -This feature allows the diagram objects to snap to the nearest intersection of gridlines while being dragged or resized. This feature enables easier alignment during layout or design. - -Snapping to gridlines can be enabled/disabled with the [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_Constraints). The following code example illustrates how to enable/disable the snapping to gridlines. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - //Sets the snap constraints - public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToLines; - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode(); - diagramNode.OffsetX = 100; - diagramNode.OffsetY = 100; - diagramNode.Width = 100; - diagramNode.Height = 100; - diagramNode.Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; - diagramNode.Id = "node1"; - NodeCollection.Add(diagramNode); - } -} -``` - -### Customization of snap intervals - -By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridline’s [SnapInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html) and the vertical gridline’s [SnapInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html) properties. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - //Sets the snap constraints - public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToLines; - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode(); - diagramNode.OffsetX = 100; - diagramNode.OffsetY = 100; - diagramNode.Width = 100; - diagramNode.Height = 100; - diagramNode.Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; - diagramNode.Id = "node1"; - NodeCollection.Add(diagramNode); - } -} -``` - -### Snap to objects - -The snap to object provides visual cues to assist with aligning and spacing diagram elements. A node can be snapped with its neighboring objects based on certain alignments. Such alignments are visually represented as smart guides. - -The [SnapObjectDistance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_SnapObjectDistance) property allows you to define minimum distance between the selected object and the nearest object. - -The [SnapAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_SnapAngle) property allows you to define the snap angle by which the object needs to be rotated. - -The [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_Constraints) property allows you to enable or disable the certain features of the snapping, refer to [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SnapConstraints.html). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - //Sets the Snap to objects constraints... - public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToObject; - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode(); - diagramNode.OffsetX = 100; - diagramNode.OffsetY = 100; - diagramNode.Width = 100; - diagramNode.Height = 100; - diagramNode.Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; - diagramNode.Id = "node1"; - NodeCollection.Add(diagramNode); - diagramNode = new DiagramNode(); - diagramNode.OffsetX = 300; - diagramNode.OffsetY = 100; - diagramNode.Width = 100; - diagramNode.Height = 100; - diagramNode.Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; - diagramNode.Id = "node2"; - NodeCollection.Add(diagramNode); - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/group.md b/blazor/diagram-classic/group.md deleted file mode 100644 index 5f2aca8e05..0000000000 --- a/blazor/diagram-classic/group.md +++ /dev/null @@ -1,416 +0,0 @@ ---- -layout: post -title: Group in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Group in Syncfusion® Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Group in Blazor Diagram Component - -Group is used to cluster multiple nodes and connectors into a single element. It acts like a container for its children (nodes, groups, and connectors). Every change made to the group also affects the children. Child elements can be edited individually. - -## Create group - -## Add group when initializing diagram - -A group can be added to the diagram model through `Nodes` collection. To define an object as group, add the child objects to the `Children` collection of the group. The following code illustrates how to create a group node. - -* While creating group, its child node needs to be declared before the group declaration. - -* Add a node to the existing group child by using the `diagram.Group` method. - -* The group’s `diagram.UnGroup` method is used to define whether the group can be ungrouped or not. - -* A group can be added into a child of another group. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - SfDiagram diagram; - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = createNode("node1", 100, 100, "Node1"); - DiagramNode node2 = createNode("node2", 300, 100, "Node2"); - DiagramNode node3 = createNode("node3", 200, 250, "Node3"); - DiagramNode groupnode = new DiagramNode(); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(node3); - NodeCollection.Add(groupnode); - } - - public DiagramNode createNode(string id, double offx, double offy, string content) - { - DiagramNode node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" } - }; - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() { Color = "white", Fill = "transparent", StrokeColor = "None" }, - }; - node.Annotations = new ObservableCollection() - { - annotation - }; - return node; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await Task.Delay(500); - diagram.SelectAll(); - // Adding the third node into the existing group - diagram.Group(); - } - } -} -``` - -The following code illustrates how a ungroup at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - SfDiagram diagram; - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = createNode("node1", 100, 100, "Node1"); - DiagramNode node2 = createNode("node2", 300, 100, "Node2"); - DiagramNode groupnode = new DiagramNode(); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(groupnode); - } - - public DiagramNode createNode(string id, double offx, double offy, string content) - { - DiagramNode node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" } - }; - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() { Color = "white", Fill = "transparent", StrokeColor = "None" }, - }; - node.Annotations = new ObservableCollection() - { - annotation - }; - return node; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await Task.Delay(500); - diagram.SelectAll(); - // Ungroup the selected group into nodes - diagram.UnGroup(); - } - } -} -``` - -## Add group at runtime - -A group node can be added at runtime by using Nodes collection of diagram. The following code illustrates how a group node is added at runtime - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - DiagramNode groupnode = new DiagramNode(); - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = createNode("node1", 100, 100, "Node1"); - DiagramNode node2 = createNode("node2", 300, 100, "Node2"); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - } - - public DiagramNode createNode(string id, double offx, double offy, string content) - { - DiagramNode node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7" } - }; - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() { Color = "white", Fill = "transparent", StrokeColor = "None" }, - }; - node.Annotations = new ObservableCollection() - { - annotation - }; - return node; - } - - private void AddGroup() - { - NodeCollection.Add(groupnode); - } -} -``` - -## Group from SymbolPalette - -Group Nodes can be predefined and added to SymbolPalette. You can drop those Groups into Diagram, when required. The following code illustrates how to add group into SymbolPalette. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -
    - @*Hidden:Lines*@ - - @*End:Hidden*@ -
    -
    -
    -
    -
    - @* Initialize Symbol palette with customize symbol size*@ - - - @* Sets the palette header property for the symbols *@ - - - - -
    -
    -
    - - -
    -
    -
    -
    - -@code{ - // Defines palette's basic-shape collection - public ObservableCollection BasicShapes { get; set; } - public SymbolInfo symbolInfo; - - protected override void OnInitialized() - { - //Sets the size, appearance and description of a symbol - symbolInfo = new SymbolInfo() - { - Description = new SymbolDescription() - { - Text = "GroupCollection", - Overflow = TextOverflow.Wrap, - Wrap = TextWrap.Wrap - }, - Height = 50, - Width = 50 - }; - //Initialize the basicshapes for the symbol palette - BasicShapes = new ObservableCollection(); - DiagramNode groupnode = createNode("groupnode", 100, 100, "GroupNode", Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle); - DiagramNode node1 = createNode("node1", 100, 100, "Node1", Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle); - DiagramNode node2 = createNode("node2", 150, 150, "Node2", Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse); - //Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - BasicShapes.Add(node1); - BasicShapes.Add(node2); - BasicShapes.Add(groupnode); - } - - public DiagramNode createNode(string id, double offx, double offy, string content, Syncfusion.Blazor.Diagrams.BasicShapes shape) - { - DiagramNodeAnnotation Annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() - { - Color = "white", - Fill = "transparent", - StrokeColor = "None" - }, - }; - if (content == "GroupNode") - { - Annotation.Style.Color = "black"; - } - DiagramNode Node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 50, - Width = 50, - Shape = new DiagramShape() { Type = Shapes.Basic, BasicShape = shape }, - Annotations = new ObservableCollection() { Annotation } - }; - if (content != "GroupNode") - { - Node.Style = new NodeShapeStyle() { Fill = "#6BA5D7" }; - } - return Node; - } -} -``` - -![SymbolPalette](./images/symbol-palette-group.gif) - -## Update position at runtime - -You can change the position of the group similar to node. For more information about node positioning, refer to [Positioning](./nodes/positioning). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - DiagramNode groupnode = new DiagramNode(); - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = createNode("node1", 100, 100, "Node1"); - DiagramNode node2 = createNode("node2", 300, 100, "Node2"); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(groupnode); - } - - public DiagramNode createNode(string id, double offx, double offy, string content) - { - DiagramNode node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7" } - }; - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() - { - Color = "white", - Fill = "transparent", - StrokeColor = "None" - }, - }; - node.Annotations = new ObservableCollection() - { - annotation - }; - return node; - } - - private void UpdatePosition() - { - NodeCollection[2].BeginUpdate(); - NodeCollection[2].OffsetX = 500; - NodeCollection[2].OffsetY = 200; - NodeCollection[2].EndUpdate(); - } -} -``` - -## Appearance - -You can change the appearance of the group similar to node. For more information about node appearance, refer to [Appearance](./nodes/appearance). - -## Interaction - -You can edit the group and its children at runtime. We able to interact the group as like the node interaction like resize, rotate and drag. For more information about node interaction, refer to [Interaction](./nodes/interaction). - -## See Also - -* [How to add annotations to the node](./node-annotation) -* [How to add ports to the node](./ports) -* [How to enable/disable the behavior of the node](./constraints) -* [How to add nodes to the symbol palette](./symbol-palette) -* [How to create diagram nodes using drawing tools](./tools) -* [How to perform the interaction on the group](./interaction) \ No newline at end of file diff --git a/blazor/diagram-classic/howTo/blazor-web-assembly-diagram.md b/blazor/diagram-classic/howTo/blazor-web-assembly-diagram.md deleted file mode 100644 index 1a24212300..0000000000 --- a/blazor/diagram-classic/howTo/blazor-web-assembly-diagram.md +++ /dev/null @@ -1,294 +0,0 @@ ---- -layout: post -title: Blazor WebAssembly Diagram in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Blazor WebAssembly Diagram in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Blazor WebAssembly Diagram in Blazor Diagram Component - -This article provides a step-by-step instructions to configure Syncfusion® Blazor Diagram in a simple Blazor WebAssembly application using [Visual Studio 2019](https://visualstudio.microsoft.com/vs/). - -**Note**: Starting with version 17.4.0.39 (2019 Volume 4), you need to include a valid license key (either paid or trial key) within your applications. Refer to this help topic for more information. - -## Prerequisites - -* [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) -* [.NET Core SDK 3.1.3](https://dotnet.microsoft.com/download/dotnet-core/3.1) - -**Note**: .NET Core SDK 3.1.3 requires Visual Studio 2019 16.6 or later. - -Syncfusion® Blazor components are compatible with .NET Core 5.0 Preview 6 and it requires Visual Studio 16.7 Preview 1 or later. - -## Create a Blazor WebAssembly project in Visual Studio 2019 - -1. Install the essential project templates in the Visual Studio 2019 by running the below command line in the command prompt. - - ```bash - dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4 - ``` - -2. Choose **Create a new project** from the Visual Studio dashboard. - - ![new project in aspnetcore blazor](../images/new-project.png) - -3. Select **Blazor App** from the template and click **Next** button. - - ![blazor template](../images/blazor-template.png) - -4. Now, the project configuration window will popup. Click **Create** button to create a new project with the default project configuration. - - ![asp.net core project configuration](../images/project-configuration.png) - -5. Choose **Blazor WebAssembly App** from the dashboard and click **Create** button to create a new Blazor WebAssembly application. Make sure **.NET Core** and **ASP.NET Core 3.1** is selected at the top. - - ![wasm template](../images/blazor-client-template.png) - -**Note**: ASP.NET Core 3.1 is available in Visual Studio 2019 version. - -## Importing Syncfusion® Blazor component in the application - -1. Now, install **Syncfusion.Blazor** NuGet package to the newly created application by using the `NuGet Package Manager`. Right-click the project and select Manage NuGet Packages. - - ![nuget explorer](../images/nuget-explorer.png) - -2. Search **Syncfusion.Blazor** keyword in the Browser tab and install **Syncfusion.Blazor** NuGet package in the application. - - ![select nuget](../images/DiagramPackages.png) - -3. The Syncfusion® Blazor package will be installed in the project, once the installation process is completed. - -4. Install **Syncfusion.EJ2.Blazor** NuGet package to the application using the **NuGet Package Manager**. Ensure to check the Include prerelease option for our Beta release. - -5. You can add the client-side style resources from NuGet package in the `` element of the **~/Pages/_Host.cshtml** page. - -```cshtml - - - - - - -``` - -For Internet Explorer 11 refer the polyfills. Refer the documentation for more information. - -```cshtml - - - - - - - -``` - -## Adding component package to the application - -Open **~/_Imports.razor** file and import the **Syncfusion.Blazor.Diagram** package. - -```cshtml -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Diagrams -``` - -## Add SyncfusionBlazor service in Startup.cs - -Open the **Startup.cs** file and add services required by Syncfusion® components using **services.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows. - -```csharp - using Syncfusion.Blazor; - - namespace BlazorApplication -{ - public class Startup - { - .... - .... - public void ConfigureServices(IServiceCollection services) - { - .... - .... - services.AddSyncfusionBlazor(); - } - } -} - -``` - -**Note**: To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by `AddSyncfusionBlazor(true)` and load the scripts in the **HEAD** element of the **~/Pages/_Host.cshtml** page. - -```cshtml - - - - - - -``` - -## Adding Diagram component to the Application - -Diagram component can be rendered by using the `SfDiagram` tag helper in ASP.NET Core Blazor application. - -The following example shows a basic Diagram component. - -```cshtml - - - -``` - -Adding Nodes and Connectors -Let us create and add a `Nodes` with specific position, size, label and shape. Connect two or more Nodes by using a `Connectors`. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel -@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes -@using DiagramSegments = Syncfusion.Blazor.Diagrams.Segments - -@code -{ -int connectorCount = 0; -// Reference to diagram -SfDiagram diagram; -// Defines diagram's nodes collection -public ObservableCollection NodeCollection { get; set; } -// Defines diagram's connector collection -public ObservableCollection ConnectorCollection { get; set; } -// Defines default values for DiagramNode object -public DiagramNode NodeDefaults { get; set; } -// Defines default values for DiagramConnector object -public DiagramConnector ConnectorDefaults { get; set; } -protected override void OnInitialized() -{ - InitDiagramModel(); -} - -private void InitDiagramModel() -{ - InitDiagramDefaults(); - NodeCollection = new ObservableCollection(); - ConnectorCollection = new ObservableCollection(); - CreateNode("Start", 50, FlowShapes.Terminator, "Start"); - CreateNode("Init", 140, FlowShapes.Process, "var i = 0;'"); - CreateNode("Condition", 230, FlowShapes.Decision, "i < 10?"); - CreateNode("Print", 320, FlowShapes.PreDefinedProcess, "print(\'Hello!!\');"); - CreateNode("Increment", 410, FlowShapes.Process, "i++;"); - CreateNode("End", 500, FlowShapes.Terminator, "End"); - DiagramConnectorSegment rightSegment = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 30, - Direction = Direction.Right - }; - DiagramConnectorSegment bottomSegment = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 300, - Direction = Direction.Bottom - }; - DiagramConnectorSegment leftSegment = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 30, - Direction = Direction.Left - }; - DiagramConnectorSegment topSegment = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 200, - Direction = Direction.Top - }; - CreateConnector("Start", "Init"); - CreateConnector("Init", "Condition"); - CreateConnector("Condition", "Print"); - CreateConnector("Condition", "End", "Yes", rightSegment, bottomSegment); - CreateConnector("Print", "Increment", "No"); - CreateConnector("Increment", "Condition", null, leftSegment, topSegment); - -} -private void CreateConnector(string sourceId, string targetId, string label = default(string), DiagramConnectorSegment rightSegment = null, DiagramConnectorSegment bottomSegment = null) -{ - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = string.Format("connector{0}", ++connectorCount), - SourceID = sourceId, - TargetID = targetId - }; - - if (label != default(string)) -{ - var annotation = new DiagramConnectorAnnotation() - { - Content = label, - Style = new AnnotationStyle() { Fill = "white" } - }; - diagramConnector.Annotations = new ObservableCollection() { annotation }; - } - - if (rightSegment != null) - { - diagramConnector.Segments = new ObservableCollection() { rightSegment, bottomSegment }; - } - - ConnectorCollection.Add(diagramConnector); -} - -private void InitDiagramDefaults() -{ - DiagramNodeAnnotation defaultAnnotation = new DiagramNodeAnnotation() - { - Style = new AnnotationStyle() - { - Color = "white", - Fill = "transparent" - } - }; - NodeDefaults = new DiagramNode() - { - Width = 140, - Height = 50, - OffsetX = 300, - Annotations = new ObservableCollection() { defaultAnnotation }, - Style = new NodeShapeStyle() { Fill = "#357BD2", StrokeColor = "white" } - }; - - ConnectorDefaults = new DiagramConnector() - { - Type = DiagramSegments.Orthogonal, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow, Width = 10, Height = 10 } - }; -} -private void CreateNode(string id, double y, FlowShapes shape, string label, bool positionLabel = false) -{ - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() { Content = label }; - if (positionLabel) - { - annotation.Margin = new NodeAnnotationMargin() { Left = 25, Right = 25 }; - }; - - DiagramNode diagramNode = new DiagramNode() - { - Id = id, - OffsetY = y, - Shape = new DiagramShape() { Type = DiagramShapes.Flow, FlowShape = shape }, - Annotations = new ObservableCollection() { annotation } - }; - NodeCollection.Add(diagramNode); -} -} - -``` - -![flowChart sample image](../images/diagram.png) - -## See Also - -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio 2019 Preview](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) diff --git a/blazor/diagram-classic/howTo/style.md b/blazor/diagram-classic/howTo/style.md deleted file mode 100644 index 260965e1a3..0000000000 --- a/blazor/diagram-classic/howTo/style.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: post -title: Styling And Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Styling And Appearance in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Styling And Appearance in Blazor Diagram Component - -To modify the Diagram appearance, you need to override the default CSS of the Diagram. Find the list of CSS classes in the Diagram. - -| CSS class | Purpose | -|-------|---------| -| .e-diagram-endpoint-handle | Customize the connector endpoint handle. | -| .e-diagram-endpoint-handle.e-connected | Customize the connector endpoint handle when connected. | -| .e-diagram-endpoint-handle.e-disabled | Customize the connector endpoint handle when disabled. | -| .e-diagram-bezier-handle | Customize the bezier connector handle. | -| .e-diagram-bezier-line | Customize the bezier connector line. | -| .e-diagram-resize-handle | Customize the resize handle. | -| .e-diagram-pivot-line | Customize the selector pivot line. | -| .e-diagram-border | Customize the selector border. | -| .e-diagram-rotate-handle | Customize the rotate handle. | -| .e-symbolpalette .e-symbol-hover:hover | Customize the symbol palette while hovering. | -| .e-symbolpalette .e-symbol-selected | Customize the symbol palette when selected. | -| .e-diagram .e-ruler | Customize the ruler. | -| .e-diagram .e-ruler-overlap | Customize the ruler overlap. | -| .e-diagram .e-diagram-text-edit | Customize the text edit. | -| .e-diagram-text-edit::selection | Customize the text edit on selection. | \ No newline at end of file diff --git a/blazor/diagram-classic/images/AcceptingEvent.png b/blazor/diagram-classic/images/AcceptingEvent.png deleted file mode 100644 index 69ec750b1e..0000000000 Binary files a/blazor/diagram-classic/images/AcceptingEvent.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Action.png b/blazor/diagram-classic/images/Action.png deleted file mode 100644 index 6567ff2abd..0000000000 Binary files a/blazor/diagram-classic/images/Action.png and /dev/null differ diff --git a/blazor/diagram-classic/images/AddConnector-Method.gif b/blazor/diagram-classic/images/AddConnector-Method.gif deleted file mode 100644 index 3e53f6d048..0000000000 Binary files a/blazor/diagram-classic/images/AddConnector-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/AddLabel-Method.gif b/blazor/diagram-classic/images/AddLabel-Method.gif deleted file mode 100644 index ec55eed01b..0000000000 Binary files a/blazor/diagram-classic/images/AddLabel-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/AddLayer-Method.gif b/blazor/diagram-classic/images/AddLayer-Method.gif deleted file mode 100644 index e8651a4d53..0000000000 Binary files a/blazor/diagram-classic/images/AddLayer-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/AddNode-Method.gif b/blazor/diagram-classic/images/AddNode-Method.gif deleted file mode 100644 index c3225532a3..0000000000 Binary files a/blazor/diagram-classic/images/AddNode-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/AddPorts-Method.gif b/blazor/diagram-classic/images/AddPorts-Method.gif deleted file mode 100644 index f1512c5ef8..0000000000 Binary files a/blazor/diagram-classic/images/AddPorts-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Aggregation.png b/blazor/diagram-classic/images/Aggregation.png deleted file mode 100644 index 507dcab523..0000000000 Binary files a/blazor/diagram-classic/images/Aggregation.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Align-Method.gif b/blazor/diagram-classic/images/Align-Method.gif deleted file mode 100644 index 5810c02226..0000000000 Binary files a/blazor/diagram-classic/images/Align-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation.png b/blazor/diagram-classic/images/Annotation.png deleted file mode 100644 index a01e083608..0000000000 Binary files a/blazor/diagram-classic/images/Annotation.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Add.png b/blazor/diagram-classic/images/Annotation_Add.png deleted file mode 100644 index f623833b83..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Add.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Drag.gif b/blazor/diagram-classic/images/Annotation_Drag.gif deleted file mode 100644 index 09c3692617..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Drag.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_DragLimit.gif b/blazor/diagram-classic/images/Annotation_DragLimit.gif deleted file mode 100644 index 5c166d71d9..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_DragLimit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Resize.gif b/blazor/diagram-classic/images/Annotation_Resize.gif deleted file mode 100644 index b2c5362f7c..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Resize.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Rotate.gif b/blazor/diagram-classic/images/Annotation_Rotate.gif deleted file mode 100644 index 4ec066b26a..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Rotate.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Selection.png b/blazor/diagram-classic/images/Annotation_Selection.png deleted file mode 100644 index c5b696e3e8..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Selection.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Template.png b/blazor/diagram-classic/images/Annotation_Template.png deleted file mode 100644 index 5fd645aab7..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Template.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_appearance.png b/blazor/diagram-classic/images/Annotation_appearance.png deleted file mode 100644 index 232c430ce5..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_appearance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotations.png b/blazor/diagram-classic/images/Annotations.png deleted file mode 100644 index 0d9d5ff510..0000000000 Binary files a/blazor/diagram-classic/images/Annotations.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Association.png b/blazor/diagram-classic/images/Association.png deleted file mode 100644 index 905f1822e1..0000000000 Binary files a/blazor/diagram-classic/images/Association.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Basic.png b/blazor/diagram-classic/images/Basic.png deleted file mode 100644 index 90a3290881..0000000000 Binary files a/blazor/diagram-classic/images/Basic.png and /dev/null differ diff --git a/blazor/diagram-classic/images/BiDirectional.png b/blazor/diagram-classic/images/BiDirectional.png deleted file mode 100644 index 22b660f019..0000000000 Binary files a/blazor/diagram-classic/images/BiDirectional.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Bridging.png b/blazor/diagram-classic/images/Bridging.png deleted file mode 100644 index bb73d02be5..0000000000 Binary files a/blazor/diagram-classic/images/Bridging.png and /dev/null differ diff --git a/blazor/diagram-classic/images/BringLayerForward-Method.gif b/blazor/diagram-classic/images/BringLayerForward-Method.gif deleted file mode 100644 index 54e107c837..0000000000 Binary files a/blazor/diagram-classic/images/BringLayerForward-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Bussiness.png b/blazor/diagram-classic/images/Bussiness.png deleted file mode 100644 index 539aea2d79..0000000000 Binary files a/blazor/diagram-classic/images/Bussiness.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Call.png b/blazor/diagram-classic/images/Call.png deleted file mode 100644 index 9757733b58..0000000000 Binary files a/blazor/diagram-classic/images/Call.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Cancel1.png b/blazor/diagram-classic/images/Cancel1.png deleted file mode 100644 index 2e7126d1db..0000000000 Binary files a/blazor/diagram-classic/images/Cancel1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Cancel2.png b/blazor/diagram-classic/images/Cancel2.png deleted file mode 100644 index 89f8f03f10..0000000000 Binary files a/blazor/diagram-classic/images/Cancel2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ClassEdit.png b/blazor/diagram-classic/images/ClassEdit.png deleted file mode 100644 index 1489f04a06..0000000000 Binary files a/blazor/diagram-classic/images/ClassEdit.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Clear-Method.gif b/blazor/diagram-classic/images/Clear-Method.gif deleted file mode 100644 index c040b7dbf9..0000000000 Binary files a/blazor/diagram-classic/images/Clear-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Clipboard-Commands.gif b/blazor/diagram-classic/images/Clipboard-Commands.gif deleted file mode 100644 index 052cee6ba0..0000000000 Binary files a/blazor/diagram-classic/images/Clipboard-Commands.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/CloneLayer-Method.gif b/blazor/diagram-classic/images/CloneLayer-Method.gif deleted file mode 100644 index fce83106be..0000000000 Binary files a/blazor/diagram-classic/images/CloneLayer-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Collection.png b/blazor/diagram-classic/images/Collection.png deleted file mode 100644 index c8ab8331dc..0000000000 Binary files a/blazor/diagram-classic/images/Collection.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Commands_img1.png b/blazor/diagram-classic/images/Commands_img1.png deleted file mode 100644 index 2ea8bee8bf..0000000000 Binary files a/blazor/diagram-classic/images/Commands_img1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Commands_img2.png b/blazor/diagram-classic/images/Commands_img2.png deleted file mode 100644 index c791c3c3df..0000000000 Binary files a/blazor/diagram-classic/images/Commands_img2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Commands_img3.png b/blazor/diagram-classic/images/Commands_img3.png deleted file mode 100644 index 75339f514f..0000000000 Binary files a/blazor/diagram-classic/images/Commands_img3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Commands_img4.png b/blazor/diagram-classic/images/Commands_img4.png deleted file mode 100644 index c5d01b21c4..0000000000 Binary files a/blazor/diagram-classic/images/Commands_img4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Compensation1.png b/blazor/diagram-classic/images/Compensation1.png deleted file mode 100644 index 11121cdc06..0000000000 Binary files a/blazor/diagram-classic/images/Compensation1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Compensation2.png b/blazor/diagram-classic/images/Compensation2.png deleted file mode 100644 index 40d0003c43..0000000000 Binary files a/blazor/diagram-classic/images/Compensation2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Compensation3.png b/blazor/diagram-classic/images/Compensation3.png deleted file mode 100644 index 3ab6c6b824..0000000000 Binary files a/blazor/diagram-classic/images/Compensation3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Compensation4.png b/blazor/diagram-classic/images/Compensation4.png deleted file mode 100644 index d9b135a3df..0000000000 Binary files a/blazor/diagram-classic/images/Compensation4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Complex.png b/blazor/diagram-classic/images/Complex.png deleted file mode 100644 index 35bda21355..0000000000 Binary files a/blazor/diagram-classic/images/Complex.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Complex_HierarchicalTree.png b/blazor/diagram-classic/images/Complex_HierarchicalTree.png deleted file mode 100644 index e6b7575470..0000000000 Binary files a/blazor/diagram-classic/images/Complex_HierarchicalTree.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Composition.png b/blazor/diagram-classic/images/Composition.png deleted file mode 100644 index b613fd1ba9..0000000000 Binary files a/blazor/diagram-classic/images/Composition.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional.png b/blazor/diagram-classic/images/Conditional.png deleted file mode 100644 index 6315fd0660..0000000000 Binary files a/blazor/diagram-classic/images/Conditional.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional1.png b/blazor/diagram-classic/images/Conditional1.png deleted file mode 100644 index 8eb0d52f79..0000000000 Binary files a/blazor/diagram-classic/images/Conditional1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional2.png b/blazor/diagram-classic/images/Conditional2.png deleted file mode 100644 index 072c5535df..0000000000 Binary files a/blazor/diagram-classic/images/Conditional2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional3.png b/blazor/diagram-classic/images/Conditional3.png deleted file mode 100644 index 58449928fe..0000000000 Binary files a/blazor/diagram-classic/images/Conditional3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional4.png b/blazor/diagram-classic/images/Conditional4.png deleted file mode 100644 index 2c23770d6f..0000000000 Binary files a/blazor/diagram-classic/images/Conditional4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ConnectorAnnotation_Alignment.png b/blazor/diagram-classic/images/ConnectorAnnotation_Alignment.png deleted file mode 100644 index 3eee1594ba..0000000000 Binary files a/blazor/diagram-classic/images/ConnectorAnnotation_Alignment.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ConnectorAnnotation_Offset.png b/blazor/diagram-classic/images/ConnectorAnnotation_Offset.png deleted file mode 100644 index e9bd012dd2..0000000000 Binary files a/blazor/diagram-classic/images/ConnectorAnnotation_Offset.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ConnectorPadding.png b/blazor/diagram-classic/images/ConnectorPadding.png deleted file mode 100644 index 575ccb53ca..0000000000 Binary files a/blazor/diagram-classic/images/ConnectorPadding.png and /dev/null differ diff --git a/blazor/diagram-classic/images/CornerRadious.png b/blazor/diagram-classic/images/CornerRadious.png deleted file mode 100644 index 1400ff1059..0000000000 Binary files a/blazor/diagram-classic/images/CornerRadious.png and /dev/null differ diff --git a/blazor/diagram-classic/images/CustomContextMenu.gif b/blazor/diagram-classic/images/CustomContextMenu.gif deleted file mode 100644 index c4b7e7f50a..0000000000 Binary files a/blazor/diagram-classic/images/CustomContextMenu.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/CustomRuler.png b/blazor/diagram-classic/images/CustomRuler.png deleted file mode 100644 index 975fb91e1a..0000000000 Binary files a/blazor/diagram-classic/images/CustomRuler.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DataBinding.png b/blazor/diagram-classic/images/DataBinding.png deleted file mode 100644 index 63ac3b36ed..0000000000 Binary files a/blazor/diagram-classic/images/DataBinding.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DataInput.png b/blazor/diagram-classic/images/DataInput.png deleted file mode 100644 index 96592ff89f..0000000000 Binary files a/blazor/diagram-classic/images/DataInput.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DataOutput.png b/blazor/diagram-classic/images/DataOutput.png deleted file mode 100644 index 255394f792..0000000000 Binary files a/blazor/diagram-classic/images/DataOutput.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Dataobject.png b/blazor/diagram-classic/images/Dataobject.png deleted file mode 100644 index c0d2278fa2..0000000000 Binary files a/blazor/diagram-classic/images/Dataobject.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Datasource.png b/blazor/diagram-classic/images/Datasource.png deleted file mode 100644 index d44b70155c..0000000000 Binary files a/blazor/diagram-classic/images/Datasource.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Decision.png b/blazor/diagram-classic/images/Decision.png deleted file mode 100644 index f660872052..0000000000 Binary files a/blazor/diagram-classic/images/Decision.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Decorator.png b/blazor/diagram-classic/images/Decorator.png deleted file mode 100644 index 16479973c4..0000000000 Binary files a/blazor/diagram-classic/images/Decorator.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Default1.png b/blazor/diagram-classic/images/Default1.png deleted file mode 100644 index 29ea4fe63a..0000000000 Binary files a/blazor/diagram-classic/images/Default1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Default2.png b/blazor/diagram-classic/images/Default2.png deleted file mode 100644 index 316b06ec34..0000000000 Binary files a/blazor/diagram-classic/images/Default2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Default3.png b/blazor/diagram-classic/images/Default3.png deleted file mode 100644 index ae76f4da6a..0000000000 Binary files a/blazor/diagram-classic/images/Default3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DefaultBoundary.png b/blazor/diagram-classic/images/DefaultBoundary.png deleted file mode 100644 index 6a588dd273..0000000000 Binary files a/blazor/diagram-classic/images/DefaultBoundary.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DefaultMenuWithCustomMenu.gif b/blazor/diagram-classic/images/DefaultMenuWithCustomMenu.gif deleted file mode 100644 index eb807313f9..0000000000 Binary files a/blazor/diagram-classic/images/DefaultMenuWithCustomMenu.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Dependency.png b/blazor/diagram-classic/images/Dependency.png deleted file mode 100644 index e615f77154..0000000000 Binary files a/blazor/diagram-classic/images/Dependency.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Diagram.png b/blazor/diagram-classic/images/Diagram.png deleted file mode 100644 index 482dbc9ede..0000000000 Binary files a/blazor/diagram-classic/images/Diagram.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Directional1.png b/blazor/diagram-classic/images/Directional1.png deleted file mode 100644 index b7d33f29ad..0000000000 Binary files a/blazor/diagram-classic/images/Directional1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DispalcementAfter0.png b/blazor/diagram-classic/images/DispalcementAfter0.png deleted file mode 100644 index fbbacc1bd0..0000000000 Binary files a/blazor/diagram-classic/images/DispalcementAfter0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DispalcementAfter20.png b/blazor/diagram-classic/images/DispalcementAfter20.png deleted file mode 100644 index 9e3aa5e234..0000000000 Binary files a/blazor/diagram-classic/images/DispalcementAfter20.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DispalcementAfter50.png b/blazor/diagram-classic/images/DispalcementAfter50.png deleted file mode 100644 index d40c688c98..0000000000 Binary files a/blazor/diagram-classic/images/DispalcementAfter50.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Distribute-Method.gif b/blazor/diagram-classic/images/Distribute-Method.gif deleted file mode 100644 index 3ed78c4286..0000000000 Binary files a/blazor/diagram-classic/images/Distribute-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Drag-Method.gif b/blazor/diagram-classic/images/Drag-Method.gif deleted file mode 100644 index 18ba57d158..0000000000 Binary files a/blazor/diagram-classic/images/Drag-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/EEBased.png b/blazor/diagram-classic/images/EEBased.png deleted file mode 100644 index 581f539403..0000000000 Binary files a/blazor/diagram-classic/images/EEBased.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Error1.png b/blazor/diagram-classic/images/Error1.png deleted file mode 100644 index 432151a36f..0000000000 Binary files a/blazor/diagram-classic/images/Error1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Error2.png b/blazor/diagram-classic/images/Error2.png deleted file mode 100644 index 3c095ab3fe..0000000000 Binary files a/blazor/diagram-classic/images/Error2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Error3.png b/blazor/diagram-classic/images/Error3.png deleted file mode 100644 index c41632701a..0000000000 Binary files a/blazor/diagram-classic/images/Error3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation1.png b/blazor/diagram-classic/images/Esclation1.png deleted file mode 100644 index 8413ec4a78..0000000000 Binary files a/blazor/diagram-classic/images/Esclation1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation2.png b/blazor/diagram-classic/images/Esclation2.png deleted file mode 100644 index 62865932aa..0000000000 Binary files a/blazor/diagram-classic/images/Esclation2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation3.png b/blazor/diagram-classic/images/Esclation3.png deleted file mode 100644 index 1c4fac9bd8..0000000000 Binary files a/blazor/diagram-classic/images/Esclation3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation4.png b/blazor/diagram-classic/images/Esclation4.png deleted file mode 100644 index 711f5c097e..0000000000 Binary files a/blazor/diagram-classic/images/Esclation4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation5.png b/blazor/diagram-classic/images/Esclation5.png deleted file mode 100644 index 696cbff747..0000000000 Binary files a/blazor/diagram-classic/images/Esclation5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation6.png b/blazor/diagram-classic/images/Esclation6.png deleted file mode 100644 index d2cfb1a1f8..0000000000 Binary files a/blazor/diagram-classic/images/Esclation6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Event.png b/blazor/diagram-classic/images/Event.png deleted file mode 100644 index 3ae79b22ac..0000000000 Binary files a/blazor/diagram-classic/images/Event.png and /dev/null differ diff --git a/blazor/diagram-classic/images/EventBased.png b/blazor/diagram-classic/images/EventBased.png deleted file mode 100644 index 0d6f7c9057..0000000000 Binary files a/blazor/diagram-classic/images/EventBased.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Eventtask.png b/blazor/diagram-classic/images/Eventtask.png deleted file mode 100644 index 3dfad0f810..0000000000 Binary files a/blazor/diagram-classic/images/Eventtask.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Exclusive.png b/blazor/diagram-classic/images/Exclusive.png deleted file mode 100644 index f6f7ec1bab..0000000000 Binary files a/blazor/diagram-classic/images/Exclusive.png and /dev/null differ diff --git a/blazor/diagram-classic/images/FinalNode.png b/blazor/diagram-classic/images/FinalNode.png deleted file mode 100644 index 990ac1e268..0000000000 Binary files a/blazor/diagram-classic/images/FinalNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/FitToPage-Method.gif b/blazor/diagram-classic/images/FitToPage-Method.gif deleted file mode 100644 index 51f4a6c5ce..0000000000 Binary files a/blazor/diagram-classic/images/FitToPage-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/FlowShapes.png b/blazor/diagram-classic/images/FlowShapes.png deleted file mode 100644 index be2d8dc808..0000000000 Binary files a/blazor/diagram-classic/images/FlowShapes.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ForkNode.png b/blazor/diagram-classic/images/ForkNode.png deleted file mode 100644 index 6ca233de0d..0000000000 Binary files a/blazor/diagram-classic/images/ForkNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Gateway.png b/blazor/diagram-classic/images/Gateway.png deleted file mode 100644 index 69edd3e4d9..0000000000 Binary files a/blazor/diagram-classic/images/Gateway.png and /dev/null differ diff --git a/blazor/diagram-classic/images/GetConnector-Method.gif b/blazor/diagram-classic/images/GetConnector-Method.gif deleted file mode 100644 index a1b3fc36df..0000000000 Binary files a/blazor/diagram-classic/images/GetConnector-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/GetEdges-Method.gif b/blazor/diagram-classic/images/GetEdges-Method.gif deleted file mode 100644 index 345b267185..0000000000 Binary files a/blazor/diagram-classic/images/GetEdges-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/GetNode-Method.gif b/blazor/diagram-classic/images/GetNode-Method.gif deleted file mode 100644 index a5008e8d7d..0000000000 Binary files a/blazor/diagram-classic/images/GetNode-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/GetParentId-Method.gif b/blazor/diagram-classic/images/GetParentId-Method.gif deleted file mode 100644 index 44596622ff..0000000000 Binary files a/blazor/diagram-classic/images/GetParentId-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Gridlines.png b/blazor/diagram-classic/images/Gridlines.png deleted file mode 100644 index a534b1a204..0000000000 Binary files a/blazor/diagram-classic/images/Gridlines.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Group.png b/blazor/diagram-classic/images/Group.png deleted file mode 100644 index acf68a676b..0000000000 Binary files a/blazor/diagram-classic/images/Group.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Grouping-Commands.gif b/blazor/diagram-classic/images/Grouping-Commands.gif deleted file mode 100644 index b299e5f463..0000000000 Binary files a/blazor/diagram-classic/images/Grouping-Commands.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/HBalance.png b/blazor/diagram-classic/images/HBalance.png deleted file mode 100644 index cd068dbe32..0000000000 Binary files a/blazor/diagram-classic/images/HBalance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/HCenter.png b/blazor/diagram-classic/images/HCenter.png deleted file mode 100644 index fd0a983e07..0000000000 Binary files a/blazor/diagram-classic/images/HCenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/HLeft.png b/blazor/diagram-classic/images/HLeft.png deleted file mode 100644 index ce803b2196..0000000000 Binary files a/blazor/diagram-classic/images/HLeft.png and /dev/null differ diff --git a/blazor/diagram-classic/images/HRight.png b/blazor/diagram-classic/images/HRight.png deleted file mode 100644 index 1168525713..0000000000 Binary files a/blazor/diagram-classic/images/HRight.png and /dev/null differ diff --git a/blazor/diagram-classic/images/HierarchicalTree.png b/blazor/diagram-classic/images/HierarchicalTree.png deleted file mode 100644 index e037407dfb..0000000000 Binary files a/blazor/diagram-classic/images/HierarchicalTree.png and /dev/null differ diff --git a/blazor/diagram-classic/images/History-Methods.gif b/blazor/diagram-classic/images/History-Methods.gif deleted file mode 100644 index b04b681cd3..0000000000 Binary files a/blazor/diagram-classic/images/History-Methods.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Htmlnode.png b/blazor/diagram-classic/images/Htmlnode.png deleted file mode 100644 index 7ae8aa3548..0000000000 Binary files a/blazor/diagram-classic/images/Htmlnode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/IMessage.png b/blazor/diagram-classic/images/IMessage.png deleted file mode 100644 index dcc3c38623..0000000000 Binary files a/blazor/diagram-classic/images/IMessage.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Image1.png b/blazor/diagram-classic/images/Image1.png deleted file mode 100644 index 93a7ad4b0e..0000000000 Binary files a/blazor/diagram-classic/images/Image1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Image2.png b/blazor/diagram-classic/images/Image2.png deleted file mode 100644 index 61f0328f89..0000000000 Binary files a/blazor/diagram-classic/images/Image2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Image3.png b/blazor/diagram-classic/images/Image3.png deleted file mode 100644 index 28e45304e0..0000000000 Binary files a/blazor/diagram-classic/images/Image3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Image4.png b/blazor/diagram-classic/images/Image4.png deleted file mode 100644 index e8091b5c4a..0000000000 Binary files a/blazor/diagram-classic/images/Image4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Imagenode.png b/blazor/diagram-classic/images/Imagenode.png deleted file mode 100644 index d0d052fa01..0000000000 Binary files a/blazor/diagram-classic/images/Imagenode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Inclusive.png b/blazor/diagram-classic/images/Inclusive.png deleted file mode 100644 index 04873a65cd..0000000000 Binary files a/blazor/diagram-classic/images/Inclusive.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Inheritance.png b/blazor/diagram-classic/images/Inheritance.png deleted file mode 100644 index 317c9628d2..0000000000 Binary files a/blazor/diagram-classic/images/Inheritance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/InitialNode.png b/blazor/diagram-classic/images/InitialNode.png deleted file mode 100644 index ea3c391d3f..0000000000 Binary files a/blazor/diagram-classic/images/InitialNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/InsService.png b/blazor/diagram-classic/images/InsService.png deleted file mode 100644 index ba04688e31..0000000000 Binary files a/blazor/diagram-classic/images/InsService.png and /dev/null differ diff --git a/blazor/diagram-classic/images/JoinNode.png b/blazor/diagram-classic/images/JoinNode.png deleted file mode 100644 index 4e81fdcf6c..0000000000 Binary files a/blazor/diagram-classic/images/JoinNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label1.png b/blazor/diagram-classic/images/Label1.png deleted file mode 100644 index 64bf449c1f..0000000000 Binary files a/blazor/diagram-classic/images/Label1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label2.png b/blazor/diagram-classic/images/Label2.png deleted file mode 100644 index e313b2a2bd..0000000000 Binary files a/blazor/diagram-classic/images/Label2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label3.png b/blazor/diagram-classic/images/Label3.png deleted file mode 100644 index 4ac7062f84..0000000000 Binary files a/blazor/diagram-classic/images/Label3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label4.png b/blazor/diagram-classic/images/Label4.png deleted file mode 100644 index 9bbe7db558..0000000000 Binary files a/blazor/diagram-classic/images/Label4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label5.png b/blazor/diagram-classic/images/Label5.png deleted file mode 100644 index dd6f763896..0000000000 Binary files a/blazor/diagram-classic/images/Label5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label6.png b/blazor/diagram-classic/images/Label6.png deleted file mode 100644 index 468f4578d6..0000000000 Binary files a/blazor/diagram-classic/images/Label6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label7.png b/blazor/diagram-classic/images/Label7.png deleted file mode 100644 index 648c2da882..0000000000 Binary files a/blazor/diagram-classic/images/Label7.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label8.png b/blazor/diagram-classic/images/Label8.png deleted file mode 100644 index 395a601597..0000000000 Binary files a/blazor/diagram-classic/images/Label8.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label9.png b/blazor/diagram-classic/images/Label9.png deleted file mode 100644 index a97aec1ee2..0000000000 Binary files a/blazor/diagram-classic/images/Label9.png and /dev/null differ diff --git a/blazor/diagram-classic/images/LineRouting.gif b/blazor/diagram-classic/images/LineRouting.gif deleted file mode 100644 index 841dd4a791..0000000000 Binary files a/blazor/diagram-classic/images/LineRouting.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Link1.png b/blazor/diagram-classic/images/Link1.png deleted file mode 100644 index 34fca2e1b8..0000000000 Binary files a/blazor/diagram-classic/images/Link1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Link2.png b/blazor/diagram-classic/images/Link2.png deleted file mode 100644 index 912313af43..0000000000 Binary files a/blazor/diagram-classic/images/Link2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Manual.png b/blazor/diagram-classic/images/Manual.png deleted file mode 100644 index 3883913c0a..0000000000 Binary files a/blazor/diagram-classic/images/Manual.png and /dev/null differ diff --git a/blazor/diagram-classic/images/MergeNode.png b/blazor/diagram-classic/images/MergeNode.png deleted file mode 100644 index b946442eeb..0000000000 Binary files a/blazor/diagram-classic/images/MergeNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message.png b/blazor/diagram-classic/images/Message.png deleted file mode 100644 index 534d9107b4..0000000000 Binary files a/blazor/diagram-classic/images/Message.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message1.png b/blazor/diagram-classic/images/Message1.png deleted file mode 100644 index e8afcf852f..0000000000 Binary files a/blazor/diagram-classic/images/Message1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message2.png b/blazor/diagram-classic/images/Message2.png deleted file mode 100644 index 675070903f..0000000000 Binary files a/blazor/diagram-classic/images/Message2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message3.png b/blazor/diagram-classic/images/Message3.png deleted file mode 100644 index e4133af1eb..0000000000 Binary files a/blazor/diagram-classic/images/Message3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message4.png b/blazor/diagram-classic/images/Message4.png deleted file mode 100644 index 0bf851b786..0000000000 Binary files a/blazor/diagram-classic/images/Message4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message5.png b/blazor/diagram-classic/images/Message5.png deleted file mode 100644 index 1260c1e19e..0000000000 Binary files a/blazor/diagram-classic/images/Message5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message6.png b/blazor/diagram-classic/images/Message6.png deleted file mode 100644 index 7a5ec80144..0000000000 Binary files a/blazor/diagram-classic/images/Message6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple1.png b/blazor/diagram-classic/images/Multiple1.png deleted file mode 100644 index ba0a4bd67f..0000000000 Binary files a/blazor/diagram-classic/images/Multiple1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple2.png b/blazor/diagram-classic/images/Multiple2.png deleted file mode 100644 index d88f8dc9a2..0000000000 Binary files a/blazor/diagram-classic/images/Multiple2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple3.png b/blazor/diagram-classic/images/Multiple3.png deleted file mode 100644 index 7a51bc302f..0000000000 Binary files a/blazor/diagram-classic/images/Multiple3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple4.png b/blazor/diagram-classic/images/Multiple4.png deleted file mode 100644 index 142c29b915..0000000000 Binary files a/blazor/diagram-classic/images/Multiple4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple5.png b/blazor/diagram-classic/images/Multiple5.png deleted file mode 100644 index 2f00224999..0000000000 Binary files a/blazor/diagram-classic/images/Multiple5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple6.png b/blazor/diagram-classic/images/Multiple6.png deleted file mode 100644 index d3941e73fb..0000000000 Binary files a/blazor/diagram-classic/images/Multiple6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/NIMessage.png b/blazor/diagram-classic/images/NIMessage.png deleted file mode 100644 index d79be625ec..0000000000 Binary files a/blazor/diagram-classic/images/NIMessage.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Native1.png b/blazor/diagram-classic/images/Native1.png deleted file mode 100644 index 2ddf4aa068..0000000000 Binary files a/blazor/diagram-classic/images/Native1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Native2.png b/blazor/diagram-classic/images/Native2.png deleted file mode 100644 index 71c51b8855..0000000000 Binary files a/blazor/diagram-classic/images/Native2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Native3.png b/blazor/diagram-classic/images/Native3.png deleted file mode 100644 index d4743727a9..0000000000 Binary files a/blazor/diagram-classic/images/Native3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Native4.png b/blazor/diagram-classic/images/Native4.png deleted file mode 100644 index 9efb9dd9b4..0000000000 Binary files a/blazor/diagram-classic/images/Native4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/NodeToNodeConnection.png b/blazor/diagram-classic/images/NodeToNodeConnection.png deleted file mode 100644 index 49603f0775..0000000000 Binary files a/blazor/diagram-classic/images/NodeToNodeConnection.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Node_Connection.gif b/blazor/diagram-classic/images/Node_Connection.gif deleted file mode 100644 index ba63de5ee8..0000000000 Binary files a/blazor/diagram-classic/images/Node_Connection.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Node_RunTimeConnection.gif b/blazor/diagram-classic/images/Node_RunTimeConnection.gif deleted file mode 100644 index f4621c805d..0000000000 Binary files a/blazor/diagram-classic/images/Node_RunTimeConnection.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Nodeport.png b/blazor/diagram-classic/images/Nodeport.png deleted file mode 100644 index b473e1ca23..0000000000 Binary files a/blazor/diagram-classic/images/Nodeport.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None1.png b/blazor/diagram-classic/images/None1.png deleted file mode 100644 index 256916f619..0000000000 Binary files a/blazor/diagram-classic/images/None1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None2.png b/blazor/diagram-classic/images/None2.png deleted file mode 100644 index 7f72472715..0000000000 Binary files a/blazor/diagram-classic/images/None2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None3.png b/blazor/diagram-classic/images/None3.png deleted file mode 100644 index 92c9b2cc7c..0000000000 Binary files a/blazor/diagram-classic/images/None3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None4.png b/blazor/diagram-classic/images/None4.png deleted file mode 100644 index e1d746354a..0000000000 Binary files a/blazor/diagram-classic/images/None4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None5.png b/blazor/diagram-classic/images/None5.png deleted file mode 100644 index d6ffae9503..0000000000 Binary files a/blazor/diagram-classic/images/None5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Normal.png b/blazor/diagram-classic/images/Normal.png deleted file mode 100644 index d3e52f428e..0000000000 Binary files a/blazor/diagram-classic/images/Normal.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Note.png b/blazor/diagram-classic/images/Note.png deleted file mode 100644 index 85139e4b09..0000000000 Binary files a/blazor/diagram-classic/images/Note.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Nudge-Method.gif b/blazor/diagram-classic/images/Nudge-Method.gif deleted file mode 100644 index 4bc4b36bd5..0000000000 Binary files a/blazor/diagram-classic/images/Nudge-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset.jpg b/blazor/diagram-classic/images/Offset.jpg deleted file mode 100644 index 1e04c4aaf8..0000000000 Binary files a/blazor/diagram-classic/images/Offset.jpg and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset0,0.png b/blazor/diagram-classic/images/Offset0,0.png deleted file mode 100644 index d207270630..0000000000 Binary files a/blazor/diagram-classic/images/Offset0,0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset0,1.png b/blazor/diagram-classic/images/Offset0,1.png deleted file mode 100644 index cb83e2fcff..0000000000 Binary files a/blazor/diagram-classic/images/Offset0,1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset0,5.png b/blazor/diagram-classic/images/Offset0,5.png deleted file mode 100644 index c656af594b..0000000000 Binary files a/blazor/diagram-classic/images/Offset0,5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset1,0.png b/blazor/diagram-classic/images/Offset1,0.png deleted file mode 100644 index e3b4fcd28b..0000000000 Binary files a/blazor/diagram-classic/images/Offset1,0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset1,1.png b/blazor/diagram-classic/images/Offset1,1.png deleted file mode 100644 index 304340ae6c..0000000000 Binary files a/blazor/diagram-classic/images/Offset1,1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset1,5.png b/blazor/diagram-classic/images/Offset1,5.png deleted file mode 100644 index 3400b5bfeb..0000000000 Binary files a/blazor/diagram-classic/images/Offset1,5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset5,0.png b/blazor/diagram-classic/images/Offset5,0.png deleted file mode 100644 index 0412a17a3d..0000000000 Binary files a/blazor/diagram-classic/images/Offset5,0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset5,1.png b/blazor/diagram-classic/images/Offset5,1.png deleted file mode 100644 index f2e3e198f2..0000000000 Binary files a/blazor/diagram-classic/images/Offset5,1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset5,5.png b/blazor/diagram-classic/images/Offset5,5.png deleted file mode 100644 index 8940cc601d..0000000000 Binary files a/blazor/diagram-classic/images/Offset5,5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Order-Commands.gif b/blazor/diagram-classic/images/Order-Commands.gif deleted file mode 100644 index 9ba61aaeda..0000000000 Binary files a/blazor/diagram-classic/images/Order-Commands.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Orgchart.png b/blazor/diagram-classic/images/Orgchart.png deleted file mode 100644 index f71c8b836f..0000000000 Binary files a/blazor/diagram-classic/images/Orgchart.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Overview.png b/blazor/diagram-classic/images/Overview.png deleted file mode 100644 index f5cea6e104..0000000000 Binary files a/blazor/diagram-classic/images/Overview.png and /dev/null differ diff --git a/blazor/diagram-classic/images/PEBased.png b/blazor/diagram-classic/images/PEBased.png deleted file mode 100644 index 7904255ba5..0000000000 Binary files a/blazor/diagram-classic/images/PEBased.png and /dev/null differ diff --git a/blazor/diagram-classic/images/PMultiInstance1.png b/blazor/diagram-classic/images/PMultiInstance1.png deleted file mode 100644 index eb196b7e39..0000000000 Binary files a/blazor/diagram-classic/images/PMultiInstance1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/PMultiInstance2.png b/blazor/diagram-classic/images/PMultiInstance2.png deleted file mode 100644 index d694e09554..0000000000 Binary files a/blazor/diagram-classic/images/PMultiInstance2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Padding.png b/blazor/diagram-classic/images/Padding.png deleted file mode 100644 index 575ccb53ca..0000000000 Binary files a/blazor/diagram-classic/images/Padding.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Pagesetting.png b/blazor/diagram-classic/images/Pagesetting.png deleted file mode 100644 index 451d68e724..0000000000 Binary files a/blazor/diagram-classic/images/Pagesetting.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Pan-Method.gif b/blazor/diagram-classic/images/Pan-Method.gif deleted file mode 100644 index 1b49e50b36..0000000000 Binary files a/blazor/diagram-classic/images/Pan-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel.png b/blazor/diagram-classic/images/Parallel.png deleted file mode 100644 index 0d3abd05aa..0000000000 Binary files a/blazor/diagram-classic/images/Parallel.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel1.png b/blazor/diagram-classic/images/Parallel1.png deleted file mode 100644 index 66cade80c0..0000000000 Binary files a/blazor/diagram-classic/images/Parallel1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel2.png b/blazor/diagram-classic/images/Parallel2.png deleted file mode 100644 index 745e23e515..0000000000 Binary files a/blazor/diagram-classic/images/Parallel2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel3.png b/blazor/diagram-classic/images/Parallel3.png deleted file mode 100644 index 4219c018a8..0000000000 Binary files a/blazor/diagram-classic/images/Parallel3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel4.png b/blazor/diagram-classic/images/Parallel4.png deleted file mode 100644 index 88af28880b..0000000000 Binary files a/blazor/diagram-classic/images/Parallel4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Port1.png b/blazor/diagram-classic/images/Port1.png deleted file mode 100644 index 5e8077872b..0000000000 Binary files a/blazor/diagram-classic/images/Port1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Port3.png b/blazor/diagram-classic/images/Port3.png deleted file mode 100644 index 6665150cd3..0000000000 Binary files a/blazor/diagram-classic/images/Port3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/PortToPortConnection.png b/blazor/diagram-classic/images/PortToPortConnection.png deleted file mode 100644 index b835c0d968..0000000000 Binary files a/blazor/diagram-classic/images/PortToPortConnection.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Receive.png b/blazor/diagram-classic/images/Receive.png deleted file mode 100644 index f4c46efa91..0000000000 Binary files a/blazor/diagram-classic/images/Receive.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ReceiveSignal.png b/blazor/diagram-classic/images/ReceiveSignal.png deleted file mode 100644 index ab6d696ecc..0000000000 Binary files a/blazor/diagram-classic/images/ReceiveSignal.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Remove-Obj-Method.gif b/blazor/diagram-classic/images/Remove-Obj-Method.gif deleted file mode 100644 index 3cc82da065..0000000000 Binary files a/blazor/diagram-classic/images/Remove-Obj-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/RemoveLabel-Method.gif b/blazor/diagram-classic/images/RemoveLabel-Method.gif deleted file mode 100644 index 373be284b1..0000000000 Binary files a/blazor/diagram-classic/images/RemoveLabel-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/RemoveLayer-Method.gif b/blazor/diagram-classic/images/RemoveLayer-Method.gif deleted file mode 100644 index 1379371c66..0000000000 Binary files a/blazor/diagram-classic/images/RemoveLayer-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/RemovePorts-Method.gif b/blazor/diagram-classic/images/RemovePorts-Method.gif deleted file mode 100644 index e51249f974..0000000000 Binary files a/blazor/diagram-classic/images/RemovePorts-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/ResetSegments-Method.gif b/blazor/diagram-classic/images/ResetSegments-Method.gif deleted file mode 100644 index 7d20a2d286..0000000000 Binary files a/blazor/diagram-classic/images/ResetSegments-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Resize-Method.gif b/blazor/diagram-classic/images/Resize-Method.gif deleted file mode 100644 index 525f41a098..0000000000 Binary files a/blazor/diagram-classic/images/Resize-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Rotate-Method.gif b/blazor/diagram-classic/images/Rotate-Method.gif deleted file mode 100644 index 22f60e7d0e..0000000000 Binary files a/blazor/diagram-classic/images/Rotate-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Ruler.png b/blazor/diagram-classic/images/Ruler.png deleted file mode 100644 index 3e93512776..0000000000 Binary files a/blazor/diagram-classic/images/Ruler.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Save-and-Load-Method.gif b/blazor/diagram-classic/images/Save-and-Load-Method.gif deleted file mode 100644 index d6da5bd01b..0000000000 Binary files a/blazor/diagram-classic/images/Save-and-Load-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Script.png b/blazor/diagram-classic/images/Script.png deleted file mode 100644 index 2adb6b1567..0000000000 Binary files a/blazor/diagram-classic/images/Script.png and /dev/null differ diff --git a/blazor/diagram-classic/images/SegmentAngle_False.png b/blazor/diagram-classic/images/SegmentAngle_False.png deleted file mode 100644 index c44ac23380..0000000000 Binary files a/blazor/diagram-classic/images/SegmentAngle_False.png and /dev/null differ diff --git a/blazor/diagram-classic/images/SegmentAngle_True.png b/blazor/diagram-classic/images/SegmentAngle_True.png deleted file mode 100644 index 880229f7bd..0000000000 Binary files a/blazor/diagram-classic/images/SegmentAngle_True.png and /dev/null differ diff --git a/blazor/diagram-classic/images/SegmentStyle.png b/blazor/diagram-classic/images/SegmentStyle.png deleted file mode 100644 index 8f3cb49259..0000000000 Binary files a/blazor/diagram-classic/images/SegmentStyle.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Selection-Methods.gif b/blazor/diagram-classic/images/Selection-Methods.gif deleted file mode 100644 index 070064aee4..0000000000 Binary files a/blazor/diagram-classic/images/Selection-Methods.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Send.png b/blazor/diagram-classic/images/Send.png deleted file mode 100644 index 296a20defb..0000000000 Binary files a/blazor/diagram-classic/images/Send.png and /dev/null differ diff --git a/blazor/diagram-classic/images/SendLayerBackward-Method.gif b/blazor/diagram-classic/images/SendLayerBackward-Method.gif deleted file mode 100644 index 6dd2cc1162..0000000000 Binary files a/blazor/diagram-classic/images/SendLayerBackward-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/SendSignal.png b/blazor/diagram-classic/images/SendSignal.png deleted file mode 100644 index 6432f0736c..0000000000 Binary files a/blazor/diagram-classic/images/SendSignal.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Sequence1.png b/blazor/diagram-classic/images/Sequence1.png deleted file mode 100644 index 594b895fdc..0000000000 Binary files a/blazor/diagram-classic/images/Sequence1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Sequence2.png b/blazor/diagram-classic/images/Sequence2.png deleted file mode 100644 index 693c900389..0000000000 Binary files a/blazor/diagram-classic/images/Sequence2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Service.png b/blazor/diagram-classic/images/Service.png deleted file mode 100644 index a1e2fca7a1..0000000000 Binary files a/blazor/diagram-classic/images/Service.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Shadow.png b/blazor/diagram-classic/images/Shadow.png deleted file mode 100644 index 411c77e69f..0000000000 Binary files a/blazor/diagram-classic/images/Shadow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal1.png b/blazor/diagram-classic/images/Signal1.png deleted file mode 100644 index 148b24256e..0000000000 Binary files a/blazor/diagram-classic/images/Signal1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal2.png b/blazor/diagram-classic/images/Signal2.png deleted file mode 100644 index 854f79358b..0000000000 Binary files a/blazor/diagram-classic/images/Signal2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal3.png b/blazor/diagram-classic/images/Signal3.png deleted file mode 100644 index 330353da14..0000000000 Binary files a/blazor/diagram-classic/images/Signal3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal4.png b/blazor/diagram-classic/images/Signal4.png deleted file mode 100644 index 3d4257347f..0000000000 Binary files a/blazor/diagram-classic/images/Signal4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal5.png b/blazor/diagram-classic/images/Signal5.png deleted file mode 100644 index 4af1a1d293..0000000000 Binary files a/blazor/diagram-classic/images/Signal5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal6.png b/blazor/diagram-classic/images/Signal6.png deleted file mode 100644 index 09f97b449b..0000000000 Binary files a/blazor/diagram-classic/images/Signal6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Sizing-Commands-Method.gif b/blazor/diagram-classic/images/Sizing-Commands-Method.gif deleted file mode 100644 index 98010e7296..0000000000 Binary files a/blazor/diagram-classic/images/Sizing-Commands-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Standard1.png b/blazor/diagram-classic/images/Standard1.png deleted file mode 100644 index efcfd2f381..0000000000 Binary files a/blazor/diagram-classic/images/Standard1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Standard2.png b/blazor/diagram-classic/images/Standard2.png deleted file mode 100644 index e1733b16c9..0000000000 Binary files a/blazor/diagram-classic/images/Standard2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/StartTextEdit-Method.gif b/blazor/diagram-classic/images/StartTextEdit-Method.gif deleted file mode 100644 index 3ce0d38f47..0000000000 Binary files a/blazor/diagram-classic/images/StartTextEdit-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/StriaghtSegment.gif b/blazor/diagram-classic/images/StriaghtSegment.gif deleted file mode 100644 index b794274860..0000000000 Binary files a/blazor/diagram-classic/images/StriaghtSegment.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/StructuredNode.png b/blazor/diagram-classic/images/StructuredNode.png deleted file mode 100644 index 2b9a04f7a7..0000000000 Binary files a/blazor/diagram-classic/images/StructuredNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Symbolpalette.png b/blazor/diagram-classic/images/Symbolpalette.png deleted file mode 100644 index b47e67c3fa..0000000000 Binary files a/blazor/diagram-classic/images/Symbolpalette.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Task.png b/blazor/diagram-classic/images/Task.png deleted file mode 100644 index ae2f357836..0000000000 Binary files a/blazor/diagram-classic/images/Task.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Termination1.png b/blazor/diagram-classic/images/Termination1.png deleted file mode 100644 index d296cefb89..0000000000 Binary files a/blazor/diagram-classic/images/Termination1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Textnode.png b/blazor/diagram-classic/images/Textnode.png deleted file mode 100644 index 2b1ec9404f..0000000000 Binary files a/blazor/diagram-classic/images/Textnode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/TimeEvent.png b/blazor/diagram-classic/images/TimeEvent.png deleted file mode 100644 index a17605f79e..0000000000 Binary files a/blazor/diagram-classic/images/TimeEvent.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Timer1.png b/blazor/diagram-classic/images/Timer1.png deleted file mode 100644 index 5730521ce9..0000000000 Binary files a/blazor/diagram-classic/images/Timer1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Timer2.png b/blazor/diagram-classic/images/Timer2.png deleted file mode 100644 index 5a93e5975f..0000000000 Binary files a/blazor/diagram-classic/images/Timer2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Timer3.png b/blazor/diagram-classic/images/Timer3.png deleted file mode 100644 index 17dd568710..0000000000 Binary files a/blazor/diagram-classic/images/Timer3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Timer4.png b/blazor/diagram-classic/images/Timer4.png deleted file mode 100644 index 7c0105d657..0000000000 Binary files a/blazor/diagram-classic/images/Timer4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Tooltip_img1.png b/blazor/diagram-classic/images/Tooltip_img1.png deleted file mode 100644 index 6f5c07e37c..0000000000 Binary files a/blazor/diagram-classic/images/Tooltip_img1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Tooltip_img2.png b/blazor/diagram-classic/images/Tooltip_img2.png deleted file mode 100644 index 92b0b0cd55..0000000000 Binary files a/blazor/diagram-classic/images/Tooltip_img2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Tooltip_img3.png b/blazor/diagram-classic/images/Tooltip_img3.png deleted file mode 100644 index cb7fb3903c..0000000000 Binary files a/blazor/diagram-classic/images/Tooltip_img3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/User.png b/blazor/diagram-classic/images/User.png deleted file mode 100644 index 80ab152019..0000000000 Binary files a/blazor/diagram-classic/images/User.png and /dev/null differ diff --git a/blazor/diagram-classic/images/VAlternate.png b/blazor/diagram-classic/images/VAlternate.png deleted file mode 100644 index f484415f55..0000000000 Binary files a/blazor/diagram-classic/images/VAlternate.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Vertical_Flip.png b/blazor/diagram-classic/images/Vertical_Flip.png deleted file mode 100644 index b4dd67e634..0000000000 Binary files a/blazor/diagram-classic/images/Vertical_Flip.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Wrap1.png b/blazor/diagram-classic/images/Wrap1.png deleted file mode 100644 index e321aab817..0000000000 Binary files a/blazor/diagram-classic/images/Wrap1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Wrap2.png b/blazor/diagram-classic/images/Wrap2.png deleted file mode 100644 index fc6e2d6dbb..0000000000 Binary files a/blazor/diagram-classic/images/Wrap2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Wrap3.png b/blazor/diagram-classic/images/Wrap3.png deleted file mode 100644 index 9a33074d61..0000000000 Binary files a/blazor/diagram-classic/images/Wrap3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Zoom-Method.gif b/blazor/diagram-classic/images/Zoom-Method.gif deleted file mode 100644 index 5027e0f2bf..0000000000 Binary files a/blazor/diagram-classic/images/Zoom-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Zoom-pan.gif b/blazor/diagram-classic/images/Zoom-pan.gif deleted file mode 100644 index 07e235a78b..0000000000 Binary files a/blazor/diagram-classic/images/Zoom-pan.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/after_1.png b/blazor/diagram-classic/images/after_1.png deleted file mode 100644 index 33fc07e25f..0000000000 Binary files a/blazor/diagram-classic/images/after_1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port1.png b/blazor/diagram-classic/images/aligment_port1.png deleted file mode 100644 index a5a7294bfc..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port2.png b/blazor/diagram-classic/images/aligment_port2.png deleted file mode 100644 index e8b048b200..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port3.png b/blazor/diagram-classic/images/aligment_port3.png deleted file mode 100644 index b9d789dcb8..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port4.png b/blazor/diagram-classic/images/aligment_port4.png deleted file mode 100644 index 196645fd0f..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port5.png b/blazor/diagram-classic/images/aligment_port5.png deleted file mode 100644 index 25f1acd3da..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port6.png b/blazor/diagram-classic/images/aligment_port6.png deleted file mode 100644 index ec990728b0..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port7.png b/blazor/diagram-classic/images/aligment_port7.png deleted file mode 100644 index 44fdbc7f1a..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port7.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port8.png b/blazor/diagram-classic/images/aligment_port8.png deleted file mode 100644 index 1e30ef61ce..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port8.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port9.png b/blazor/diagram-classic/images/aligment_port9.png deleted file mode 100644 index a08eb4b1f9..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port9.png and /dev/null differ diff --git a/blazor/diagram-classic/images/base64.jpg b/blazor/diagram-classic/images/base64.jpg deleted file mode 100644 index bdabe0e512..0000000000 Binary files a/blazor/diagram-classic/images/base64.jpg and /dev/null differ diff --git a/blazor/diagram-classic/images/before_0.png b/blazor/diagram-classic/images/before_0.png deleted file mode 100644 index 4e939363c6..0000000000 Binary files a/blazor/diagram-classic/images/before_0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bezier-segement-thumb.gif b/blazor/diagram-classic/images/bezier-segement-thumb.gif deleted file mode 100644 index f4373b2701..0000000000 Binary files a/blazor/diagram-classic/images/bezier-segement-thumb.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/bottomcenter.png b/blazor/diagram-classic/images/bottomcenter.png deleted file mode 100644 index dbb1a4f134..0000000000 Binary files a/blazor/diagram-classic/images/bottomcenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bottomleft.png b/blazor/diagram-classic/images/bottomleft.png deleted file mode 100644 index 18c68332ab..0000000000 Binary files a/blazor/diagram-classic/images/bottomleft.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bottomright.png b/blazor/diagram-classic/images/bottomright.png deleted file mode 100644 index a23d332d04..0000000000 Binary files a/blazor/diagram-classic/images/bottomright.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bpmn-datasource.png b/blazor/diagram-classic/images/bpmn-datasource.png deleted file mode 100644 index 2d95c1de19..0000000000 Binary files a/blazor/diagram-classic/images/bpmn-datasource.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bpmn-gataway-none.png b/blazor/diagram-classic/images/bpmn-gataway-none.png deleted file mode 100644 index dced967c10..0000000000 Binary files a/blazor/diagram-classic/images/bpmn-gataway-none.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bpmn-group.png b/blazor/diagram-classic/images/bpmn-group.png deleted file mode 100644 index 039c78cc59..0000000000 Binary files a/blazor/diagram-classic/images/bpmn-group.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bpmn-text-annotation.png b/blazor/diagram-classic/images/bpmn-text-annotation.png deleted file mode 100644 index 3bb654949c..0000000000 Binary files a/blazor/diagram-classic/images/bpmn-text-annotation.png and /dev/null differ diff --git a/blazor/diagram-classic/images/center_0.5.png b/blazor/diagram-classic/images/center_0.5.png deleted file mode 100644 index efd81b7949..0000000000 Binary files a/blazor/diagram-classic/images/center_0.5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/child-interaction.gif b/blazor/diagram-classic/images/child-interaction.gif deleted file mode 100644 index 0de191363c..0000000000 Binary files a/blazor/diagram-classic/images/child-interaction.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/config-project.png b/blazor/diagram-classic/images/config-project.png deleted file mode 100644 index 819574e1af..0000000000 Binary files a/blazor/diagram-classic/images/config-project.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-bezier.png b/blazor/diagram-classic/images/connector-bezier.png deleted file mode 100644 index 5523f2f209..0000000000 Binary files a/blazor/diagram-classic/images/connector-bezier.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-default.png b/blazor/diagram-classic/images/connector-default.png deleted file mode 100644 index d4d335b63f..0000000000 Binary files a/blazor/diagram-classic/images/connector-default.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-drag.gif b/blazor/diagram-classic/images/connector-drag.gif deleted file mode 100644 index 0d2baff936..0000000000 Binary files a/blazor/diagram-classic/images/connector-drag.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-end-point.gif b/blazor/diagram-classic/images/connector-end-point.gif deleted file mode 100644 index 804e750f4f..0000000000 Binary files a/blazor/diagram-classic/images/connector-end-point.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-flip.png b/blazor/diagram-classic/images/connector-flip.png deleted file mode 100644 index 0fbc721fd2..0000000000 Binary files a/blazor/diagram-classic/images/connector-flip.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-orthogonal.png b/blazor/diagram-classic/images/connector-orthogonal.png deleted file mode 100644 index c3f8dca4ee..0000000000 Binary files a/blazor/diagram-classic/images/connector-orthogonal.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-palette.gif b/blazor/diagram-classic/images/connector-palette.gif deleted file mode 100644 index 4c49451cf3..0000000000 Binary files a/blazor/diagram-classic/images/connector-palette.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-select.gif b/blazor/diagram-classic/images/connector-select.gif deleted file mode 100644 index 380698a23f..0000000000 Binary files a/blazor/diagram-classic/images/connector-select.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-straight.png b/blazor/diagram-classic/images/connector-straight.png deleted file mode 100644 index c8694d92db..0000000000 Binary files a/blazor/diagram-classic/images/connector-straight.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connectorDrawing.gif b/blazor/diagram-classic/images/connectorDrawing.gif deleted file mode 100644 index 9c7ceb034b..0000000000 Binary files a/blazor/diagram-classic/images/connectorDrawing.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector_size_customization.png b/blazor/diagram-classic/images/connector_size_customization.png deleted file mode 100644 index ec1d6617ac..0000000000 Binary files a/blazor/diagram-classic/images/connector_size_customization.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connectorfrompalette.gif b/blazor/diagram-classic/images/connectorfrompalette.gif deleted file mode 100644 index 77b7932186..0000000000 Binary files a/blazor/diagram-classic/images/connectorfrompalette.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/contextmenu_img1.png b/blazor/diagram-classic/images/contextmenu_img1.png deleted file mode 100644 index 0b987cf388..0000000000 Binary files a/blazor/diagram-classic/images/contextmenu_img1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/customshadow.png b/blazor/diagram-classic/images/customshadow.png deleted file mode 100644 index 434f4f3972..0000000000 Binary files a/blazor/diagram-classic/images/customshadow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/default-template.png b/blazor/diagram-classic/images/default-template.png deleted file mode 100644 index 34fc6a83c8..0000000000 Binary files a/blazor/diagram-classic/images/default-template.png and /dev/null differ diff --git a/blazor/diagram-classic/images/defaultContextMenu.gif b/blazor/diagram-classic/images/defaultContextMenu.gif deleted file mode 100644 index 99c6404f64..0000000000 Binary files a/blazor/diagram-classic/images/defaultContextMenu.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/drag.gif b/blazor/diagram-classic/images/drag.gif deleted file mode 100644 index aa12bd40fa..0000000000 Binary files a/blazor/diagram-classic/images/drag.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/flowClip_nowrap.png b/blazor/diagram-classic/images/flowClip_nowrap.png deleted file mode 100644 index 7eba28ad9c..0000000000 Binary files a/blazor/diagram-classic/images/flowClip_nowrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowClip_wrap.png b/blazor/diagram-classic/images/flowClip_wrap.png deleted file mode 100644 index dfc5e6c000..0000000000 Binary files a/blazor/diagram-classic/images/flowClip_wrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowClip_wrapwithoverflow.png b/blazor/diagram-classic/images/flowClip_wrapwithoverflow.png deleted file mode 100644 index 55a1f68fec..0000000000 Binary files a/blazor/diagram-classic/images/flowClip_wrapwithoverflow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowEllipsis_nowrap.png b/blazor/diagram-classic/images/flowEllipsis_nowrap.png deleted file mode 100644 index 107d6e48b9..0000000000 Binary files a/blazor/diagram-classic/images/flowEllipsis_nowrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowEllipsis_wrap.png b/blazor/diagram-classic/images/flowEllipsis_wrap.png deleted file mode 100644 index 30307a6551..0000000000 Binary files a/blazor/diagram-classic/images/flowEllipsis_wrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowEllipsis_wrapwithoverflow.png b/blazor/diagram-classic/images/flowEllipsis_wrapwithoverflow.png deleted file mode 100644 index eb99e2ce0f..0000000000 Binary files a/blazor/diagram-classic/images/flowEllipsis_wrapwithoverflow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowwrap_nowrap.png b/blazor/diagram-classic/images/flowwrap_nowrap.png deleted file mode 100644 index deac1b3e5d..0000000000 Binary files a/blazor/diagram-classic/images/flowwrap_nowrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowwrap_wrap.png b/blazor/diagram-classic/images/flowwrap_wrap.png deleted file mode 100644 index 74df8cb813..0000000000 Binary files a/blazor/diagram-classic/images/flowwrap_wrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowwrap_wrapwithoverflow.png b/blazor/diagram-classic/images/flowwrap_wrapwithoverflow.png deleted file mode 100644 index efa3787ca2..0000000000 Binary files a/blazor/diagram-classic/images/flowwrap_wrapwithoverflow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/frame-work.png b/blazor/diagram-classic/images/frame-work.png deleted file mode 100644 index c552b6652b..0000000000 Binary files a/blazor/diagram-classic/images/frame-work.png and /dev/null differ diff --git a/blazor/diagram-classic/images/framework-top.png b/blazor/diagram-classic/images/framework-top.png deleted file mode 100644 index e1a73c7f40..0000000000 Binary files a/blazor/diagram-classic/images/framework-top.png and /dev/null differ diff --git a/blazor/diagram-classic/images/hbalanced.JPG b/blazor/diagram-classic/images/hbalanced.JPG deleted file mode 100644 index 2f96dc7fc4..0000000000 Binary files a/blazor/diagram-classic/images/hbalanced.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/hcenter.JPG b/blazor/diagram-classic/images/hcenter.JPG deleted file mode 100644 index ccec41fc2a..0000000000 Binary files a/blazor/diagram-classic/images/hcenter.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/hleft.JPG b/blazor/diagram-classic/images/hleft.JPG deleted file mode 100644 index 404a9b0a48..0000000000 Binary files a/blazor/diagram-classic/images/hleft.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/hright.JPG b/blazor/diagram-classic/images/hright.JPG deleted file mode 100644 index ebe505d9da..0000000000 Binary files a/blazor/diagram-classic/images/hright.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/hyperlink-content.gif b/blazor/diagram-classic/images/hyperlink-content.gif deleted file mode 100644 index f74dd77445..0000000000 Binary files a/blazor/diagram-classic/images/hyperlink-content.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/hyperlink.png b/blazor/diagram-classic/images/hyperlink.png deleted file mode 100644 index 4d80727b38..0000000000 Binary files a/blazor/diagram-classic/images/hyperlink.png and /dev/null differ diff --git a/blazor/diagram-classic/images/lane-header-edit.gif b/blazor/diagram-classic/images/lane-header-edit.gif deleted file mode 100644 index 82ba98a246..0000000000 Binary files a/blazor/diagram-classic/images/lane-header-edit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/lane-resize.gif b/blazor/diagram-classic/images/lane-resize.gif deleted file mode 100644 index a353ff75ad..0000000000 Binary files a/blazor/diagram-classic/images/lane-resize.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/layout-expand-collapse-icon.png b/blazor/diagram-classic/images/layout-expand-collapse-icon.png deleted file mode 100644 index 0e36739cb7..0000000000 Binary files a/blazor/diagram-classic/images/layout-expand-collapse-icon.png and /dev/null differ diff --git a/blazor/diagram-classic/images/layout_assistants.png b/blazor/diagram-classic/images/layout_assistants.png deleted file mode 100644 index 1a76e31a6b..0000000000 Binary files a/blazor/diagram-classic/images/layout_assistants.png and /dev/null differ diff --git a/blazor/diagram-classic/images/leftcenter.png b/blazor/diagram-classic/images/leftcenter.png deleted file mode 100644 index 134be3ab61..0000000000 Binary files a/blazor/diagram-classic/images/leftcenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/line-distribution.png b/blazor/diagram-classic/images/line-distribution.png deleted file mode 100644 index 5913d5c369..0000000000 Binary files a/blazor/diagram-classic/images/line-distribution.png and /dev/null differ diff --git a/blazor/diagram-classic/images/mind_map.png b/blazor/diagram-classic/images/mind_map.png deleted file mode 100644 index 8fe6e4742f..0000000000 Binary files a/blazor/diagram-classic/images/mind_map.png and /dev/null differ diff --git a/blazor/diagram-classic/images/multi-select-ctrl.gif b/blazor/diagram-classic/images/multi-select-ctrl.gif deleted file mode 100644 index 5c1556bc82..0000000000 Binary files a/blazor/diagram-classic/images/multi-select-ctrl.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/multi-select-rubber-band.gif b/blazor/diagram-classic/images/multi-select-rubber-band.gif deleted file mode 100644 index ed673d185c..0000000000 Binary files a/blazor/diagram-classic/images/multi-select-rubber-band.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/new-project.png b/blazor/diagram-classic/images/new-project.png deleted file mode 100644 index ff8fbd94f2..0000000000 Binary files a/blazor/diagram-classic/images/new-project.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node-add-palette.gif b/blazor/diagram-classic/images/node-add-palette.gif deleted file mode 100644 index b36b8cfa00..0000000000 Binary files a/blazor/diagram-classic/images/node-add-palette.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/node-add.png b/blazor/diagram-classic/images/node-add.png deleted file mode 100644 index fd406921d8..0000000000 Binary files a/blazor/diagram-classic/images/node-add.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node-drawing.gif b/blazor/diagram-classic/images/node-drawing.gif deleted file mode 100644 index 2eb319df1c..0000000000 Binary files a/blazor/diagram-classic/images/node-drawing.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/node-select.gif b/blazor/diagram-classic/images/node-select.gif deleted file mode 100644 index f1ed0cc15c..0000000000 Binary files a/blazor/diagram-classic/images/node-select.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/node-stack-order.png b/blazor/diagram-classic/images/node-stack-order.png deleted file mode 100644 index 83d2aaf2ac..0000000000 Binary files a/blazor/diagram-classic/images/node-stack-order.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node.png b/blazor/diagram-classic/images/node.png deleted file mode 100644 index 937d3c9f49..0000000000 Binary files a/blazor/diagram-classic/images/node.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_appearance.png b/blazor/diagram-classic/images/node_appearance.png deleted file mode 100644 index d7a0e93f6f..0000000000 Binary files a/blazor/diagram-classic/images/node_appearance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_dataflow.gif b/blazor/diagram-classic/images/node_dataflow.gif deleted file mode 100644 index 7bfed7949b..0000000000 Binary files a/blazor/diagram-classic/images/node_dataflow.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/node_dataflow.png b/blazor/diagram-classic/images/node_dataflow.png deleted file mode 100644 index abab9aab9c..0000000000 Binary files a/blazor/diagram-classic/images/node_dataflow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_default.png b/blazor/diagram-classic/images/node_default.png deleted file mode 100644 index ae52e5f808..0000000000 Binary files a/blazor/diagram-classic/images/node_default.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_icon.png b/blazor/diagram-classic/images/node_icon.png deleted file mode 100644 index f7b388324c..0000000000 Binary files a/blazor/diagram-classic/images/node_icon.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_lineargradient.png b/blazor/diagram-classic/images/node_lineargradient.png deleted file mode 100644 index f8458babef..0000000000 Binary files a/blazor/diagram-classic/images/node_lineargradient.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_pivot.png b/blazor/diagram-classic/images/node_pivot.png deleted file mode 100644 index fab9f917bf..0000000000 Binary files a/blazor/diagram-classic/images/node_pivot.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_radialgradient.png b/blazor/diagram-classic/images/node_radialgradient.png deleted file mode 100644 index 49d2792b7f..0000000000 Binary files a/blazor/diagram-classic/images/node_radialgradient.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_shadow.png b/blazor/diagram-classic/images/node_shadow.png deleted file mode 100644 index c7f0cd7fec..0000000000 Binary files a/blazor/diagram-classic/images/node_shadow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/nuget-demo.png b/blazor/diagram-classic/images/nuget-demo.png deleted file mode 100644 index 3fc06b162e..0000000000 Binary files a/blazor/diagram-classic/images/nuget-demo.png and /dev/null differ diff --git a/blazor/diagram-classic/images/nuget-explorer.png b/blazor/diagram-classic/images/nuget-explorer.png deleted file mode 100644 index f9306f219e..0000000000 Binary files a/blazor/diagram-classic/images/nuget-explorer.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset1.png b/blazor/diagram-classic/images/offset1.png deleted file mode 100644 index 1063b36099..0000000000 Binary files a/blazor/diagram-classic/images/offset1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset2.png b/blazor/diagram-classic/images/offset2.png deleted file mode 100644 index dc97ac19c4..0000000000 Binary files a/blazor/diagram-classic/images/offset2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset3.png b/blazor/diagram-classic/images/offset3.png deleted file mode 100644 index 708dd4dc49..0000000000 Binary files a/blazor/diagram-classic/images/offset3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset4.png b/blazor/diagram-classic/images/offset4.png deleted file mode 100644 index cd1ec87393..0000000000 Binary files a/blazor/diagram-classic/images/offset4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset5.png b/blazor/diagram-classic/images/offset5.png deleted file mode 100644 index 4d8ef52880..0000000000 Binary files a/blazor/diagram-classic/images/offset5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset6.png b/blazor/diagram-classic/images/offset6.png deleted file mode 100644 index 1ba0f7dce7..0000000000 Binary files a/blazor/diagram-classic/images/offset6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset7.png b/blazor/diagram-classic/images/offset7.png deleted file mode 100644 index 164f12e7cf..0000000000 Binary files a/blazor/diagram-classic/images/offset7.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset8.png b/blazor/diagram-classic/images/offset8.png deleted file mode 100644 index 1910a4efdb..0000000000 Binary files a/blazor/diagram-classic/images/offset8.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset9.png b/blazor/diagram-classic/images/offset9.png deleted file mode 100644 index 62cebb9699..0000000000 Binary files a/blazor/diagram-classic/images/offset9.png and /dev/null differ diff --git a/blazor/diagram-classic/images/orthogonal-segment-edit.gif b/blazor/diagram-classic/images/orthogonal-segment-edit.gif deleted file mode 100644 index 576d28e5d0..0000000000 Binary files a/blazor/diagram-classic/images/orthogonal-segment-edit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/phase-header-edit.gif b/blazor/diagram-classic/images/phase-header-edit.gif deleted file mode 100644 index 0d9b1711a9..0000000000 Binary files a/blazor/diagram-classic/images/phase-header-edit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/port2.png b/blazor/diagram-classic/images/port2.png deleted file mode 100644 index 731b7f79d0..0000000000 Binary files a/blazor/diagram-classic/images/port2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/port_Appearance.png b/blazor/diagram-classic/images/port_Appearance.png deleted file mode 100644 index a73635161f..0000000000 Binary files a/blazor/diagram-classic/images/port_Appearance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/port_customport.png b/blazor/diagram-classic/images/port_customport.png deleted file mode 100644 index 1991e08169..0000000000 Binary files a/blazor/diagram-classic/images/port_customport.png and /dev/null differ diff --git a/blazor/diagram-classic/images/port_drag.gif b/blazor/diagram-classic/images/port_drag.gif deleted file mode 100644 index 1fdbc37840..0000000000 Binary files a/blazor/diagram-classic/images/port_drag.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/port_draw.gif b/blazor/diagram-classic/images/port_draw.gif deleted file mode 100644 index 20574c37ec..0000000000 Binary files a/blazor/diagram-classic/images/port_draw.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/port_margin.png b/blazor/diagram-classic/images/port_margin.png deleted file mode 100644 index 59ca4bd4f2..0000000000 Binary files a/blazor/diagram-classic/images/port_margin.png and /dev/null differ diff --git a/blazor/diagram-classic/images/port_offset.png b/blazor/diagram-classic/images/port_offset.png deleted file mode 100644 index 7721fab820..0000000000 Binary files a/blazor/diagram-classic/images/port_offset.png and /dev/null differ diff --git a/blazor/diagram-classic/images/radial-tree-layout.png b/blazor/diagram-classic/images/radial-tree-layout.png deleted file mode 100644 index b12c1b8322..0000000000 Binary files a/blazor/diagram-classic/images/radial-tree-layout.png and /dev/null differ diff --git a/blazor/diagram-classic/images/radial_tree.png b/blazor/diagram-classic/images/radial_tree.png deleted file mode 100644 index 0327abc4b8..0000000000 Binary files a/blazor/diagram-classic/images/radial_tree.png and /dev/null differ diff --git a/blazor/diagram-classic/images/resize.gif b/blazor/diagram-classic/images/resize.gif deleted file mode 100644 index 50db968f01..0000000000 Binary files a/blazor/diagram-classic/images/resize.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/rightcenter.png b/blazor/diagram-classic/images/rightcenter.png deleted file mode 100644 index dd9ec1bdab..0000000000 Binary files a/blazor/diagram-classic/images/rightcenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/rotate.gif b/blazor/diagram-classic/images/rotate.gif deleted file mode 100644 index d29602c1b3..0000000000 Binary files a/blazor/diagram-classic/images/rotate.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/select-nuget.png b/blazor/diagram-classic/images/select-nuget.png deleted file mode 100644 index b4359e2144..0000000000 Binary files a/blazor/diagram-classic/images/select-nuget.png and /dev/null differ diff --git a/blazor/diagram-classic/images/seperateContextMenu.gif b/blazor/diagram-classic/images/seperateContextMenu.gif deleted file mode 100644 index 99322d03e5..0000000000 Binary files a/blazor/diagram-classic/images/seperateContextMenu.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/single-select.gif b/blazor/diagram-classic/images/single-select.gif deleted file mode 100644 index ea10c3a6d4..0000000000 Binary files a/blazor/diagram-classic/images/single-select.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/solution-explorer-core.png b/blazor/diagram-classic/images/solution-explorer-core.png deleted file mode 100644 index 913cc84605..0000000000 Binary files a/blazor/diagram-classic/images/solution-explorer-core.png and /dev/null differ diff --git a/blazor/diagram-classic/images/straight-segment-add.gif b/blazor/diagram-classic/images/straight-segment-add.gif deleted file mode 100644 index b794274860..0000000000 Binary files a/blazor/diagram-classic/images/straight-segment-add.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/straight-segment-remove.gif b/blazor/diagram-classic/images/straight-segment-remove.gif deleted file mode 100644 index e9d6b117e7..0000000000 Binary files a/blazor/diagram-classic/images/straight-segment-remove.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/swapping.gif b/blazor/diagram-classic/images/swapping.gif deleted file mode 100644 index 22745efd1b..0000000000 Binary files a/blazor/diagram-classic/images/swapping.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/swimlane-header-edit.gif b/blazor/diagram-classic/images/swimlane-header-edit.gif deleted file mode 100644 index 25d998d747..0000000000 Binary files a/blazor/diagram-classic/images/swimlane-header-edit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/symbol-palette-group.gif b/blazor/diagram-classic/images/symbol-palette-group.gif deleted file mode 100644 index efdbea362a..0000000000 Binary files a/blazor/diagram-classic/images/symbol-palette-group.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/symbol-palette-group.png b/blazor/diagram-classic/images/symbol-palette-group.png deleted file mode 100644 index 9a7452ebdf..0000000000 Binary files a/blazor/diagram-classic/images/symbol-palette-group.png and /dev/null differ diff --git a/blazor/diagram-classic/images/symbol-palette.gif b/blazor/diagram-classic/images/symbol-palette.gif deleted file mode 100644 index e319068048..0000000000 Binary files a/blazor/diagram-classic/images/symbol-palette.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/symmetricallayout.png b/blazor/diagram-classic/images/symmetricallayout.png deleted file mode 100644 index 2399f607fd..0000000000 Binary files a/blazor/diagram-classic/images/symmetricallayout.png and /dev/null differ diff --git a/blazor/diagram-classic/images/syncfusion.png b/blazor/diagram-classic/images/syncfusion.png deleted file mode 100644 index 9a5b68daa7..0000000000 Binary files a/blazor/diagram-classic/images/syncfusion.png and /dev/null differ diff --git a/blazor/diagram-classic/images/topcenter.png b/blazor/diagram-classic/images/topcenter.png deleted file mode 100644 index df9ccb0e7f..0000000000 Binary files a/blazor/diagram-classic/images/topcenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/topleft.png b/blazor/diagram-classic/images/topleft.png deleted file mode 100644 index 033c4272e4..0000000000 Binary files a/blazor/diagram-classic/images/topleft.png and /dev/null differ diff --git a/blazor/diagram-classic/images/topright.png b/blazor/diagram-classic/images/topright.png deleted file mode 100644 index 755d5f81c7..0000000000 Binary files a/blazor/diagram-classic/images/topright.png and /dev/null differ diff --git a/blazor/diagram-classic/images/update-node.png b/blazor/diagram-classic/images/update-node.png deleted file mode 100644 index 1020d544b4..0000000000 Binary files a/blazor/diagram-classic/images/update-node.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle1.png b/blazor/diagram-classic/images/userhandle1.png deleted file mode 100644 index 6e9be21001..0000000000 Binary files a/blazor/diagram-classic/images/userhandle1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle10.png b/blazor/diagram-classic/images/userhandle10.png deleted file mode 100644 index 3eeac6f276..0000000000 Binary files a/blazor/diagram-classic/images/userhandle10.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle2.png b/blazor/diagram-classic/images/userhandle2.png deleted file mode 100644 index 50ebee6b05..0000000000 Binary files a/blazor/diagram-classic/images/userhandle2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle3.png b/blazor/diagram-classic/images/userhandle3.png deleted file mode 100644 index b747ddffd4..0000000000 Binary files a/blazor/diagram-classic/images/userhandle3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle4.png b/blazor/diagram-classic/images/userhandle4.png deleted file mode 100644 index 4aae48c18a..0000000000 Binary files a/blazor/diagram-classic/images/userhandle4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle5.png b/blazor/diagram-classic/images/userhandle5.png deleted file mode 100644 index 55a2508b3d..0000000000 Binary files a/blazor/diagram-classic/images/userhandle5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle6.png b/blazor/diagram-classic/images/userhandle6.png deleted file mode 100644 index 88a3caf0ef..0000000000 Binary files a/blazor/diagram-classic/images/userhandle6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle7.png b/blazor/diagram-classic/images/userhandle7.png deleted file mode 100644 index 68d46f2c2c..0000000000 Binary files a/blazor/diagram-classic/images/userhandle7.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle8.png b/blazor/diagram-classic/images/userhandle8.png deleted file mode 100644 index beb978b977..0000000000 Binary files a/blazor/diagram-classic/images/userhandle8.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle9.png b/blazor/diagram-classic/images/userhandle9.png deleted file mode 100644 index 7ffff04d73..0000000000 Binary files a/blazor/diagram-classic/images/userhandle9.png and /dev/null differ diff --git a/blazor/diagram-classic/images/vAlternate.JPG b/blazor/diagram-classic/images/vAlternate.JPG deleted file mode 100644 index 841e6e9f32..0000000000 Binary files a/blazor/diagram-classic/images/vAlternate.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/vLeft.PNG b/blazor/diagram-classic/images/vLeft.PNG deleted file mode 100644 index 1042d8014b..0000000000 Binary files a/blazor/diagram-classic/images/vLeft.PNG and /dev/null differ diff --git a/blazor/diagram-classic/images/vRight.PNG b/blazor/diagram-classic/images/vRight.PNG deleted file mode 100644 index 485167ad83..0000000000 Binary files a/blazor/diagram-classic/images/vRight.PNG and /dev/null differ diff --git a/blazor/diagram-classic/images/vleft.JPG b/blazor/diagram-classic/images/vleft.JPG deleted file mode 100644 index c62a38cf18..0000000000 Binary files a/blazor/diagram-classic/images/vleft.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/vright.JPG b/blazor/diagram-classic/images/vright.JPG deleted file mode 100644 index 7989f71907..0000000000 Binary files a/blazor/diagram-classic/images/vright.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/vrightLayout.png b/blazor/diagram-classic/images/vrightLayout.png deleted file mode 100644 index 99befad033..0000000000 Binary files a/blazor/diagram-classic/images/vrightLayout.png and /dev/null differ diff --git a/blazor/diagram-classic/images/xafter.png b/blazor/diagram-classic/images/xafter.png deleted file mode 100644 index c049b8d6fe..0000000000 Binary files a/blazor/diagram-classic/images/xafter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/xbefore.png b/blazor/diagram-classic/images/xbefore.png deleted file mode 100644 index 12b4c60578..0000000000 Binary files a/blazor/diagram-classic/images/xbefore.png and /dev/null differ diff --git a/blazor/diagram-classic/images/yafter.png b/blazor/diagram-classic/images/yafter.png deleted file mode 100644 index ee086ed060..0000000000 Binary files a/blazor/diagram-classic/images/yafter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ybefore.png b/blazor/diagram-classic/images/ybefore.png deleted file mode 100644 index 7c933c2612..0000000000 Binary files a/blazor/diagram-classic/images/ybefore.png and /dev/null differ diff --git a/blazor/diagram-classic/interaction.md b/blazor/diagram-classic/interaction.md deleted file mode 100644 index 006b7b073a..0000000000 --- a/blazor/diagram-classic/interaction.md +++ /dev/null @@ -1,235 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -## Selection - -Selector 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. - -## 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. - -![Single Selection](images/single-select.gif) - -* While selecting the diagram elements, the following events can be used to do your customization. -* When selecting/unselecting the diagram elements, the [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) event gets triggered. - -## Selecting 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, selection is changed from top to bottom in the hierarchy of parent group to its children. - -## Multiple selection - -Multiple elements can be selected with the following ways: - -* Ctrl+Click - -During single click, any existing item in the selection list be cleared, and only the item clicked recently is there in the selection list. To avoid cleaning the old selected item, Ctrl key must be on hold when clicking. - -![Multiple Selection](images/multi-select-ctrl.gif) - -* Selection rectangle/rubber band selection - -Clicking and dragging the diagram area allows to create a rectangular region. The elements that are covered under the rectangular region are selected at the end. - -![Multiple Rubberband Selection](images/multi-select-rubber-band.gif) - -## Select/Unselect elements using program - -The server-side methods [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Select_System_Object_System_Nullable_System_Boolean__) and [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearSelection) help to select or clear the selection of the elements at runtime. - -Get the current selected items from the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSelectedItems.html#Syncfusion_Blazor_Diagrams_DiagramSelectedItems_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSelectedItems.html#Syncfusion_Blazor_Diagrams_DiagramSelectedItems_Connectors) collection of the [SelectedItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectedItems) property of the diagram model. - -## Select entire elements in diagram programmatically - -The server-side method [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectAll) used to select all the elements such as nodes/connectors in the diagram. Refer to the following link which shows how to use [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectAll) method on the diagram. - -## Drag - -* An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move every selected element. -* When you drag the elements in the diagram, the [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) event gets triggered and to do customization in this event. - -![Drag](images/drag.gif) - -## Resize - -* Selector is surrounded by eight thumbs. When dragging these thumbs, selected items can be resized. -* When one corner of the selector is dragged, opposite corner is in a static position. -* When a node is resized, the [OnSizeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnSizeChange) event gets triggered. - -![Resize](images/resize.gif) - -N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to `Snapping`. - -## Rotate - -* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead to rotate the node. -* The node is rotated with reference to the static pivot point. -* Pivot thumb (thumb at the middle of the node) appears while rotating the node to represent the static point. - -![Rotate](images/rotate.gif) - -## Connection editing - -* Each segment of a selected connector is editable with some specific handles/thumbs. - -## End point handles - -Source and target points of the selected connectors are represented with two handles. Clicking and dragging those handles help you to adjust the source and target points. - -![Drag End Point Handles](images/connector-end-point.gif) - -* 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 [ConnectionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnConnectionChange) event gets triggered. - -## Straight segment editing - -* End point of each straight segment is represented by a thumb that enables to edit the segment. -* Any number of new segments can be inserted into a straight line by clicking, when Shift and Ctrl keys are pressed (Ctrl+Shift+Click). - -![Straight Segment Editing Addition](images/straight-segment-add.gif) - -* Straight segments can be removed by clicking the segment end point, when Ctrl and Shift keys are pressed (Ctrl+Shift+Click). - -![Straight Segment Editing Remove](images/straight-segment-remove.gif) - -## Orthogonal thumbs - -* Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging it. -* When necessary, some segments are added or removed automatically, when dragging the segment. This is to maintain proper routing of orthogonality between segments. - -![Orthogonal Segment Edit](images/orthogonal-segment-edit.gif) - -## Drag and drop nodes over other elements - -Diagram provides support to drop a node/connector over another node/connector. The [OnDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnDrop) event is raised to notify that an element is dropped over another one and it is disabled, by default. It can enabled with the constraints property. - -## User handles - -* User handles are used to add some frequently used commands around the selector. To create user handles, define and add them to the [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) collection of the [SelectedItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectedItems) property. -* The name property of user handle is used to define the name of the user handle and its further used to find the user handle at runtime and do any customization. - -## Alignment - -User handles can be aligned relative to the node boundaries. It has [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Margin), [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset), [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Side), [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_HorizontalAlignment), and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_VerticalAlignment) settings. It is quite tricky when all four alignments are used together but gives more control over alignment. - -## Offset - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset) property of [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.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. - -## Side - -The [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Side) property of [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) is used to align the user handle by using the [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html), [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html), and [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) options. - -## Horizontal and vertical alignments - -The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_HorizontalAlignment) property of [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) is used to set how the user handle is horizontally aligned at the position based on the [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset). The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_VerticalAlignment) property is used to set how user handle is vertically aligned at the position. - -## Margin - -Margin is an absolute value used to add some blank space in any one of its four sides. The [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) can be displaced with the [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Margin) property. - -## Notification for the mouse button clicked - -The diagram component notifies the mouse button clicked. For example, whenever the right mouse button is clicked, the clicked button is notified as right. The mouse click is notified with, - -| Notification | Description | -|----------------|--------------| -| Left | When the left mouse button is clicked, left is notified | -| Middle | When the mouse wheel is clicked, middle is notified | -| Right | When the right mouse button is clicked, right is notified | - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using Syncfusion.Blazor.Navigations -@using System.Collections.ObjectModel - -

    Diagram

    -
    - - - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - string greeting; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - // Add node - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 }, - }; - NodeCollection.Add(node1); - } - - private async void Click() - { - //Sets the export option for diagram - IBlazorClickEventArgs options = new IBlazorClickEventArgs() - { - Console.WriteLine("Button", options.MouseButtons); - }; - } -} -``` - -## Appearance - -The appearance of the user handle can be customized by using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Size), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BorderColor), [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BackgroundColor), [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Visible), [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_PathData), and [PathColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_PathColor) properties of the [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html). - -## Zoom pan - -* 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. -* Diagram can be zoomed in or out by using Ctrl + mouse wheel. - -![Zoom Pan](images/Zoom-pan.gif) - -## Keyboard - -Diagram provides support to interact with the elements with key gestures. By default, some in-built commands are bound with a relevant set of key combinations. - -The following table illustrates those commands with the associated key values. - -| Shortcut Key | Command | Description| -|--------------|---------|------------| -| Ctrl + A | `SelectAll` | Select all nodes/connectors in the diagram.| -| Ctrl + C | Copy | Copy the diagram selected elements.| -| Ctrl + V | Paste | Pastes the copied elements.| -| Ctrl + X | Cut | Cuts the selected elements.| -| Ctrl + Z | Undo | Reverses the last editing action performed on the diagram.| -| Ctrl + Y | Redo | Restores the last editing action when no other actions have occurred since the last undo on the diagram.| -| Delete | Delete | Deletes the selected elements.| -| Ctrl/Shift + Click on object | | Multiple selection (Selector binds all selected nodes/connectors).| -| Up Arrow | Nudge(“up”) | `NudgeUp`: Moves the selected elements towards up by one pixel.| -| Down Arrow | Nudge(“down”) | `NudgeDown`: Moves the selected elements towards down by one pixel.| -| Left Arrow | Nudge(“left”) | `NudgeLeft`: Moves the selected elements towards left by one pixel.| -| Right Arrow | Nudge(“right”) | `NudgeRight`: Moves the selected elements towards right by one pixel.| -| Ctrl + MouseWheel | Zoom | Zoom (Zoom in/Zoom out the diagram).| -| F2 | `StartLabelEditing` | Starts to edit the label of selected element.| -| Esc | `EndLabelEditing` | Sets the label mode as view and stops editing.| - -## See Also - -* [How to control the diagram history](./undo-redo) -* [How to create overview control to the diagram](./overview) \ No newline at end of file diff --git a/blazor/diagram-classic/layers.md b/blazor/diagram-classic/layers.md deleted file mode 100644 index 2280d646d1..0000000000 --- a/blazor/diagram-classic/layers.md +++ /dev/null @@ -1,428 +0,0 @@ ---- -layout: post -title: Layers in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Layers in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Layers in Blazor Diagram Component - -**Layer** is used to organize related shapes on a diagram control. A layer is a named category of shapes. By assigning shapes to different layers, you can selectively view, remove, and lock different categories of shapes. - -In diagram, [Layers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html) provide a way to change the properties of all shapes that have been assigned to that layer. The following properties can be set. - -* Visible -* Lock -* Objects -* AddInfo - -## Visible - -The layer's [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_Visible) property is used to control the visibility of the elements assigned to the layer. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - public ObservableCollection Layers = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Default Shape"} - } - }; - NodeCollection.Add(node1); - DiagramNode node2 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Path Element"} - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Path, - Data = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643," + - "179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }; - NodeCollection.Add(node2); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 300 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 400 }, - Type = Segments.Straight - }; - ConnectorCollection.Add(connector1); - string[] objects = new string[] { "node1" }; - // initialize Layers - Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects }); - } -} -``` - -## Lock - -The layer's [Lock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_Lock) property is used to prevent or allow changes to the elements dimension and position. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - public ObservableCollection Layers = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Default Shape"} - } - }; - NodeCollection.Add(node1); - DiagramNode node2 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Path Element"} - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Path, - Data = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643," + - "179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }; - NodeCollection.Add(node2); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 300 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 400 }, - Type = Segments.Straight - }; - ConnectorCollection.Add(connector1); - string[] objects = new string[] { "node1" }; - string[] objects1 = new string[] { "node2" }; - Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects, Lock = true }); - Layers.Add(new DiagramLayer() { Id = "layer2", Visible = true, Objects = objects1, Lock = false }); - } -} -``` - -## Objects - -The layer's [Objects](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_Objects) property defines the diagram elements to the layer. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - public ObservableCollection Layers = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Default Shape"} - } - }; - NodeCollection.Add(node1); - DiagramNode node2 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Path Element"} - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Path, - Data = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643," + - "179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }; - NodeCollection.Add(node2); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 300 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 400 }, - Type = Segments.Straight - }; - ConnectorCollection.Add(connector1); - string[] objects = new string[] { "node1", "node2" }; - string[] objects1 = new string[] { "node2" }; - Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects }); - Layers.Add(new DiagramLayer() { Id = "layer2", Visible = true, Objects = objects1 }); - } -} -``` - -## AddInfo - -The [AddInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_AddInfo) property of layers allow you to maintain additional information to the layers. - -The following code illustrates how to add additional information to the layers. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - public ObservableCollection Layers = new ObservableCollection() { }; - - public class AdditionalInfo - { - public string Description { get; set; } - }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Default Shape"} - } - }; - NodeCollection.Add(node1); - DiagramNode node2 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Path Element"} - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Path, - Data = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643," + - "179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }; - NodeCollection.Add(node2); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 300 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 400 }, - Type = Segments.Straight - }; - ConnectorCollection.Add(connector1); - string[] objects = new string[] { "node1" ,"node2"}; - string[] objects1 = new string[] { "node2" }; - Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects, AddInfo = new AdditionalInfo() {Description="Layer1" } }); - Layers.Add(new DiagramLayer() { Id = "layer2", Visible = true, Objects = objects1}); - } -} -``` - -### Add layer at runtime - -Layers can be added at runtime by using the [AddLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddLayer_Syncfusion_Blazor_Diagrams_DiagramLayer_System_Object_) public method. The layer's [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_Id) property defines the ID of the layer, and its further used to find the layer at runtime and do any customization. - -The following code illustrates how to add a layer. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - -@code{ - SfDiagram diagram; - DiagramLayer layer = new DiagramLayer() - { - Id = "newlayer", - Visible = true, - Lock = false, - Objects = new string[] { }, - ZIndex = -1, - AddInfo = { } - }; - List connectors = new List() - { - new DiagramConnector() - { - Id = "connector2", - SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 100 }, - Type = Segments.Straight - } - }; - - // add the layers to the existing diagram layer collection - public void addLayer() - { - diagram.AddLayer(layer, connectors); - } -} -``` - -### Remove layer at runtime - -Layers can be removed at runtime by using the [RemoveLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_RemoveLayer_System_String_) public method. - -The following code illustrates how to remove a layer. - -```csharp -SfDiagram diagram; - -// remove the diagram layers -diagram.RemoveLayer("Layer1"); - -``` - -### MoveObjects - -Objects of the layers can be moved by using the [MoveObjects](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_MoveObjects_System_Collections_Generic_List_System_String__System_String_) public method. - -The following code illustrates how to move objects from one layer to another layer from the diagram. - -```csharp -SfDiagram diagram; -// move the objects of diagram layers -string[] objects = new string[] { "node2" }; -diagram.MoveObjects(objects,"Layer1"); -``` - -### BringLayerForward - -Layers can be moved forward at runtime by using the [BringLayerForward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringLayerForward_System_String_) public method. - -The following code illustrates how to bring forward to layer. - -```csharp -SfDiagram diagram; - -// move the layer forward -diagram.BringLayerForward("Layer1"); -``` - -### SendLayerBackward - -Layers can be moved backward at runtime by using the [SendLayerBackward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SendLayerBackward_System_String_) public method. - -The following code illustrates how to send backward to layer. - -```csharp -SfDiagram diagram; -// move the layer backward -diagram.SendLayerBackward("Layer1"); - -``` - -### CloneLayer - -Layers can be cloned with its object by using the [CloneLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_CloneLayer_System_String_) public method. - -The following code illustrates how to bring forward to layer. - -```csharp -SfDiagram diagram; -// clone a layer with its objec -diagram.CloneLayer("Layer1"); -``` - -### GetActiveLayer - -To get the active layers back in diagram, use the [GetActiveLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetActiveLayer) public method. - -The following code illustrates how to bring forward to layer. - -```csharp -SfDiagram diagram; -// gets the active layer back -diagram.GetActiveLayer(); -``` - -### SetActiveLayer - -Set the active layer by using the [SetActiveLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SetActiveLayer_System_String_) public method. - -The following code illustrates how to bring forward to layer. - -```csharp -SfDiagram diagram; - -// set the active layer -//@param layerName defines the name of the layer which is to be active layer -diagram.SetActiveLayer("Layer1"); -``` \ No newline at end of file diff --git a/blazor/diagram-classic/layout/automatic-layout.md b/blazor/diagram-classic/layout/automatic-layout.md deleted file mode 100644 index 6dc6db9262..0000000000 --- a/blazor/diagram-classic/layout/automatic-layout.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -layout: post -title: Automatic layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Automatic layout in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Automatic Layout in Blazor Diagram Component - -Diagram provides support to auto-arrange the nodes in the diagram area that is referred as [Layout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html). It includes the following layout modes: - -## Layout modes - -* Hierarchical layout -* Organization chart -* Mind Map layout -* Radial tree -* Symmetric layout -* Complex hierarchical tree layout - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) - -* [How to generate the organization chart](./organizational-chart) - -* [How to generate the hierarchical layout](./hierarchical-layout) diff --git a/blazor/diagram-classic/layout/hierarchical-layout.md b/blazor/diagram-classic/layout/hierarchical-layout.md deleted file mode 100644 index f25442a85b..0000000000 --- a/blazor/diagram-classic/layout/hierarchical-layout.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -layout: post -title: Hierarchical layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Hierarchical layout in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Hierarchical Layout in Blazor Diagram Component - -The hierarchical tree layout arranges nodes in a tree-like structure, where the nodes in the hierarchical layout may have multiple parents. There is no need to specify the layout root. To arrange the nodes in a hierarchical structure, specify the layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Type) as `HierarchicalTree`. The following example shows how to arrange the nodes in a hierarchical structure. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - ObservableCollection NodeCollection; - ObservableCollection ConnectorCollection; - //Uses layout to auto-arrange nodes on the diagram page - DiagramLayout LayoutValue = new DiagramLayout() - { - //Sets layout type as HierarchicalTree... - Type = LayoutType.HierarchicalTree, - VerticalSpacing = 40, - HorizontalSpacing = 40, - }; - //Sets the default properties for nodes - DiagramNode NodeDefaults = new DiagramNode() - { - Height = 40, - Width = 100, - //Initializing the default node's shape style - Style = new NodeShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Style = new AnnotationStyle() { Color = "white", Bold = true }, } - } - }; - //Sets the default properties for the connectors - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - }; - - protected override void OnInitialized() - { - //Initializing node and connectors - NodeCollection = new ObservableCollection() - { - new DiagramNode(){Id="node1",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Steve-Ceo"}}}, - new DiagramNode(){Id="node2",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Kevin-Manager"}}}, - new DiagramNode(){Id="node3",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Peter-Manager"}}}, - new DiagramNode(){Id="node4",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Jim-CSE"}}}, - new DiagramNode(){Id="node5",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Martin-CSE"}}}, - new DiagramNode(){Id="node6",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="John-Manager"}}}, - new DiagramNode(){Id="node7",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Mary-CSE"}}}, - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector(){Id="connector1",SourceID="node1",TargetID="node2"}, - new DiagramConnector(){Id="connector2",SourceID="node1",TargetID="node3"}, - new DiagramConnector(){Id="connector3",SourceID="node2",TargetID="node4"}, - new DiagramConnector(){Id="connector4",SourceID="node2",TargetID="node5"}, - new DiagramConnector(){Id="connector5",SourceID="node3",TargetID="node6"}, - new DiagramConnector(){Id="connector6",SourceID="node3",TargetID="node7"}, - }; - } -} -``` - -![HierarchicalTree layout manager](../images/HierarchicalTree.png) - -## Customizing the properties - -### Orientation - -You can change the orientation at runtime. The following code shows how to change the layout. - -```csharp - -// Change the orientation at runtime -public void UpdateOrientation() -{ - Diagram.Layout.Orientation = LayoutOrientation.BottomToTop; -} - -``` - -### Spacing - -You can change the horizontal and vertical spacing for the diagram layout. - -```csharp -// Update the spacing -public void UpdateSpacing() -{ - Diagram.BeginUpdate(); - Diagram.Layout.HorizontalSpacing += 10; - Diagram.Layout.VerticalSpacing += 10; - Diagram.EndUpdate(); -} -``` - -### Margin - -You can change the margin values for the diagram layout. - -```csharp -// Update the margin values -public void UpdateMargin() -{ - Diagram.BeginUpdate(); - Diagram.Layout.Margin.Left += 10; - Diagram.Layout.Margin.Top += 10; - Diagram.EndUpdate(); -} -``` - -### Expand and collapse the layout - -Diagram allows to expand or collapse the subtrees of a layout. The node’s isExpanded property allows you to expand or collapse its children. The following code example shows how to expand or collapse the children of a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - - - - - - -@code{ - - DiagramSelectedItems selectedItems = new DiagramSelectedItems() - { - Constraints = SelectorConstraints.All & ~SelectorConstraints.ResizeAll & ~SelectorConstraints.Rotate - }; - - bool CanFit = true; - FitModes Mode = FitModes.Width; - TreeInfo LayoutInfo = new TreeInfo() - { - CanEnableSubTree = true, - Orientation = SubTreeOrientation.Horizontal - }; - DiagramLayout LayoutValue = new DiagramLayout() { }; - DiagramConnector ConnectorDefault = new DiagramConnector() - { - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#6d6d6d" }, - Constraints = 0, - CornerRadius = 5 - }; - DiagramNode NodeDefaults = new DiagramNode - { - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none", Color = "white", StrokeWidth = 2, }, - BackgroundColor = "#659be5", - Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Margin = new BasicShapeMargin() { Left = 10, Right = 10, Bottom = 10, Top = 10 } }, - ExpandIcon = new NodeExpandIcon() - { - Height = 10, - Width = 10, - Shape = IconShapes.Minus, - Fill = "lightgray", - Offset = new IconOffset() { X = 0.5, Y = 1 }, - VerticalAlignment = VerticalAlignment.Auto, - Margin = new ExpandIconMargin() { Bottom = 0, Left = 0, Right = 0, Top = 0 } - }, - CollapseIcon = new NodeCollapseIcon() - { - Offset = new IconOffset() { X = 0.5, Y = 1 }, - VerticalAlignment = VerticalAlignment.Auto, - Height = 10, - Width = 10, - Shape = IconShapes.Plus, - Fill = "lightgray", - Padding = new IconPadding() { Top = 5 } - } - }; - - public class HierarchicalDetails - { - public string Name { get; set; } - public string FillColor { get; set; } - public string Category { get; set; } - } - - public List DataSource = new List() - { - new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"} - }; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - Type = LayoutType.HierarchicalTree, - VerticalSpacing = 30, - HorizontalSpacing = 30, - EnableAnimation = true, - LayoutInfo = this.LayoutInfo - }; - } -} -``` - -![Expand and Collapse Icon](../images/layout-expand-collapse-icon.png) - -N> You can use the `EnableAnimation` property to enable or disable animation option when a node is expanded or collapsed. - -## Complex hierarchical tree - -Complex hierarchical tree layout is the extended version of the hierarchical tree layout. The child had been two or more parents. To create a complex hierarchical tree, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Type) of layout should be set as `ComplexHierarchicalTree`. - -The following code example shows how to create a complex hierarchical tree. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - SfDiagram diagram; - List datamap = new List() { - new DiagramDataMapSetting() { Property = "Style.fill", Field = "fillColor" }, - new DiagramDataMapSetting() { Property = "Style.strokeColor", Field = "border" } - }; - - DiagramLayout LayoutValue = new DiagramLayout() - { - Type = LayoutType.ComplexHierarchicalTree, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.TopToBottom, - Margin = new LayoutMargin() { Left = 20, Top = 20 }, - }; - - DiagramNode NodeDefaults = new DiagramNode - { - Height = 40, - Width = 40, - Shape = new DiagramShape() { BasicShape = BasicShapes.Rectangle, Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, CornerRadius = 7 }, - }; - - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - CornerRadius = 7, - TargetDecorator = new ConnectorTargetDecorator() { Width = 7, Height = 7 }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6d6d6d" } - }; - - public class DataModel - { - public string Name; - public string fillColor; - public string border; - public string[] ReportingPerson; - } - - public object dataSource = new List() - { - new DataModel { Name = "node11", fillColor = "#e7704c", border = "#c15433" }, - new DataModel { Name = "node12", ReportingPerson = new string[]{ "node114" }, fillColor = "#efd46e", border = "#d6b123" }, - new DataModel { Name = "node13", ReportingPerson = new string[] { "node12" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node14", ReportingPerson = new string[] { "node12" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node15", ReportingPerson = new string[] { "node12" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node16", ReportingPerson = new string[] {}, fillColor = "#14ad85" }, - new DataModel { Name = "node17", ReportingPerson = new string[] { "node13", "node14", "node15" }, fillColor = "#659be5", border = "#3a6eb5" }, - new DataModel { Name = "node18", ReportingPerson = new string[] {}, fillColor = "#14ad85" }, - new DataModel { Name = "node19", ReportingPerson = new string[] { "node16", "node17", "node18" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node110", ReportingPerson = new string[] { "node16", "node17", "node18" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node111", ReportingPerson = new string[] { "node16", "node17", "node18", "node116" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node21", fillColor = "#e7704c", border = "#c15433" }, - new DataModel { Name = "node22", ReportingPerson = new string[] { "node114" }, fillColor = "#efd46e", border = "#d6b123" }, - new DataModel { Name = "node23", ReportingPerson = new string[] { "node22" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node24", ReportingPerson = new string[] { "node22" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node25", ReportingPerson = new string[] { "node22" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node26", ReportingPerson = new string[] {}, fillColor = "#14ad85" }, - new DataModel { Name = "node27", ReportingPerson = new string[] { "node23", "node24", "node25" }, fillColor = "#659be5", border = "#3a6eb5" }, - new DataModel { Name = "node28", ReportingPerson = new string[] {}, fillColor = "#14ad85" }, - new DataModel { Name = "node29", ReportingPerson = new string[] { "node26", "node27", "node28", "node116" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node210", ReportingPerson = new string[] { "node26", "node27", "node28" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node211", ReportingPerson = new string[] { "node26", "node27", "node28" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node31", fillColor = "#e7704c", border = "#c15433" }, - new DataModel { Name = "node114", ReportingPerson = new string[] { "node11", "node21", "node31" }, fillColor = "#f3904a", border = "#d3722e" }, - new DataModel { Name = "node116", ReportingPerson = new string[] { "node12", "node22" }, fillColor = "#58b087", border = "#16955e" } - }; -} -``` - -![Complex HierarchicalTree](../images/Complex_HierarchicalTree.png) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/line-distribution.md b/blazor/diagram-classic/layout/line-distribution.md deleted file mode 100644 index dc1ca734fc..0000000000 --- a/blazor/diagram-classic/layout/line-distribution.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -layout: post -title: Line Distribution in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Line Distribution in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Line Distribution in Blazor Diagram Component - -Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So user can decide whether the segment of each connector from a single parent node should be same point or different point. The [ConnectionPointOrigin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_ConnectionPointOrigin) property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be `SamePoint`. - -The following code example illustrates how to create a complex hierarchical tree with line distribution. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - -@code{ - - DiagramLayout LayoutValue = new DiagramLayout() { }; - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Segments.Orthogonal, - CornerRadius = 7, - TargetDecorator = new ConnectorTargetDecorator() { Width = 7, Height = 7, Style = new DecoratorShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" } }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 } - }; - - DiagramNode NodeDefaults = new DiagramNode - { - Height = 40, - Width = 40, - Style = new NodeShapeStyle() { StrokeWidth = 2, Fill = "#6BA5D7", StrokeColor = "None" }, - Shape = new DiagramShape() { BasicShape = BasicShapes.Rectangle, Type = Syncfusion.Blazor.Diagrams.Shapes.Basic }, - BackgroundColor = "#6BA5D7" - }; - - public class DataModel - { - public string Name; - public string FillColor; - public string[] ReportingPerson; - } - - public object DataSource = new List() - { - new DataModel { Name = "node11", FillColor = "#6BA5D7" }, - new DataModel { Name = "node12", ReportingPerson = new string[]{ "node114" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node13", ReportingPerson = new string[] { "node12" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node14", ReportingPerson = new string[] { "node12" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node15", ReportingPerson = new string[] { "node12" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node18", ReportingPerson = new string[] {}, FillColor = "#6BA5D7" }, - new DataModel { Name = "node21", FillColor = "#6BA5D7" }, - new DataModel { Name = "node22", ReportingPerson = new string[] { "node114" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node23", ReportingPerson = new string[] { "node22" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node24", ReportingPerson = new string[] { "node22" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node25", ReportingPerson = new string[] { "node22" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node26", ReportingPerson = new string[] {}, FillColor = "#6BA5D7" }, - new DataModel { Name = "node28", ReportingPerson = new string[] {}, FillColor = "#14ad85" }, - new DataModel { Name = "node31", FillColor = "#6BA5D7" }, - new DataModel { Name = "node114", ReportingPerson = new string[] { "node11", "node21", "node31" }, FillColor = "#6BA5D7" } - }; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - Type = LayoutType.ComplexHierarchicalTree, - VerticalAlignment = VerticalAlignment.Top, - HorizontalAlignment = HorizontalAlignment.Left, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.TopToBottom, - Margin = new LayoutMargin() { Left = 0, Top = 0, Bottom = 0, Right = 0 }, - ConnectionPointOrigin = ConnectionPointOrigin.SamePoint - }; - } -} -``` - -![Line Distribution](../images/line-distribution.png) - -## Prevent connectors overlay - -The below constraints prevents the connector segments overlapping nodes with a complex hierarchical layout. - -The following code illustrates how to prevent the connector segments overlapping in diagram layout. - -```csharp - -protected override void OnInitialized() -{ - LayoutValue = new DiagramLayout() - { - //this prevents connector segments overlapping - enableRouting: true, - }; - } -} - -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/linear-arrangement.md b/blazor/diagram-classic/layout/linear-arrangement.md deleted file mode 100644 index 405b9f5681..0000000000 --- a/blazor/diagram-classic/layout/linear-arrangement.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: post -title: Linear Arrangement in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Linear Arrangement in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Linear Arrangement in Blazor Diagram Component - -Linear arrangement is used to linearly arrange the child nodes in layout, which means the parent node is placed in the center corresponding to its children. When line distribution is enabled, linear arrangement is also activated by default. The [Arrangement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Arrangement) property of layout is used to enable or disable the linear arrangement in layout. By default Arrangement will be `Nonlinear`. - -N> Linear arrangement is applicable only for complex hierarchical tree layout. - -The following code illustrates how to allow a linear arrangement in diagram layout. - -```csharp - -protected override void OnInitialized() -{ - LayoutValue = new DiagramLayout() - { - Type = LayoutType.ComplexHierarchicalTree, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.TopToBottom, - //To arrange a child nodes in a linear manner - Arrangement = ChildArrangement.Linear - }; - } -} - -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/mind-map.md b/blazor/diagram-classic/layout/mind-map.md deleted file mode 100644 index c48220ccf5..0000000000 --- a/blazor/diagram-classic/layout/mind-map.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -layout: post -title: Mind map layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Mind map layout in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Mind Map layout in Blazor Diagram - -A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create mind map, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Type) of layout should be set as `MindMap`. - -The following code example illustrates how to create an organizational chart. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - //Initializing MindMap layout - DiagramLayout LayoutValue = new DiagramLayout() - { - //Sets layout type as MindMap... - Type = LayoutType.MindMap, - Margin = new LayoutMargin() { Top = 20, Left = 20 } - }; - - List DataMap = new List() - { - new DiagramDataMapSetting() { Property = "Shape.Content",Field = "Label" }, - }; - - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 25, - Height = 25, - BackgroundColor = "#6BA5D7", - Annotations = new ObservableCollection() { new DiagramNodeAnnotation() { Id = "label1", Style = new AnnotationStyle() { Color = "black" } }, }, - Style = new NodeShapeStyle { Fill = "#6BA5D7", StrokeWidth = 1, StrokeColor = "white" }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Text, - Content = "", - Margin = new BasicShapeMargin() { Left = 5, Right = 5, Bottom = 5, Top = 5 } - } - - }; - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Syncfusion.Blazor.Diagrams.Segments.Bezier, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 2 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - } - }; - - public class MindMapDetails - { - public string Id { get; set; } - public string Label { get; set; } - public string ParentId { get; set; } - public string Branch { get; set; } - public string Fill { get; set; } - } - - public object DataSource = new List() - { - new MindMapDetails() { Id= "1",Label="Creativity", ParentId ="", Branch = "Root"}, - new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1", Branch = "Right" }, - new MindMapDetails() { Id= "3", Label="Complementing", ParentId ="1", Branch = "Left" }, - new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="2", Branch = "subRight" }, - new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="2", Branch = "subRight" }, - new MindMapDetails() { Id= "6", Label= "Local", ParentId ="3", Branch = "subRight" }, - new MindMapDetails() { Id= "7", Label= "Remote", ParentId ="3", Branch = "subRight" }, - new MindMapDetails() { Id= "8", Label= "Individual", ParentId ="3", Branch = "subRight" }, - new MindMapDetails() { Id= "9", Label= "Teams", ParentId ="3", Branch = "subRight" }, - new MindMapDetails() { Id= "10", Label= "Ideas", ParentId ="5", Branch = "subRight" }, - new MindMapDetails() { Id= "11", Label= "Engagement", ParentId ="5", Branch = "subRight" }, - }; -} -``` - -![Mind Map](../images/mind_map.png) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/organizational-chart.md b/blazor/diagram-classic/layout/organizational-chart.md deleted file mode 100644 index 0400a1119e..0000000000 --- a/blazor/diagram-classic/layout/organizational-chart.md +++ /dev/null @@ -1,450 +0,0 @@ ---- -layout: post -title: Organizational chart in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Organizational chart in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Organizational Chart in Blazor Diagram Component - -An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Type) of layout should be set as an `OrganizationalChart`. - -The following code example illustrates how to create an organizational chart. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - ObservableCollection NodeCollection; - ObservableCollection ConnectorCollection; - //Initializing layout - DiagramLayout LayoutValue = new DiagramLayout() - { - //Sets layout type as OrganizationalChart... - Type = LayoutType.OrganizationalChart, - VerticalSpacing = 40, - HorizontalSpacing = 40, - }; - //Initializing node defaults - DiagramNode NodeDefaults = new DiagramNode() - { - Height = 40, - Width = 100, - //sets the node shape style - Style = new NodeShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Style= new AnnotationStyle() - { - Color="white", - Bold=true - } - } - } - }; - //Initializing connector defaults - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - }; - - protected override void OnInitialized() - { - //Initializing node and connectors - NodeCollection = new ObservableCollection() - { - new DiagramNode(){Id="node1",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Project Management"}}}, - new DiagramNode(){Id="node2",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="R&D Team"}}}, - new DiagramNode(){Id="node3",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Philosophy"}}}, - new DiagramNode(){Id="node4",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Organization"}}}, - new DiagramNode(){Id="node5",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Technology"}}}, - new DiagramNode(){Id="node6",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Funding"}}}, - new DiagramNode(){Id="node7",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Resource-Allocation"}}}, - new DiagramNode(){Id="node8",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Targeting"}}}, - new DiagramNode(){Id="node9",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Evaluation"}}}, - new DiagramNode(){Id="node10",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="HR-Team"}}}, - new DiagramNode(){Id="node11",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Recruiment"}}}, - new DiagramNode(){Id="node12",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Employee-Relation"}}}, - new DiagramNode(){Id="node13",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Production & Sales Team"}}}, - new DiagramNode(){Id="node14",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Design"}}}, - new DiagramNode(){Id="node15",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Operation"}}}, - new DiagramNode(){Id="node16",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Support"}}}, - new DiagramNode(){Id="node17",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Quality Assurance"}}}, - new DiagramNode(){Id="node18",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Customer Interaction"}}}, - new DiagramNode(){Id="node19",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Support and Maintenance"}}}, - new DiagramNode(){Id="node20",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Task Coordination"}}}, - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector(){Id="connector1",SourceID="node1",TargetID="node2"}, - new DiagramConnector(){Id="connector2",SourceID="node1",TargetID="node10"}, - new DiagramConnector(){Id="connector3",SourceID="node1",TargetID="node13"}, - new DiagramConnector(){Id="connector4",SourceID="node2",TargetID="node3"}, - new DiagramConnector(){Id="connector5",SourceID="node2",TargetID="node4"}, - new DiagramConnector(){Id="connector6",SourceID="node2",TargetID="node5"}, - new DiagramConnector(){Id="connector7",SourceID="node2",TargetID="node6"}, - new DiagramConnector(){Id="connector8",SourceID="node2",TargetID="node7"}, - new DiagramConnector(){Id="connector9",SourceID="node2",TargetID="node8"}, - new DiagramConnector(){Id="connector10",SourceID="node2",TargetID="node9"}, - new DiagramConnector(){Id="connector11",SourceID="node2",TargetID="node11"}, - new DiagramConnector(){Id="connector12",SourceID="node10",TargetID="node12"}, - new DiagramConnector(){Id="connector13",SourceID="node10",TargetID="node14"}, - new DiagramConnector(){Id="connector14",SourceID="node13",TargetID="node15"}, - new DiagramConnector(){Id="connector15",SourceID="node13",TargetID="node16"}, - new DiagramConnector(){Id="connector16",SourceID="node13",TargetID="node17"}, - new DiagramConnector(){Id="connector17",SourceID="node13",TargetID="node18"}, - new DiagramConnector(){Id="connector18",SourceID="node13",TargetID="node19"}, - new DiagramConnector(){Id="connector19",SourceID="node13",TargetID="node20"}, - }; - } -} -``` - -![OrgChart layout manager](../images/Orgchart.png) - -Organizational chart layout starts parsing from root and iterate through all its child elements. The [LayoutInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_LayoutInfo) property provides necessary information of a node’s children and the way to arrange (direction, orientation, offsets, etc.)them. The arrangements can be customized by overriding this function as explained. - -Node **LayoutInfo** property to set chart orientations, chart types, and offset to be left between parent and child nodes. The [LayoutInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_LayoutInfo) property is called to configure every subtree of the organizational chart. It takes the following arguments. - -1. **Node**: Parent node to that options are to be customized. -2. **Options**: Object to set the customizable properties. - -## Assistant - -Assistants are child item that have a different relationship with the parent node. They are laid out in a dedicated part of the tree. A node can be specified as an assistant of its parent by adding it to the assistants property of the argument `Assistants`. - -In the `Root` property, define the node that is set to be the parent of the assistant node. In the `Assistant` property, define the node that is set to be assistant for the parent node. Both properties should be defined in the "LayoutInfo" property. - -The following code example illustrates how to add assistants to layout. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - //Initializing layout - DiagramLayout LayoutValue; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - //Sets layout type as OrganizationalChart... - Type = LayoutType.OrganizationalChart, - VerticalSpacing = 50, - HorizontalSpacing = 40, - //Initialize the layout info for the org chart layout - LayoutInfo = new TreeInfo - { - Orientation = SubTreeOrientation.Vertical, - Offset = -20, - CanEnableSubTree = true, - //provides an assitant details for the root node - GetAssistantDetails = new AssistantsDetails() - { - Root = "General Manager", - Assistants = new string[] { "Assistant Manager" } - } - } - }; - } - //Initializing DataMap Setting - List DataMap = new List() - { - new DiagramDataMapSetting() { Property = "Annotations[0].Content", - Field = "Role" }, - }; - - //Initializing node defaults - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 150, - Height = 50, - Annotations = new ObservableCollection() { new DiagramNodeAnnotation() { Id = "label1", Style = new AnnotationStyle() { Color = "white" } }, }, - Style = new NodeShapeStyle { Fill = "darkcyan", StrokeColor = "white", } - }; - - //Initializing connector defaults - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 2 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - Style = new DecoratorShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", }, - } - }; - - public class OrgChartDataModel - { - public string Id { get; set; } - public string Team { get; set; } - public string Role { get; set; } - } - - public object DataSource = new List() - { - new OrgChartDataModel() { Id= "1", Role= "General Manager" }, - new OrgChartDataModel() { Id= "2", Role= "Assistant Manager", Team= "1" }, - new OrgChartDataModel() { Id= "3", Role= "Human Resource Manager", Team= "1" }, - new OrgChartDataModel() { Id= "4", Role= "Design Manager", Team= "1" }, - new OrgChartDataModel() { Id= "5", Role= "Operation Manager", Team= "1" }, - new OrgChartDataModel() { Id= "6", Role= "Marketing Manager", Team= "1" } - }; -} -``` - -![Organizational Layout with Assistants](../images/layout_assistants.png) - -## Customize layout - -Orientation, spacings, and position of the layout can be customized with a set of properties. - -To explore layout properties, refer to [Layout Properties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html). - -### Layout bounds - -Diagram provides support to align the layout within any custom rectangular area. For more information about bounds, refer to [Bounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Bounds). - -### Layout alignment - -The layout can be aligned anywhere over the layout bounds/viewport using the [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_HorizontalAlignment) and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_VerticalAlignment) properties of the layout. - -The following code illustrates how to align the layout at the top-left of the layout bounds. - -```csharp -//Initialize the layout with VerticalAlignment alignment as bottom in page -DiagramLayout LayoutValue = new DiagramLayout() -{ - Type = LayoutType.OrganizationalChart, - VerticalSpacing = 40, - HorizontalSpacing = 40, - VerticalAlignment = VerticalAlignment.Bottom -}; -``` - -The following table illustrates the different chart orientations and chart types. - -|Orientation|Type|Description|Example| -| -------- | ----------- | ------------- |------| -|Horizontal|Left|Arranges the child nodes horizontally at the left side of the parent.|![Horizontal Left](../images/HLeft.png)| -||Right|Arranges the child nodes horizontally at the right side of the parent.|![Horizontal Right](../images/HRight.png)| -||Center|Arranges the children like standard tree layout orientation.|![Horizontal Center](../images/HCenter.png)| -||Balanced|Arranges the leaf level child nodes in multiple rows.|![Horizontal Balance](../images/HBalance.png)| -|Vertical|Left|Arranges the children vertically at the left side of the parent.|![Vertical Left](../images/vLeft.png)| -||Right|Arranges the children vertically at the right side of the parent.|![Vertical Right](../images/vRight.png)| -||Alternate|Arranges the children vertically at both left and right sides of the parent.|![Vertical Alternate](../images/VAlternate.png)| - -The following code example illustrates how to set the vertical right arrangement to the leaf level trees. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - //Initializing layout - DiagramLayout LayoutValue; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - //Sets layout type as OrganizationalChart... - Type = LayoutType.OrganizationalChart, - VerticalSpacing = 50, - HorizontalSpacing = 40, - //Initialize the layout info for the org chart layout - LayoutInfo = new TreeInfo - { - Orientation = SubTreeOrientation.Vertical, - CanEnableSubTree = true, - } - }; - } - - //Initializing node defaults - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 150, - Height = 50, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "white" - } - }, - }, - Style = new NodeShapeStyle - { - Fill = "#6BA5D7", - StrokeColor = "black", - }, - LayoutInfo = new DiagramNodeLayoutInfo() - { - Orientation = Orientation.Vertical, - Type = SubTreeAlignments.Right - } - }; - - //Initializing connector defaults - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7", - StrokeWidth = 1 - }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - Style = new DecoratorShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - } - }; - - public class OrgChartDataModel - { - public string Id { get; set; } - public string Team { get; set; } - public string Role { get; set; } - } - - public object DataSource = new List() - { - new OrgChartDataModel() { Id= "1", Role= "General Manager" }, - new OrgChartDataModel() { Id= "2", Role= "Human Resource Manager", Team= "1" }, - new OrgChartDataModel() { Id= "3", Role= "Design Manager", Team= "1" }, - new OrgChartDataModel() { Id= "4", Role= "Operation Manager", Team= "1" }, - new OrgChartDataModel() { Id= "5", Role= "Marketing Manager", Team= "1" } - }; -} -``` - -![Vertical Right](../images/vrightLayout.png) - -### Layout spacing - -Layout provides support to add space horizontally and vertically between the nodes. The [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_HorizontalSpacing) and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_VerticalSpacing) properties of the layout allows you to set the space between the nodes horizontally and vertically. - -### Layout margin - -Layout provides support to add some blank space between the layout bounds/viewport and the layout. The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Margin) property of the layout allows you to set the blank space. - -```csharp -//Initialize the organizational chart layout with Margin -DiagramLayout LayoutValue = new DiagramLayout() -{ - Type = LayoutType.OrganizationalChart, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.TopToBottom, - Margin = new LayoutMargin() { Left = 20, Top = 20 }, -}; -``` - -### Layout orientation - -Diagram provides support to customize the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Orientation) of layout. You can set the desired orientation using `Layout.Orientation`. - -The following code illustrates how to arrange the nodes in a BottomToTop orientation. - -```csharp -//Initialize the layout with layout orientation as BottomToTop in page -DiagramLayout LayoutValue = new DiagramLayout() -{ - Type = LayoutType.OrganizationalChart, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.BottomToTop, -}; -``` - -### Fixed node - -Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the [FixedNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_FixedNode) of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed. - -```csharp -//Initialize the organizational chart layout with FixedNode -DiagramLayout LayoutValue = new DiagramLayout() -{ - Type = LayoutType.OrganizationalChart, - FixedNode = "node1", - HorizontalSpacing = 40, - VerticalSpacing = 40, -}; -``` - -### Expand and collapse - -Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpanded property allows you to expand/collapse its children. The following code example shows how to expand/collapse the children of a node. - -```cshtml -@code{ - DiagramNode NodeDefaults = new DiagramNode() - { - //Initialize a expand icon for the node - ExpandIcon = new NodeExpandIcon() - { - Height = 15, - Width = 15, - Shape = IconShapes.Plus, - Fill = "lightgray", - Offset = new IconOffset() { X = .5, Y = .85 }, - }, - //Initialize a collapse icon for the node - CollapseIcon = new NodeCollapseIcon() - { - Height = 15, - Width = 15, - Shape = IconShapes.Minus, - Offset = new IconOffset() { X = .5, Y = .85 }, - } - } -} -``` - -In the previous example, while expanding/collapsing a node, it is set as fixed node in order to prevent it from repositioning. - -## Refresh layout - -Diagram allows to refresh the layout at runtime. Use the below code example to refresh the layout. - -```csharp -//update the layout at runtime. -diagram.DoLayout(); - -//Here, diagram is instance of SfDiagram. -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/radial-tree-layout.md b/blazor/diagram-classic/layout/radial-tree-layout.md deleted file mode 100644 index 841120c32d..0000000000 --- a/blazor/diagram-classic/layout/radial-tree-layout.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -layout: post -title: Radial tree layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Radial tree layout in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Radial Tree Layout in Blazor Diagram Component - -The radial tree layout arranges nodes on a virtual concentric circle around a root node. Sub-trees formed by the branching of child nodes are located radially around the child nodes. This arrangement result in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node level in the hierarchy. The layout [Root](https://help.syncfusion.com/cr/blazor#Syncfusion_Blazor_Diagrams_DiagramLayout_Root/Syncfusion.Blazor.html) property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers one of the diagram nodes as the root node. - -To arrange nodes in a radial tree structure, set the [Type](https://help.syncfusion.com/cr/blazor#Syncfusion_Blazor_Diagrams_DiagramLayout_Type/Syncfusion.Blazor.html) of the layout as `RadialTree`. The following code illustrates how to arrange the nodes in a radial tree structure. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - //Uses layout to auto-arrange nodes on the diagram page - DiagramLayout LayoutSetting = new DiagramLayout() - { - //Sets layout type as RadialTree... - Type = LayoutType.RadialTree, - VerticalSpacing = 20, - HorizontalSpacing = 20 - }; - - //sets Data map setting - List DataMap { get; set; } = new List() { - //Data mapping for the label - new DiagramDataMapSetting() { Property = "Annotations[0].Content", - Field = "Name" }, - }; - - //Sets the default properties for nodes and connectors - DiagramNode NodeDefaults = new DiagramNode() - { - Height = 100, - Width = 100, - //sets the default node's shape - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - //sets the default node's annotation with style - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "white" - } - } - }, - //sets the default node's shape style - Style = new NodeShapeStyle - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Syncfusion.Blazor.Diagrams.Segments.Straight, - //sets the default connector's style - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7", - StrokeWidth = 2 - }, - //sets the connector's target decorator - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - //sets decorator shape style - Style = new DecoratorShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - } - }; - - //Initialize radial tree data - public class RadialTreeDetails - { - public string Id { get; set; } - public string Name { get; set; } - public string Designation { get; set; } - public string ReportingPerson { get; set; } - } - - //Configures data source for diagram - public object DataSource = new List() - { - new RadialTreeDetails {Id = "parent", Name = "Maria Anders",Designation = "Managing Director", ReportingPerson = "" }, - new RadialTreeDetails {Id = "1", Name= "Ana Trujillo", Designation= "Project Manager", ReportingPerson= "parent" }, - new RadialTreeDetails {Id ="2",Name= "Lino Rodri", Designation="Project Manager",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="3",Name = "Philip Cramer",Designation = "Project Manager",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="4",Name= "Pedro Afonso",Designation= "Project Manager",ReportingPerson= "parent" }, - new RadialTreeDetails {Id ="5", Name="Anto Moreno",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="6",Name = "Elizabeth Roel",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="8",Name= "Eduardo Roel",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="9",Name= "Howard Snyd",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="10",Name= "Daniel Tonini",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="11",Name= "Nardo Batista",Designation= "Project Lead",ReportingPerson= "parent" }, - }; -} -``` - -![Radial Tree](../images/radial-tree-layout.png) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/symmetric-layout.md b/blazor/diagram-classic/layout/symmetric-layout.md deleted file mode 100644 index 49aabcf112..0000000000 --- a/blazor/diagram-classic/layout/symmetric-layout.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: post -title: Symmetric layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Symmetric layout in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Symmetric layout in Blazor Diagram Component - -The symmetric layout has been formed using nodes position by closer together or pushing them further apart. This is repeated iteratively until the system comes to an equilibrium state. - -The layout’s [SpringLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_SpringLength), defined as how long edges should be, ideally. This will be the resting length for the springs. Edge attraction and vertex repulsion forces to be defined by using layout’s [SpringFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_SpringFactor), the more sibling nodes repel each other. The relative positions do not change any more from one iteration to the next. The number of iterations can be specified by using layout’s [MaxIteration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_MaxIteration). - -The following code illustrates how to arrange the nodes in a radial tree structure. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - //Initializing SymmetricalLayout layout - DiagramLayout LayoutValue = new DiagramLayout() - { - //Sets layout type as SymmetricalLayout... - Type = LayoutType.SymmetricalLayout, - SpringFactor = 0.8, - SpringLength = 80, - MaxIteration = 500, - Margin = new LayoutMargin() { Top = 20, Left = 20 } - }; - - //Initializing DataMapSetting - List DataMap = new List() - { - new DiagramDataMapSetting() - { - Property = "Annotations[0].Content", - Field = "Type" - }, - }; - - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 25, - Height = 25, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "black" - } - } - }, - Style = new NodeShapeStyle - { - Fill = "#ff6329", - StrokeColor = "black" - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - } - }; - - TreeInfo treeLayoutInfo = new TreeInfo() - { - Orientation = SubTreeOrientation.Vertical, - Offset = -20, - GetAssistantDetails = new AssistantsDetails() - { - Root = "General Manager", - Assistants = new string[] {"Assistant Manager"} - } - }; - - DiagramConnector ConnectorDefaults = new DiagramConnector - { - Type = Syncfusion.Blazor.Diagrams.Segments.Straight, - }; - - public class SymmetricalDetails - { - public string Id { get; set; } - public string Source { get; set; } - public string Type { get; set; } - } - - public object DataSource = new List() - { - new SymmetricalDetails() { Id= "1",Source="", Type = "Server" }, - new SymmetricalDetails() { Id= "2", Source="1", Type= "Server" }, - new SymmetricalDetails() { Id= "3", Source="1", Type= "Server" }, - new SymmetricalDetails() { Id= "4", Source="2", Type= "Server" }, - new SymmetricalDetails() { Id= "5", Source="2", Type= "Server" }, - new SymmetricalDetails() { Id= "6", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "7", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "8", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "9", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "10", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "11", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "12", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "13", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "14",Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "15", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "16", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "17", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "18", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "19", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "20", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "21", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "22", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "23",Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "24", Source="3", Type= "Hub" }, - }; -} -``` - -![SymmetricalLayout](../images/symmetricallayout.png) - -## Customize the layout - -You can change the following properties of the symmetric layout. - -* Spring length -* Spring factor -* Max iteration - -To explore layout properties, refer to the [Layout Properties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html). - -The following code is used to change the properties at runtime. - -```csharp -public void UpdateProperties() { - Diagram.Layout.SpringLength += 10; - Diagram.Layout.SpringFactor += 10; - Diagram.Layout.MaxIteration += 20; -} -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) - -* [How to generate the organization chart](./organizational-chart) diff --git a/blazor/diagram-classic/methods.md b/blazor/diagram-classic/methods.md deleted file mode 100644 index 42f028246f..0000000000 --- a/blazor/diagram-classic/methods.md +++ /dev/null @@ -1,3275 +0,0 @@ ---- -layout: post -title: Diagram Methods in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Diagram Methods in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Diagram Methods in Blazor Diagram Component - -The following methods are used to perform the diagram functionalities. - -## Nodes - -### Add the node - -You can add the node at runtime by using the [AddNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddNode_Syncfusion_Blazor_Diagrams_DiagramNode_System_Nullable_System_Boolean__) method. The following code snippet shows how to add the node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - // Add node at runtime - public void AddNodeInCollection() - { - DiagramNode Node1 = new DiagramNode() - { - Id = "New Node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100 - }; - Diagram.AddNode(Node1); - } -} -``` - -![Add Node at Rutime](images/AddNode-Method.gif) - -### Remove the node and connector - -You can remove the node at runtime by using the [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Remove_System_Object_) method. - -The following code shows how to remove a node at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Remove Node at runtime - public void RemoveNode() - { - Diagram.Remove(NodeCollection[0]); - } - - // Remove connector at runtime - public void RemoveConnector() - { - Diagram.Remove(ConnectorCollection[0]); - } -} -``` - -![Remove Objects at Rutime](images/Remove-Obj-Method.gif) - -### Add child to group node - -You can add the child to group node at runtime by using the [AddChildToGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddChildToGroup_Syncfusion_Blazor_Diagrams_DiagramNode_System_Object_) method. The following code shows how to add child in a group. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node1 = CreateNode("node1", 100, 100, "Node1"); - DiagramNode node2 = CreateNode("node2", 300, 100, "Node2"); - DiagramNode groupnode = new DiagramNode(); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(groupnode); - } - - public DiagramNode CreateNode(string Id, double OffsetX, double OffsetY, string Content) - { - DiagramNode Node = new DiagramNode() - { - Id = Id, - OffsetX = OffsetX, - OffsetY = OffsetY, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id="annotation1", - Content = Content, - Style=new AnnotationStyle(){Color="white", Fill="transparent",StrokeColor="None"}, - } - } - }; - return Node; - } - - public void AddChildNode() - { - DiagramNode Child = CreateNode("node2", 300, 100, "Node2"); - // Add child node to group - Diagram.AddChildToGroup(NodeCollection[2], Child); - } -} -``` - -### Get the node - -You can find and get the node from the id property itself. The following code shows how to find the node in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - // Add node at runtime - public void GetNode() - { - // Find the node - DiagramNode Node = Diagram.GetNode("Node1"); - Node.Style.StrokeColor = "black"; - } -} -``` - -![Get Node](images/GetNode-Method.gif) - -### Get the edges - -You can find what are all the in and out connectors that are connected to the node by using the [GetEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetEdges_System_String_System_Boolean_) method. The following code snippet shows how to get the in and out connector list what are the connectors are connected to the node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // Reference of the diagram - SfDiagram Diagram; - // Define node and connector collection - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - // Set the default value of the node - DiagramNode NodeDefaults = new DiagramNode() - { - // Size of the node - Width = 80, - Height = 50, - // Style of the node - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, - OffsetY = 100 - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 198, OffsetY = 189 - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 272, OffsetY = 100 - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - // Sets the unique id, source node, and taget node - Id = "Connector1", SourceID = "Node1", TargetID = "Node2", - // Sets the type of the connector - Type = Segments.Orthogonal - }, - new DiagramConnector() - { - // Sets the unique id, source node, and taget node - Id = "Connector2", SourceID = "Node2", TargetID = "Node3", - // Sets the type of the connector - Type = Segments.Orthogonal - }, - new DiagramConnector() - { - // Sets the unique id, source node, and taget node - Id = "connector3", SourceID = "Node3", TargetID = "Node1", - // Sets the type of the connector - Type = Segments.Orthogonal - } - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - //OnAfterRenderAsync will be triggered after the component rendered. - await Task.Delay(1500); - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[1] }, null); - } - } - - // The GetEdges method is used to get the connectors that connected to nodes. - public async Task UpdateEdges() - { - string NodeId = Diagram.SelectedItems.Nodes[0].Id; - // Find the out connectors connected from the node - string[] OutEdges = await Diagram.GetEdges(NodeId, true); - // Find the in connectors connected to the node - string[] InEdges = await Diagram.GetEdges(NodeId, false); - string[] edges = InEdges.Concat(OutEdges).ToArray(); - for (int i = 0; i < edges.Length; i++) - { - // Get the connector from id - DiagramConnector connector = Diagram.GetConnector(edges[i]); - // Change the style of the connector - connector.Style.StrokeColor = "#1413F8"; - connector.TargetDecorator.Style.StrokeColor = "#1413F8"; - connector.TargetDecorator.Style.Fill = "#1413F8"; - } - } -} -``` - -![Get Edges](images/GetEdges-Method.gif) - -### Get the parent information - -You can find the parent of the object by using the [GetParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetParentId_System_String_) method. The following code shows how to get the parent information of the object. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node1 = CreateNode("node1", 100, 100, "Node1"); - DiagramNode node2 = CreateNode("node2", 300, 100, "Node2"); - DiagramNode groupnode = new DiagramNode(); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(groupnode); - } - - public DiagramNode CreateNode(string Id, double OffsetX, double OffsetY, string Content) - { - DiagramNode Node = new DiagramNode() - { - Id = Id, - OffsetX = OffsetX, - OffsetY = OffsetY, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id="annotation1", - Content = Content, - Style=new AnnotationStyle(){Color="white", Fill="transparent",StrokeColor="None"}, - } - } - }; - return Node; - } - - public async void GetParentNode() - { - // Get the parent id - string parentId = await Diagram.GetParentId("node2"); - DiagramNode Parent = Diagram.GetNode(parentId); - Parent.Style.StrokeColor = "#6BA5D7"; - } -} -``` - -![Get parent](images/GetParentId-Method.gif) - -## Connectors - -### Add the connector - -You can add a connector at runtime by using the server-side method [AddConnector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddConnector_Syncfusion_Blazor_Diagrams_DiagramConnector_) in the Diagram component. The following code explains how to add connectors at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - -@code -{ - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints Constraints = SnapConstraints.None; - - protected void AddConnector() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Straight, - }; - //Add the connector at the run time. - Diagram.AddConnector(diagramConnector); - } -} -``` - -![Add Connector at runtime](images/AddConnector-Method.gif) - -### Get the connector - -You can get the connector from property `Id` by using the [GetConnector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetConnector_System_String_) method. The following code shows how to find the connector in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - // A connector is created and stored in the connector collection. - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - } - }; - } - - public void GetConnector() - { - // Get the connector - DiagramConnector Connector = Diagram.GetConnector("Connector1"); - Connector.SourcePoint.X += 10; - } -} -``` - -![Get Connector](images/GetConnector-Method.gif) - -### Reset the segments - -You can arrange the connector segments without overlapping the nodes by using the [ResetSegments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ResetSegments) method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - SfDiagram Diagram; - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - public DiagramConstraints Constraints { get; set; } - - protected override void OnInitialized() - { - // Add nodes to collection - NodeCollection.Add(CreateNode("Node1", 100, 100, "Node1")); - NodeCollection.Add(CreateNode("Node2", 300, 100, "Node2")); - NodeCollection.Add(CreateNode("Node3", 500, 100, "Node3")); - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", SourceID = "Node1", TargetID = "Node3", - Type = Segments.Orthogonal - } - }; - } - - public DiagramNode CreateNode(string Id, double OffsetX, double OffsetY, string Content) - { - DiagramNode Node = new DiagramNode() - { - Id = Id, - OffsetX = OffsetX, OffsetY = OffsetY, - Height = 100, Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" } - }; - return Node; - } - - public void ResetSegments() - { - Diagram.BeginUpdate(); - Diagram.Constraints = DiagramConstraints.Default | DiagramConstraints.LineRouting; - Diagram.EndUpdate(); - // update the segments based on routing - Diagram.ResetSegments(); - } -} -``` - -![Reset the connector segments](images/ResetSegments-Method.gif) - -## Annotations - -### Add the annotation - -Annotations can be added at runtime by using the [AddLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddLabels_System_Object_System_Object_) method. The following code explains how to add an annotation to a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - // Reference to diagram - SfDiagram diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - SnapConstraints snapConstraints; - - protected override void OnInitialized() - { - snapConstraints = SnapConstraints.None; - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node); - } - - //Method to add labels at runtime - public void AddLabel() - { - ObservableCollection annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Annotation" }, - }; - // AddLabels method is used to add annotations at run time - diagram.AddLabels(diagram.Nodes[0], annotations); - } -} -``` - -![Add Annoatation at runtime](images/AddLabel-Method.gif) - -### Remove the annotation - -A collection of annotations can be removed from the node by using the [RemoveLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_RemoveLabels_System_Object_System_Object_) method. The following code explains how to remove an annotation to a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label", Content = "Annotation" }, - }; - NodeCollection.Add(node); - } - - //Method to remove labels at runtime - public void RemoveLabel() - { - ObservableCollection annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label", Content = "Annotation" } - }; - // RemoveLabels method is used to remove label at run time. - diagram.RemoveLabels(diagram.Nodes[0], annotations); - } -} -``` - -![Remove the annotation](images/AddLabel-Method.gif) - -### Edit the annotation - -You can change the annotation content by using the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_StartTextEdit_System_Object_System_String_) method. The following code shows how to edit the content of the annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - // Reference to diagram - SfDiagram Diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Id = "Annotation1", Content = "Annotation" } - } - }; - NodeCollection.Add(node); - } - - //Method to edit the annotation at runtime - public void AnnotationEditing() - { - Diagram.StartTextEdit(NodeCollection[0], "Annotation1"); - } -} -``` - -![Annotation Editing](images/StartTextEdit-Method.gif) - -## Ports - -### Add the ports - -You can add ports to a node at runtime by using the [AddPorts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddPorts_Syncfusion_Blazor_Diagrams_DiagramNode_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagrams_DiagramPort__) methods. The following code shows how to add new port in a node. - -```csharp -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - //A node is created and stored in nodes array - DiagramNode node1 = new DiagramNode() - { - //Position of the node - OffsetX = 250, - OffsetY = 250, - //Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } - - public void AddPorts() - { - // Initialize port collection - ObservableCollection ports = new ObservableCollection() - { - new DiagramPort() { Id = "port1", Offset = new NodePortOffset() { X = 0, Y = 0.5 }, Visibility = PortVisibility.Visible }, - new DiagramPort() { Id = "port2", Offset = new NodePortOffset() { X = 1, Y = 0.5 }, Visibility = PortVisibility.Visible }, - new DiagramPort() { Id = "port3", Offset = new NodePortOffset() { X = 0.5, Y = 0 }, Visibility = PortVisibility.Visible }, - new DiagramPort() { Id = "port4", Offset = new NodePortOffset() { X = 0.5, Y = 1 }, Visibility = PortVisibility.Visible } - }; - Diagram.AddPorts(NodeCollection[0], ports); - } -} -``` - -![Add ports at runtime](images/AddPorts-Method.gif) - -### Remove the ports - -You can remove the existing ports in a node by using the [RemovePorts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_RemovePorts_Syncfusion_Blazor_Diagrams_DiagramNode_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagrams_DiagramPort__) method. The following code shows how to remove the ports in a diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SnapConstraints constraints; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - constraints = SnapConstraints.None; - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="red", StrokeColor="black", StrokeWidth=2}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Circle - } - }, - }; - NodeCollection.Add(node1); - } - - public void RemovePorts() - { - (NodeCollection[0].Ports as ObservableCollection).RemoveAt(0); - } -} -``` - -![Remove Ports at runtime](images/RemovePorts-Method.gif) - -## Print and exporting - -### Print the diagram - -You can print the diagram area by using the [Print](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Print_Syncfusion_Blazor_Diagrams_IPrintOptions_) method. The following code shows how to print the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - // Print the diagram - public void PrintDiagram() - { - IPrintOptions PrintOptions = new IPrintOptions() { PageHeight = 500, PageWidth = 500 }; - Diagram.Print(PrintOptions); - } -} -``` - -### Export the diagram - -You can export the diagram area by using the [ExportDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ExportDiagram_Syncfusion_Blazor_Diagrams_IExportOptions_) method. The following code shows how to export the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - // Export the diagram - public void ExportDiagram() - { - IExportOptions ExportOptions = new IExportOptions() { PageWidth = 500, PageHeight = 500 }; - Diagram.ExportDiagram(ExportOptions); - } -} -``` - -## Save and load the diagram - -* You can save the diagram to JSON data by using the [SaveDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SaveDiagram) method. The following code is used how to save the diagram. - -* You can load the diagram from JSON data by using the [LoadDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_LoadDiagram_System_String_) method. The following code is used how to load the diagram at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - string SaveString; - - // Save the diagram - public async void SaveDiagram() - { - SaveString = await Diagram.SaveDiagram(); - } - - // Load the diagram - public void LoadDiagram() - { - Diagram.LoadDiagram(SaveString); - } -} -``` - -![Save and Load the diagram](images/Save-and-Load-Method.gif) - -## Layers - -### Add the layers - -You can add new layers in a diagram by using the `AddLayers` method. The following code shows how to add the layers to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } } - }; - } - - // Add layer at runtime - public void AddLayerCollection() - { - DiagramNode Node1 = new DiagramNode() - { - Id = "New Node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - Diagram.AddLayer(new DiagramLayer() { Id = "Layer2" }, new Object[] { Node1 }); - } -} -``` - -![Add new layers](images/AddLayer-Method.gif) - -### Remove the layer - -You can remove the layers in a diagram by using the `RemoveLayers` method. The following code shows how to remove the layers to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } } - }; - } - - // Remove layer at runtime - public void RemoveLayers() - { - Diagram.RemoveLayer("Layer1"); - } -} -``` - -![Remove layer](images/RemoveLayer-Method.gif) - -### Clone the layer - -You can clone the layers in a diagram by using the `CloneLayer` method. The following code shows how to clone the layers to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } } - }; - } - - // Clone layer at runtime - public void CloneLayers() - { - Diagram.CloneLayer("Layer1"); - } -} -``` - -![Clone layer](images/CloneLayer-Method.gif) - -### Get the active layer - -You can get the active layer in a diagram by using the `GetActiveLayer` method. The following code shows how to find the active layer of the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 300, OffsetY = 200, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Get active layer at runtime - public void GetActiveLayer() - { - Diagram.GetActiveLayer(); - } -} -``` - -### Set the active layer - -You can set the active layer in a diagram by using the `SetActiveLayer` method. The following code shows how to set the active layer of the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Set active layer at runtime - public async void SetActiveLayer() - { - DiagramLayer layer = await Diagram.GetActiveLayer(); - await Diagram.SetActiveLayer("Layer1"); - layer = await Diagram.GetActiveLayer(); - } -} -``` - -### Bring the layer to forward - -You can change the layer order, to get the layer forward by using the `BringLayerForward` method. The following code shows how to bring forward the particular layer in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Bring layer to forward - public void BringLayerToForward() - { - Diagram.BringLayerForward("Layer1"); - } -} -``` - -![Bring Layer Forward](images/BringLayerForward-Method.gif) - -### Send the layer to backward - -You can change the layer order, to get the layer forward by using the `SendLayerBackward` method. The following code shows how to bring forward the particular layer in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Add node at runtime - public void SendLayerToBackward() - { - Diagram.SendLayerBackward("Layer2"); - } -} -``` - -![Send Layer Backward](images/SendLayerBackward-Method.gif) - -### Move object from one to another layer - -You can move node or connector from one layer to another layer by using the [MoveObjects](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_MoveObjects_System_Collections_Generic_List_System_String__System_String_) method. The following code shows how to move an object from one layer to another. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Move object one layer to another layer - public async void MoveObjectsLayer() - { - List nodelist = new List() { "Node1" }; - await Diagram.MoveObjects(nodelist, "Layer2"); - } -} -``` - -## Layout - -### Refresh the layout - -Diagram allows you to refresh the layout at runtime. Use the following code example to refresh the layout. - -```csharp -//update the layout at runtime. -diagram.DoLayout(); - -//Here, diagram is instance of SfDiagram. -``` - -## Sizing Commands - -A sizing commands enable to equally size the selected nodes with respect to the first selected object. - -`SizingOptions` are as follows: - -* Width: Scales the width of the selected objects. -* Height: Scales the height of the selected objects. -* Size: Scales the selected objects both vertically and horizontally. - -The following code example shows how to execute the SameSize commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 70, Height = 40, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 100, OffsetY = 300, - // Size of the node - Width = 60, Height = 80, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 100, OffsetY = 200, - // Size of the node - Width = 50, Height = 50, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node4", - // Position of the node - OffsetX = 200, OffsetY = 250, - // Size of the node - Width = 70, Height = 90, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - } - - // Same width - public async void OnSameWidth() - { - await Diagram.Select(new ObservableCollection() { Diagram.Nodes[0], Diagram.Nodes[1], Diagram.Nodes[2] }, true); - Syncfusion.Blazor.Diagrams.SizingOptions sizingOptions = Syncfusion.Blazor.Diagrams.SizingOptions.Width; - await Diagram.SameSize(sizingOptions); - } - - // Same Height - public async void OnSameHeight() - { - await Diagram.Select(new ObservableCollection() { Diagram.Nodes[0], Diagram.Nodes[1], Diagram.Nodes[2] }, true); - //Changing the selected nodes to same height - Syncfusion.Blazor.Diagrams.SizingOptions sizingOptions = Syncfusion.Blazor.Diagrams.SizingOptions.Height; - await Diagram.SameSize(sizingOptions); - } - - // Same Height - public async void OnSameSize() - { - await Diagram.SelectAll(); - //Changing the selected nodes to same size - Syncfusion.Blazor.Diagrams.SizingOptions sizingOptions = Syncfusion.Blazor.Diagrams.SizingOptions.Size; - await Diagram.SameSize(sizingOptions); - } -} -``` - -![Sizing Commands](images/Sizing-Commands-Method.gif) - -## Alignment commands - -Alignment commands enable you to align the selected or defined objects such as nodes and connectors with respect to the selection boundary. Refer to the Align commands that shows how to use align methods in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 50, OffsetY = 100, - // Size of the node - Width = 70, Height = 40, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 292, OffsetY = 293, - // Size of the node - Width = 60, Height = 80, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 166, OffsetY = 184, - // Size of the node - Width = 50, Height = 50, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node4", - // Position of the node - OffsetX = 435, OffsetY = 197, - // Size of the node - Width = 70, Height = 90, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - } - - public async void OnAlign() - { - Diagram.SelectAll(); - //Aligns the selected items to top - Diagram.Align(AlignmentOptions.Top, null, AlignmentMode.Selector); - } -} -``` - -![Alignment Commands](images/Align-Method.gif) - -## Distribution commands - -The Distribute commands enable to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 70, Height = 40, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 156, OffsetY = 305, - // Size of the node - Width = 60, Height = 80, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 239, OffsetY = 188, - // Size of the node - Width = 50, Height = 50, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node4", - // Position of the node - OffsetX = 392, OffsetY = 179, - // Size of the node - Width = 70, Height = 90, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - } - - public async void OnDistribution() - { - Diagram.SelectAll(); - //Distribute the selected items to middle - Diagram.Distribute(DistributeOptions.Middle); - } -} -``` - -![Distribution](images/Distribute-Method.gif) - -## Clipboard commands - -A Clipboard commands are used to cut, copy, or paste the selected elements. Refer to the following link that shows how to use clipboard methods in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 300, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 300, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - } - - // Cut the selected node - public async void OnCut() - { - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, true); - Diagram.Cut(); - } - - // Copy the selected node - public async void OnCopy() - { - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, true); - Diagram.Copy(); - } - - // Paste the copied node - public async void OnPaste() - { - Diagram.Paste(); - } -} -``` - -![Clipboard Commands](images/Clipboard-Commands.gif) - -## Grouping commands - -Grouping commands are used to group or ungroup the selected elements on the diagram. Refer to the following link that shows how to use grouping commands in the diagram. - -* A `Group` method is used to the selected nodes and connectors in the diagram. - -* A `UnGroup` method is used to the selected nodes and connectors in the diagram. - -The following code shows how to execute the grouping commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Group the selected objects - public void OnGroup() - { - Diagram.SelectAll(); - Diagram.Group(); - } - - // UnGroup the selected group - public void OnUnGroup() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.UnGroup(); - } -} -``` - -![Grouping Commands](images/Grouping-Commands.gif) - -## Order commands - -Order commands enable you to visually arrange the selected objects such as nodes and connectors on the page. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Id="Annotation1", Content="Node1" } - } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 179, OffsetY = 170, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Id="Annotation1", Content="Node2" } - } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 339, OffsetY = 169, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Id="Annotation1", Content="Node3" } - } - }, - new DiagramNode() - { - Id = "Node4", - // Position of the node - OffsetX = 250, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Id="Annotation1", Content="Node4" } - } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Send the object to back - public async void OnSendToBack() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.SendToBack(); - } - - // bring the object to front - public async void OnBringToFront() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.BringToFront(); - } - - // Send the object to backward - public async void OnSendBackWard() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.SendBackward(); - } - - // Move the object to forward - public async void OnMoveForward() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.MoveForward(); - } -} -``` - -![Order Commands](images/Order-Commands.gif) - -## Interaction - -Diagram provides the support to interact the nodes, connectors, and so on. - -### Selection - -* A object can be select at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Select_System_Object_System_Nullable_System_Boolean__) method. - -* You can select all the objects in the diagram by using the [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectAll) method. - -* You can clear the selected objects by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearSelection) method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode Node1 = new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 300, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(Node1); - DiagramConnector Connector1 = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(Connector1); - } - - public void OnSelectNode() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - } - - public void OnSelectConnector() - { - // Select the connector - Diagram.Select(new ObservableCollection() { Diagram.Connectors[0] }, null); - } - - public void OnMultipleSelection() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - // Enables the multple selection - Diagram.Select(new ObservableCollection() { Diagram.Connectors[0] }, true); - } - - public void OnSelectAll() - { - // Select all the elements in the diagram - Diagram.SelectAll(); - } - - public void OnClearSelection() - { - // clear selection in the diagram - Diagram.ClearSelection(); - } -} -``` - -![Selection Methods](images/Selection-Methods.gif) - -### Drag - -A object can be drag at runtime by using the [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Drag_System_Object_System_Double_System_Double_) method. The following code explains how to drag the node by using the drag method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode Node1 = new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 300, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(Node1); - DiagramConnector Connector1 = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(Connector1); - } - - public void OnDragNode() - { - // Drag the node - Diagram.Drag(Diagram.Nodes[0], 10, 10); - } - - public void OnDragConnector() - { - // Drag the connector - Diagram.Drag(Diagram.Connectors[0], 10, 10); - } -} -``` - -![Drag Method](images/Drag-Method.gif) - -### Resize - -A node can be resize at runtime by using the [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Scale_System_Object_System_Double_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. The following code explains how to resize the node by using the scale method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints constraints = SnapConstraints.None; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - - public void OnResize() - { - // Resize the node - Diagram.Scale(Diagram.Nodes[0], 0.5, 0.5, new PointModel() { X = 0, Y = 0 } ); - } -} -``` - -![Scale](images/Resize-Method.gif) - -### Rotate - -A node can be rotate at runtime by using the [Rotate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Rotate_System_Object_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. The following code explains how to rotate the node by using method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints constraints = SnapConstraints.None; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - - public void OnRotate() - { - // Rotate the node - Diagram.Rotate(Diagram.Nodes[0], Diagram.Nodes[0].RotateAngle+10); - } -} -``` - -![Rotate Method](images/Rotate-Method.gif) - -### Drag source end - -You can drag the source point of the connector by using the [DragSourceEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DragSourceEnd_Syncfusion_Blazor_Diagrams_DiagramConnector_System_Double_System_Double_) method. The following code is used to change the source end. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints constraints = SnapConstraints.None; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - - public void OnDragSourceEnd() - { - // Drag the source end point - Diagram.DragSourceEnd(Diagram.Connectors[0], 10, 10); - } -} -``` - -### Drag target end - -You can drag the target point of the connector by using the [DragTargetEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DragTargetEnd_Syncfusion_Blazor_Diagrams_DiagramConnector_System_Double_System_Double_) method. The following code is used to change the target end. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints constraints = SnapConstraints.None; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - - public void OnDragTargetEnd() - { - // Drag the target end point - Diagram.DragTargetEnd(Diagram.Connectors[0], 10, 10); - } -} -``` - -### Nudge - -You can move a single or some of the distance of the selected node by using the [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Nudge_Syncfusion_Blazor_Diagrams_NudgeDirection_System_Nullable_System_Double__System_Nullable_System_Double__) method. - -* NudgeDirection - used to consider the direction to move the selected object. -* X, Y - which distance to be moved. By default, X and Y value is set to be 1. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode Node1 = new DiagramNode() - { - Id = "Node1" - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(Node1); - DiagramConnector Connector1 = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(Connector1); - } - - public void OnSelectNode() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - } - - public void OnSelectConnector() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Connectors[0] }, null); - } - - public void OnNudgeLeft() - { - // Selected objects move one step to left - Diagram.Nudge(NudgeDirection.Left); - } - - public void OnNudgeRight() - { - // Selected objects move one step to right - Diagram.Nudge(NudgeDirection.Right); - } - - public void OnNudgeTop() - { - // Selected objects move one step to top - Diagram.Nudge(NudgeDirection.Up); - } - - public void OnNudgeBottom() - { - // Selected objects move one step to bottom - Diagram.Nudge(NudgeDirection.Down); - } -} -``` - -![Nudge Methods](images/Nudge-Method.gif) - -## View Port - -### Zoom - -You can zoom in or zoom out the diagram. The following code how to zoom the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Zoom the diagram - public void OnZoom() - { - Diagram.Zoom(0.5); - } - - public void OnZoomRegion() - { - ZoomOptions Options = new ZoomOptions() - { - FocusPoint = new PointModel() - { - X = 100, - Y = 100 - }, - Type = ZoomTypes.ZoomIn, - ZoomFactor = 2.5 - }; - Diagram.ZoomTo(Options); - } -} -``` - -![Zoom the diagram](images/Zoom-Method.gif) - -### Pan - -You can move the diagram view port by using the [Pan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Pan_System_Double_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. The following code hows how to pan the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Pan the diagram - public void OnPan() - { - Diagram.Pan(100, 20); - } -} -``` - -![Pan the diagram](images/Pan-Method.gif) - -### Fit to page - -You can fit the diagram elements within the diagram bounds. The following code is used to how to fit all the elements in the diagram area. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Fit all the elemnts in the diagram view port - public void OnFitToPage() - { - Diagram.FitToPage(); - } -} -``` - -![Fit to page](images/FitToPage-Method.gif) - -### Update view port - -You can change the size of the diagram area, after that you can update the view port by using the [UpdateViewPort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_UpdateViewPort) method. The following code shows how to update the view port. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Update the view port - public void OnUpdateViewPort() - { - Diagram.BeginUpdate(); - Diagram.Width = "700px"; - Diagram.Height = "700px"; - Diagram.EndUpdate(); - Diagram.UpdateViewPort(); - } -} -``` - -### Bring to center - -You can view the particular bounds to center of the view port by using the [BringToCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringToCenter_System_Object_) method. The following code shows how to use the method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection(){ - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Bring into center of the particular bounds - public void OnBringToCenter() - { - System.Drawing.Rectangle Bounds = new System.Drawing.Rectangle() { X = 500, Y = 500, Height = 200, Width = 200 }; - Diagram.BringToCenter(Bounds); - } -} -``` - -### Bring to view - -You can view the particular bounds to the view port by using the [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringIntoView_System_Object_) method. The following code show how to use the method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Bring into view of the particular bounds - public void OnBringToView() - { - System.Drawing.Rectangle Bounds = new System.Drawing.Rectangle() { X = 500, Y = 500, Height = 200, Width = 200 }; - Diagram.BringIntoView(Bounds); - } -} -``` - -### Get diagram bounds - -You can get the diagram bounds by using the [GetDiagramBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetDiagramBounds) method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Get the diagram bounds - public async void OnGetDiagramBounds() - { - Object Bounds = await Diagram.GetDiagramBounds(); - } -} -``` - -### Clear - -You can clear all the elements in diagram by using the [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Clear) method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Bring into view of the particular bounds - public void OnUpdateViewPort() - { - Diagram.BeginUpdate(); - Diagram.Width = "700px"; - Diagram.Height = "700px"; - Diagram.EndUpdate(); - Diagram.UpdateViewPort(); - } - - // Clear all objects in diagram - public void OnClear() - { - Diagram.Clear(); - } -} -``` - -![Diagram Clear](images/Clear-Method.gif) - -## History - -### Undo - -You can reverse the last action that was performed by using the [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Undo) method. - -```csharp - -Diagram.Undo(); - -``` - -### Redo - -You can restore the last action that was reverted by using the [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Redo) method. - -```csharp - -Diagram.Redo(); - -``` - -### Group action - -* A [StartGroupAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_StartGroupAction) method is used to starts to group the changes to revert or restore them in a single reverse(undo) or restore(redo). - -* A [EndGroupAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_EndGroupAction) used to end to group the changes to revert or restore them. - -```csharp - -// Start group action in history -Diagram.StartGroupAction(); -// End group action in history -Diagram.EndGroupAction(); - -``` - -### Get history stack - -You can get the number of undo or redo actions to be stored on the history list. - -```csharp - -// Get the undo list -List EntryStack = await Diagram.GetHistoryStack(true); -// Get the redo list -EntryStack = await Diagram.GetHistoryStack(false); - -``` - -### Set stack limit - -You can restrict the undo and redo actions to a certain limit by using the [SetStackLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SetStackLimit_System_Double_) method. - -```csharp - -Diagram.SetStackLimit(5); - -``` - -### Clear history - -You can clear the actions that is recorded to perform undo or redo operation in the diagram by using the [ClearHistory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearHistory) method. - -```csharp - -Diagram.ClearHistory(); - -``` - -### Add the custom history entry - -You can add the history entry at runtime by using the [AddCustomHistoryEntry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddCustomHistoryEntry_Syncfusion_Blazor_Diagrams_HistoryEntry_) and perform some actions. - -```csharp - -HistoryEntry Entry = new HistoryEntry() { BlazorHistoryEntryType = HistoryEntryType.Object, Category = EntryCategory.External }; -Diagram.AddCustomHistoryEntry(Entry); - -``` - -The following code shows how to manage and get the history list. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Undo changes - public void OnUndo() - { - Diagram.Undo(); - } - - // Redo changes - public void OnRedo() - { - Diagram.Redo(); - } - - // Start group action in history - public void OnStartGroupAction() - { - Diagram.StartGroupAction(); - } - - // End group action in history - public void OnEndGroupAction() - { - Diagram.EndGroupAction(); - } - - public async void OnGetHistoryStack(){ - // Get the undo list - List EntryStack = await Diagram.GetHistoryStack(true); - // Get the redo list - EntryStack = await Diagram.GetHistoryStack(false); - } - - public void OnSetStackLimit(){ - Diagram.SetStackLimit(5); - } - - public void OnClearHistory(){ - Diagram.ClearHistory(); - } -} -``` - -![History Methods](images/History-Methods.gif) - -## Tool tip - -You can show and hide the tooltip by using the [ShowTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ShowTooltip_System_Object_) and [HideTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_HideTooltip_System_Object_) method. - -```csharp - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - - DiagramTooltip Tooltips = new DiagramTooltip() - { - Content = "Tooltip", - Position = Syncfusion.Blazor.Popups.Position.BottomCenter, - RelativeMode = TooltipRelativeMode.Object, - Animation = new Syncfusion.Blazor.Popups.AnimationModel() - { - Open = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() { Effect = Syncfusion.Blazor.Popups.Effect.FadeZoomIn, Delay = 1 }, - Close = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() { Effect = Syncfusion.Blazor.Popups.Effect.FadeZoomOut, Delay = 0 }, - } - }; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Show the tooltip - public void OnShowToolTip() - { - Diagram.ShowTooltip(Diagram.Nodes[0]); - } - - // Hide the tooltip - public void OnHideToolTip() - { - Diagram.HideTooltip(Diagram.Nodes[0]); - } -} - -``` - -## Property change - -The diagram allows for changing the property at runtime. You can change more properties in a single update by using [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BeginUpdate) and [EndUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_EndUpdate) methods. - -```csharp -public void UpdateNodeProperties() -{ - Diagram.BeginUpdate(); - Diagram.Nodes[0].OffsetX += 20; - Diagram.Nodes[0].OffsetY += 30; - Diagram.Nodes[0].Style.Fill = "red"; - Diagram.EndUpdate(); -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/nodes/appearance.md b/blazor/diagram-classic/nodes/appearance.md deleted file mode 100644 index c244131aed..0000000000 --- a/blazor/diagram-classic/nodes/appearance.md +++ /dev/null @@ -1,640 +0,0 @@ ---- -layout: post -title: Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Appearance in Blazor Diagram Component - -The appearance of a node can be customized by changing its [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html) color, [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html), [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html), and [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shadow). The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Visible) property of the node enables or disables the visibility of the node. - -The following code shows how to customize the appearance of the shape. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - // Add node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeDashArray = "5,5", - StrokeColor = "red", - StrokeWidth = 2 - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Node appearance](../images/node_appearance.png) - -## Gradient - -The [Gradient](https://help.syncfusion.com/cr/blazor) property of the node allows you to define and apply the gradient effect to the node. The gradient stop property defines the color and a position, where the previous color transition ends and a new color transition starts. The gradient stop’s opacity property defines the transparency level of the region. - -There are two types of gradients as follows: - -* Linear Gradient - -* Radial Gradient - -### Linear gradient - -[LinearGradient](https://help.syncfusion.com/cr/blazor) defines a smooth transition between a set of colors (so-called stops) in a line. A linear gradient’s X1, Y1, X2, Y2 properties are used to define the position (relative to the node) of the rectangular region that needs to be painted. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Gradient = new DiagramGradient() - { - //Start point of linear gradient - X1 = 0, - Y1 = 0, - //End point of linear gradient - X2 = 50, - Y2 = 50, - //Sets an array of stop objects - Stops = new ObservableCollection() - { - new DiagramsGradientStop() - { - Color = "white", - Offset = 0 - }, - new DiagramsGradientStop() - { - Color = "#6BA5D7", - Offset = 100 - } - }, - Type = GradientType.Linear - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Node LinearGradient](../images/node_lineargradient.png) - -### Radial gradient - -[RadialGradient](https://help.syncfusion.com/cr/blazor) defines a smooth transition between stops on a circle. A radial gradient properties are used to define the position (relative to the node) of the outermost or the innermost circle of the radial gradient. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Gradient = new DiagramGradient() - { - //Center point of inner circle - Fx = 20, - Fy = 20, - //Center point of outer circle - Cx = 50, - Cy = 50, - //Radius of a radial gradient - R = 50, - //Sets an array of stop objects - Stops = new ObservableCollection() - { - new DiagramsGradientStop() - { - Color = "white", - Offset = 0 - }, - new DiagramsGradientStop() - { - Color = "#6BA5D7", - Offset = 100 - } - }, - Type = GradientType.Radial - } - }, - }; - // Add node - NodeCollection.Add(node1); - } -} -``` - -![Node RadialGradient](../images/node_radialgradient.png) - -## Shadow - -Diagram provides support to add [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shadow) effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. - -The following code shows how to draw shadow. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Constraints = NodeConstraints.Default | NodeConstraints.Shadow - }; - NodeCollection.Add(node1); - } -} -``` - -![Node shadow](../images/node_shadow.png) - -### Customizing shadow - -The [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShadow.html#Syncfusion_Blazor_Diagrams_DiagramShadow_Angle), [Distance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShadow.html#Syncfusion_Blazor_Diagrams_DiagramShadow_Distance), and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShadow.html#Syncfusion_Blazor_Diagrams_DiagramShadow_Opacity) of the shadow can be customized with the shadow property of the node. - -The following code example illustrates how to customize shadow. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Constraints = NodeConstraints.Default | NodeConstraints.Shadow, - // Custom Shadow of the node - Shadow = new DiagramShadow() - { - Angle = 50, - Opacity = 0.8, - Distance = 9 - } - }; - NodeCollection.Add(node1); - } -} -``` - -![Shadow](../images/customshadow.png) - -## Icon - -Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state. - -N> Icon can be created only when the node has outEdges. - -* To explore the properties of expand and collapse icon, refer to [ExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_ExpandIcon) and [CollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_CollapseIcon). - -* The ExpandIcon’s and CollapseIcon’s shape properties allow you to define the shape of the icon. - -The following code example shows how to create an icon of various shapes. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - DiagramNode NodeDefault = new DiagramNode() - { - Width = 140, - Height = 50, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - Id = "Start", - OffsetX = 300, - OffsetY = 50, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1" - } - }, - ExpandIcon = new NodeExpandIcon() - { - Shape = IconShapes.ArrowDown, - Width = 10, - Height = 10 - }, - CollapseIcon = new NodeCollapseIcon() - { - Shape = IconShapes.ArrowUp, - Width = 10, - Height = 10 - } - }; - NodeCollection.Add(node1); - - DiagramNode node2 = new DiagramNode() - { - Id = "Init", - OffsetX = 300, - OffsetY = 140, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node2" - } - }, - }; - NodeCollection.Add(node2); - - DiagramConnector connector1 = new DiagramConnector() - { - // Unique name for the connector - Id = "connector1", - // Source and Target node's name to which connector needs to be connected. - SourceID = "Start", - TargetID = "Init", - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(connector1); - } -} -``` - -![Node Icon](../images/node_icon.png) - -### Customizing expand icon - -* Set the BorderColor, BorderWidth, and background color for an ExpandIcon using the BorderColor, BorderWidth, and Fill properties. - -* Set a size for an expandIcon by using the Width and Height properties. - -* The expand icon can be aligned relative to the node boundaries. It has Margin, Offset, HorizontalAlignment, and VerticalAlignment settings. It is quite tricky when all four alignments are used together but gives you more control over alignment. - -### Customizing collapse icon - -* Set the borderColor, borderWidth, background color for an collapseIcon using the [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_BorderColor), [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_BorderWidth), and [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_Fill) properties. - -* Set a size for collapseIcon by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_Width) and -[Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_Height) properties. - -* Like expand icon, collapse icon also can be aligned relative to the node boundaries. It has Margin, Offset, HorizontalAlignment, and VerticalAlignment settings. It is quite tricky when all four alignments are used together but gives you more control over alignment. - -## Constraints - -The constraints property of the node allows you to enable/disable certain features. For more information about node constraints, refer to [Node Constraints](../constraints). - -## Custom properties - -The [AddInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_AddInfo) property of the node allows you to maintain additional information to the node. - -The following code shows how to set the `AddInfo` value. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection(); - public List AddInfo = new List() - { - new NodeAddInfo() - { - Content = "NodeContent", - ParentID = "diagram" - } - }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - AddInfo = AddInfo - }; - // Add node - NodeCollection.Add(node1); - } - - public class NodeAddInfo { - public string ParentID; - public string Content; - } -} -``` - -**Note:** We can set any type of value for the AddInfo property. - -## Stack order - -The node's `z-order` property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order. - -The following code illustrates how to render a node based on the stack order. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection() - { - new DiagramNode(){ - // Unique id of the node - Id = "Node1", - // Position of the node - OffsetX = 100, - OffsetY = 100, - // Size of the node - Width = 100, - Height = 100, - // Sets style of the node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - //Specify the z-index value - ZIndex = 2, - }, - new DiagramNode() - { - // Unique id of the node - Id = "Node2", - // Position of the node - OffsetX = 150, - OffsetY = 150, - // Size of the node - Width = 100, - Height = 100, - // Sets style of the node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - //Specify the z-index value - ZIndex = 1, - } - }; - } -} -``` - -![Node Stack Order](../images/node-stack-order.png) - -## Data flow - -You can find the flow in the diagram by using the [GetEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetEdges_System_String_System_Boolean_) method. In this method, you can find what are all the connectors that are connected to the node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - // Reference of the diagram - SfDiagram Diagram; - // Define node and connector collection - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - // Set the default value of the node - DiagramNode NodeDefaults = new DiagramNode() - { - // Size of the node - Width = 80, Height = 50, - // Style of the node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection() { - new DiagramNode() - { - Id = "node1", - // Position of the node - OffsetX = 450, - OffsetY = 100 - }, - new DiagramNode() - { - Id = "node2", - // Position of the node - OffsetX = 350, - OffsetY = 200 - }, - new DiagramNode() - { - Id = "node3", - // Position of the node - OffsetX = 450, - OffsetY = 200 - }, - new DiagramNode() - { - Id = "node4", - // Position of the node - OffsetX = 550, - OffsetY = 200 - } - }; - ConnectorCollection = new ObservableCollection() { - new DiagramConnector() - { - // Sets the unique id, source node, taget node - Id = "connector1", - SourceID = "node1", - TargetID = "node2", - // Sets the type of the connector - Type = Segments.Orthogonal - }, - new DiagramConnector() - { - // Sets the unique id, source node, taget node - Id = "connector2", - SourceID = "node1", - TargetID = "node3", - // Sets the type of the connector - Type = Segments.Orthogonal - }, - new DiagramConnector() - { - // Sets the unique id, source node, taget node - Id = "connector3", SourceID = "node1", TargetID = "node4", - // Sets the type of the connector - Type = Segments.Orthogonal - } - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - //OnAfterRenderAsync will be triggered after the component rendered. - await Task.Delay(1500); - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - } - } - - public async Task UpdateEdges() - { - string NodeId = Diagram.SelectedItems.Nodes[0].Id; - // GetEdges method is used to get the connectors that connected to nodes. - string[] edges = await Diagram.GetEdges(NodeId, true); - for (int i = 0; i < edges.Length; i++) - { - // Get the connector from id - DiagramConnector connector = Diagram.GetConnector(edges[i]); - // Change the style of the connector - connector.Style.StrokeColor = "#1413F8"; - connector.TargetDecorator.Style.StrokeColor = "#1413F8"; - connector.TargetDecorator.Style.Fill = "#1413F8"; - } - } -} -``` - -![Node DataFlow](../images/node_dataflow.gif) - -## See also - -* [How to get events when they interact the node](./events) \ No newline at end of file diff --git a/blazor/diagram-classic/nodes/events.md b/blazor/diagram-classic/nodes/events.md deleted file mode 100644 index ba9d6aa57e..0000000000 --- a/blazor/diagram-classic/nodes/events.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -layout: post -title: Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Events in Blazor Diagram Component - -Diagram provides some events support for node that triggers when interacting the node. - -## Selection change - -The [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) events is triggered when select/unselect the node or connector. The [IBlazorSelectionChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorSelectionChangeEventArgs.html) interface is used to get selection change event arguments. - -The following code example explains how to get the selection change event in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - // Apperence of the node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - - // SelectionChange event for diagram - public void SelectionChanged(IBlazorSelectionChangeEventArgs args) - { - Console.WriteLine(args.NewValue.Nodes[0].Id); - } -} -``` - -## Position change - -The [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) events is triggered when drag the node or connector in interaction. The [IBlazorDraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDraggingEventArgs.html) interface is used to get position change event arguments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - - // Position change event for diagram - public void OnPositionChange(IBlazorDraggingEventArgs args) - { - Console.WriteLine(args.NewValue.Nodes[0].Id); - } -} -``` - -## Size change - -The [OnSizeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnSizeChange) events is triggered when resizing the node during the interaction. The [ISizeChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ISizeChangeEventArgs.html) interface is used to get size change event arguments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - - // Size change event for diagram - public void OnSizeChange(ISizeChangeEventArgs args) - { - Console.WriteLine(args.NewValue.Nodes[0].Id); - } -} -``` - -## Rotate change - -The [OnRotateChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnRotateChange) events is triggered when resizing the node during the interaction. The [IRotationEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IRotationEventArgs.html) interface is used to get size change event arguments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - - // Rotate change event for diagram - public void OnRotateChange(IRotationEventArgs args) - { - Console.WriteLine(args.NewValue.Nodes[0].Id); - } -} -``` - -## See also - -* [How to interact the node in diagram](./interaction) - -* [How to get events when they interact the connector](../connectors/events) - -* [How to get events when they interact the annotation](../annotations/events) diff --git a/blazor/diagram-classic/nodes/interaction.md b/blazor/diagram-classic/nodes/interaction.md deleted file mode 100644 index 4c2d8a75e8..0000000000 --- a/blazor/diagram-classic/nodes/interaction.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -Diagram provides the support to drag, resize, or rotate the node interactively. - -## Select - -A node can be select at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Select_System_Object_System_Nullable_System_Boolean__) method and clear the selection in the diagram using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearSelection). - -The following code explains how to select and clear selection in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - public void OnSelect() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - } - public void UnSelect() - { - // clear selection in the diagram - Diagram.ClearSelection(); - } -} -``` - -And also the selection enable during the interaction. - -* An element can be selected by clicking that element. -* When you select the elements in the diagram, the [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) event gets triggered and to do customization in this event. - -![Select](../images/node-select.gif) - -## Drag - -A node can be drag at runtime by using the [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Drag_System_Object_System_Double_System_Double_) method. - -The following code explains how to drag the node by using the drag method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - public void OnDrag() - { - // Drag the node - Diagram.Drag(Diagram.Nodes[0], 10, 10); - } -} -``` - -And also the drag the node during the interaction. - -* An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move all the selected elements. -* When you drag the elements in the diagram, the [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) event gets triggered and to do customization in this event. - -![Drag](../images/drag.gif) - -## Resize - -A node can be resize at runtime by using the [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Scale_System_Object_System_Double_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. - -The following code explains how to resize the node by using the scale method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - public void OnResize() - { - // Resize the node - Diagram.Scale(Diagram.Nodes[0], 0.5, 0.5, new PointModel() { X = 0, Y = 0 }); - } -} -``` - -And also the resize the node during the interaction. - -* Selector is surrounded by eight thumbs. When dragging these thumbs, the selected items can be resized. -* When one corner of the selector is dragged, the opposite corner will be in a static position. -* When a node is resized, the [OnSizeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnSizeChange) event gets triggered. - -![Resize](../images/resize.gif) - -N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to `Snapping`. - -## Rotate - -A node can be rotate at runtime by using the [Rotate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Rotate_System_Object_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. The following code explains how to rotate the node by using method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" -} - }; - // Add node - NodeCollection.Add(node1); - } - public void OnRotate() - { - // Rotate the node - Diagram.Rotate(Diagram.Nodes[0], Diagram.Nodes[0].RotateAngle+10); - } -} -``` - -And also the rotate the node during the interaction. - -* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead to rotate the node. -* The node is rotated with reference to the static pivot point. -* Pivot thumb (thumb at the middle of the node) appears when rotating the node to represent the static point. - -![Rotate](../images/rotate.gif) - -For more information about node interaction, refer to [Node Interaction](../interaction). - -## See also - -* [How to get events while the interact the node](./events) - -* [How to positioning the node](./positioning) - -* [How to customize the node](./appearance) - -* [How to interact the annotation in diagram](../annotations/interaction) - -* [How to interact the port in diagram](../ports/interaction) - -* [How to interact the connector in diagram](../connectors/interactions) diff --git a/blazor/diagram-classic/nodes/nodes.md b/blazor/diagram-classic/nodes/nodes.md deleted file mode 100644 index a2ea3d11e8..0000000000 --- a/blazor/diagram-classic/nodes/nodes.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -layout: post -title: Actions of nodes in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Actions of nodes in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Actions of nodes in Blazor Diagram Component - -Nodes are graphical objects that are used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data and it represents the functions of a complete system in regards to how it interacts with external entities. - -![Node](../images/node.png) - -## Create node - -A node can be created and added to the diagram, either programmatically or interactively. Nodes are stacked in the diagram area from bottom-to-top in the order they are added. - -## Add node through nodes collection - -To create a node, define the [DiagramNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html) object and add that to the nodes collection of the diagram model. The following code example shows how to add a node to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } -} -``` - -![Node default](../images/node_default.png) - -## Add node at runtime - -* A node can be added in a diagram at runtime by using the [AddNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddNode_Syncfusion_Blazor_Diagrams_DiagramNode_System_Nullable_System_Boolean__). - -* The node’s ID property is used to define the name of the node and it is further used to find the node at runtime and do any customization. - -The following code shows how to add a node at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - NodeCollection.Add(node1); - } - - // Add node at runtime - public void AddNode() - { - DiagramNode Node1 = new DiagramNode() - { - Id = "New Node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100 - }; - Diagram.AddNode(Node1); - } -} -``` - -Also, the Node can be added at runtime by using the `Add` method. - -```csharp -// Add node at runtime -public void AddNode() -{ - DiagramNode Node2 = new DiagramNode() - { - Id = "New Node2", - OffsetX = 100, - OffsetY = 200, - Width = 100, - Height = 100, - }; - NodeCollection.Add(Node2); -} -``` - -![Node](../images/node-add.png) - -## Add node from palette - -Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to the [Symbol Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html). - -* Once you drag a node/connector from the palette to the diagram, the following events can be used to do the customization. -* When a symbol is dragged into a diagram from symbol palette, the [DragEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_DragEnter) event gets triggered. -* When a symbol is dragged over a diagram, the [DragOver](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IDragOverEventArgs.html) event gets triggered. -* When a symbol is dragged and dropped from symbol palette to diagram area, the [Drop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDropEventArgs.html) event gets triggered. -* When a symbol is dragged outside of the diagram, the [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_DragLeave) event gets triggered. - -For more information about adding nodes from symbol palette, refer to the [Symbol Palette](../symbol-palette). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel -@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes - -
    - - - - - - -
    -
    - - -
    -@code -{ - // Defines palette's flow-shape collection - public ObservableCollection FlowShapeList { get; set; } - - // Defines Symbol info - public SymbolInfo SymbolInfo { get; set; } - - protected override void OnInitialized() - { - // Sets the symbol info - SymbolInfo = new SymbolInfo() { Fit = true }; - - // Add shapes to palette - FlowShapeList = new ObservableCollection() - { - new DiagramNode() - { - Id = "Terminator", - // Set the symbol preview size - PreviewSize = new SymbolSizeModel() { Width = 100, Height = 100 }, - // Sets the shape of the node - Shape = new DiagramShape() - { - Type = DiagramShapes.Flow, - FlowShape = FlowShapes.Terminator - } - } - }; - } -} -``` - -![Node](../images/node-add-palette.gif) - -## Draw Node using drawing object - -Nodes can be interactively drawn by clicking and dragging on the diagram surface by using the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DrawingObject). - -For more information about drawing Node, refer to the [Draw Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTools.html). - -![Drawing Node](../images/node-drawing.gif) - -## Create node through data source - -Nodes can be generated automatically with the information provided through data source. The default properties for these nodes are fetched from default settings. - -## Remove node at runtime - -A node can be removed from diagram at runtime by using the [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Remove_System_Object_) method. - -The following code shows how to remove a node at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in node's collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - - // Remove Node at runtime - public void RemoveNode() - { - Diagram.Remove(NodeCollection[0]); - } -} -``` - -A Node can be removed from the diagram by using the native [RemoveAt`] method. Refer to the following example that shows how to remove node at runtime. - -```csharp -// Add node at runtime -public void RemoveNode() -{ - NodeCollection.RemoveAt(0); -} -``` - -## Update node at runtime - -You can change any node's properties at runtime. The following code sample shows how the annotation of the node changed at runtime. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // reference of the diagram - SfDiagram Diagram; - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - - // update node properties at run time - public void UpdateNode() - { - Diagram.BeginUpdate(); - NodeCollection[0].Style.Fill = "red"; - NodeCollection[0].Style.StrokeColor = "green"; - Diagram.EndUpdate(); - } -} -``` - -![Node](../images/update-node.png) - -**Note:** You cannot reset the node collection directly to add or update the node collection. - -## See Also - -* [How to add annotations to the node](../annotations/labels) - -* [How to add ports to the node](../ports/ports) - -* [How to enable/disable the behavior of the node](../constraints) - -* [How to edit the node visual interface](../interaction#selection) diff --git a/blazor/diagram-classic/nodes/positioning.md b/blazor/diagram-classic/nodes/positioning.md deleted file mode 100644 index 8492d1b80e..0000000000 --- a/blazor/diagram-classic/nodes/positioning.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -layout: post -title: Positioning in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Positioning in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Positioning in Blazor Diagram Component - -## Arrange the nodes - -* Position of a node is controlled by using the [OffsetX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_OffsetX) and [OffsetY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_OffsetY) properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. - -* You may expect this offset values to represent the distance between page origin and node’s top-left corner instead of center. The Pivot property helps to solve this problem. Default value of node’s [Pivot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Pivot) point is (0.5, 0.5) that means center of the node. - -* The size of the node can be controlled by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Height) properties. - -* Rotation of a node is controlled by using the [RotateAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_RotateAngle) property. - -The following table shows how pivot relates offset values with node boundaries. - -| Pivot | Offset | -|-------- | -------- | -| (0.5,0.5)| OffsetX and OffsetY values are considered as the node’s center point. | -| (0,0) | OffsetX and OffsetY values are considered as the top-left corner of the node. | -| (1,1) | OffsetX and OffsetY values are considered as the bottom-right corner of the node. | - -The following code shows how to change the `Pivot` value. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - SfDiagram diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Pivot of the node - Pivot = new NodePivotPoint() { X = 0, Y = 0 } - }; - NodeCollection.Add(node1); - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - //OnAfterRenderAsync will be triggered after the component rendered. - await Task.Delay(1500); - diagram.Select(new ObservableCollection() { diagram.Nodes[0] }, null); - } - } -} -``` - -![Node Pivot](../images/node_pivot.png) - -## Flip - -The diagram Provides support to flip the node. [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Flip) is performed to give the mirrored image of the original element. - -* [The Flip is also applicable for connectors](./flip) - -The flip types are as follows: - -* `HorizontalFlip` is used to change the element in the horizontal direction. - -* `VerticalFlip` is used to change the element in the vertical direction - -* `Both` that involves both vertical and horizontal changes of the element. - -The following code shows how to provide the mirror image of the original element. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - SfDiagram diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Flip the node in Vertical Direction - Flip = FlipDirection.Vertical, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Triangle - } - }; - // Add node - NodeCollection.Add(node1); - } -} -``` - -![Node Flip](../images/Vertical_Flip.png) - -N> The flip is also applicable for group and BPMN shapes. - -## See also - -* [How to customize the node](./appearance) - -* [How to get events when they interact the node](./events) diff --git a/blazor/diagram-classic/overview.md b/blazor/diagram-classic/overview.md deleted file mode 100644 index 3c267a20fb..0000000000 --- a/blazor/diagram-classic/overview.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -layout: post -title: Overview Control in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Overview Control in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Overview Control in Blazor Diagram Component - -Overview control allows you to see a preview or an overall view of the entire content of a diagram. This helps you to look at the overall picture of a large diagram and navigate, pan, or zoom on a particular position of the page. - -When you work on a very large diagram, you may not know the part you are working on, or navigation from one part to another might be difficult. One solution for navigation is to zoom out the entire diagram and find where you are. Then, you can zoom in on a specific area. This solution is not suitable when you need some frequent navigation. - -Overview control solves these problems by showing a preview of the entire diagram. A rectangle indicates the viewport of the diagram. Navigation becomes easy by dragging this rectangle. - -## Create overview - -The [SourceID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfOverview.html#Syncfusion_Blazor_Diagrams_SfOverview_SourceID) property of overview should be set with the corresponding diagram ID for the overall view. - -The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfOverview.html#Syncfusion_Blazor_Diagrams_SfOverview_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfOverview.html#Syncfusion_Blazor_Diagrams_SfOverview_Height) properties of the overview allow you to define the size of the overview. - -The following code illustrates how to create overview. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - - -@code -{ - - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection = new ObservableCollection(); - //Defines the node default values. - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 95, - Height = 30, - BackgroundColor = "#6BA5D7", - Shape = new DiagramShape() { Type = Shapes.Basic, BasicShape = BasicShapes.Rectangle }, - Style = new NodeShapeStyle { Fill = "#ffeec7", StrokeColor = "#ffeec7", StrokeWidth = 1, }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "black" - } - } - } - }; - //Defines the connector's default values. - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#4d4d4d", StrokeWidth = 2 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - } - }; - //Create the layout info. - TreeInfo LayoutInfo = new TreeInfo() - { - //Create the layout info. - CanEnableSubTree = true, - //Specify the sub-tree orientation - Orientation = SubTreeOrientation.Horizontal - }; - List datamap { get; set; } = new List() - { - new DiagramDataMapSetting() { Property = "Shape.TextContent", Field = "Name" } - }; - - DiagramLayout LayoutValue = new DiagramLayout() { }; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - Type = LayoutType.HierarchicalTree, - VerticalSpacing = 30, - HorizontalSpacing = 30, - EnableAnimation = true, - LayoutInfo = this.LayoutInfo - - }; - } - - //Create the hierarchical details with needed properties. - public class HierarchicalDetails - { - public string Name { get; set; } - public string FillColor { get; set; } - public string Category { get; set; } - } - - //Create the data source with node name and fill color values. - public List DataSource = new List() - { - new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#916DAF"}, - new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor=""}, - new HierarchicalDetails(){ Name ="Tree Layout", Category="Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Organizational Chart", Category="Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Hierarchical Tree", Category="Tree Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Radial Tree", Category="Tree Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Mind Map", Category="Hierarchical Tree",FillColor=""}, - new HierarchicalDetails(){ Name ="Family Tree", Category="Hierarchical Tree",FillColor=""}, - new HierarchicalDetails(){ Name ="Management", Category="Organizational Chart",FillColor=""}, - new HierarchicalDetails(){ Name ="Human Resources", Category="Management",FillColor=""}, - new HierarchicalDetails(){ Name ="University", Category="Management",FillColor=""}, - new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor=""} - }; -} -``` - -## Zoom and Pan - -In overview, the view port of the diagram is highlighted with a red color rectangle. Diagram can be zoomed/panned by interacting with that. You can interact with overview as follows: - -* Resize the rectangle: Zooms in/out the diagram. -* Drag the rectangle: Pans the diagram. -* Click at a position: Navigates to the clicked region. -* Choose a particular region by clicking and dragging: Navigates to the specified region. - -The following image shows how the diagram is zoomed/panned with overview. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code -{ - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } -} -``` - -![Overview](images/Overview.png) \ No newline at end of file diff --git a/blazor/diagram-classic/page-settings.md b/blazor/diagram-classic/page-settings.md deleted file mode 100644 index e4529960e1..0000000000 --- a/blazor/diagram-classic/page-settings.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -layout: post -title: Page Settings in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Page Settings in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Page Settings in Blazor Diagram Component - -Page settings enable to customize the appearance, width, and height of the diagram page. -## Page size and appearance - -* The size and appearance of the diagram pages can be customized with the page settings property. - -* The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Height) properties of page settings define the size of the page and based on the size, the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Orientation) will be set for the page. In addition to that, the appearance of the page can be customized with `Source` and set of appearance specific properties. - -* The `Color` property is used to customize the background color and border color of the page. - -* The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Margin) property is used to define the page margin. - -* To explore those properties, refer to `Page Settings`. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @*Initialize the page settings with page orientation and break lines*@ - - @*Set the page background image*@ - - @*Set the page margin*@ - - - - -@code -{ - //Sets the page orientation as landscape. - public PageOrientation orientation = PageOrientation.Landscape; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } -} -``` - -## Set background image - -Stretch and align the background image anywhere over the diagram area. -* The [Source](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBackground.html#Syncfusion_Blazor_Diagrams_DiagramBackground_Source) property of [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Background) allows you to set the path of the image. -* The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBackground.html#Syncfusion_Blazor_Diagrams_DiagramBackground_Scale) and the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBackground.html#Syncfusion_Blazor_Diagrams_DiagramBackground_Align) properties help to stretch/align the background images. - -The following code illustrates how to stretch and align the background image. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @*Initialize the page settings with page orientation and break lines*@ - - - - - - -@code -{ - //Sets the page orientation as landscape. - public PageOrientation orientation = PageOrientation.Landscape; -} -``` - -## Multiple page and page breaks - -When multiple page is enabled, the size of the page dynamically increases or decreases in multiples of page width and height and completely fits diagram within the page boundaries. Page breaks is used as a visual guide to see how pages are split into multiple pages. - -The [MultiplePage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_MultiplePage) and [ShowPageBreak](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_ShowPageBreaks) properties of page settings allow you to enable/disable multiple pages and page breaks respectively. The following code illustrates how to enable multiple page and page break lines. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - @*Initialize the page settings with page orientation and multiple pages*@ - - - - - - -@code -{ - //Sets the page orientation as landscape. - public PageOrientation orientation = PageOrientation.Landscape; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } -} -``` - -## Boundary constraints - -The diagram provides support to restrict/customize the interactive region, out of which the elements cannot be dragged, resized, or rotated. The [BoundaryConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_BoundaryConstraints) property of page settings allows you to customize the interactive region. To explore the boundary constraints, refer to [Boundary Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_BoundaryConstraints). - -The following code example illustrates how to define boundary constraints with respect to the page. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - @*Initialize the page settings with page orientation and break lines*@ - - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - public PageOrientation orientation = PageOrientation.Landscape; - public BoundaryConstraints boundaryConstraints = BoundaryConstraints.Page; - //Defines diagram's nodes collection. - public ObservableCollection - NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/ports/appearance.md b/blazor/diagram-classic/ports/appearance.md deleted file mode 100644 index 290c6a0354..0000000000 --- a/blazor/diagram-classic/ports/appearance.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -layout: post -title: Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Appearance in Blazor Diagram Component - -## Appearance - -* The shape of a port can be changed by using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapes.html) property. To explore the different types of port shapes, refer to Port Shapes. If you need to render a custom shape, then you can set shape to path and define path using the path data property. - -* The appearance of the ports can be customized by using the [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapeStyle.html#Syncfusion_Blazor_Diagrams_PortShapeStyle_StrokeColor), [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapeStyle.html#Syncfusion_Blazor_Diagrams_PortShapeStyle_StrokeWidth), and [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapeStyle.html#Syncfusion_Blazor_Diagrams_PortShapeStyle_Fill) properties. - -* Customize the port size by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Height) properties of port. - -* The ports [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Visibility) property allows you to define when the port should be visible. - -The following code explains how to change the appearance of the port. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="red", StrokeColor="black", StrokeWidth=2}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Circle - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Appearance](../images/port_Appearance.png) - -## Visibility - -The visibility of the ports depends upon the properties of `Connect`, `Hidden`, `Hover`, and `Visible`. By default, PortVisibility is set to Hidden. - -| Property | Definition | -|---|---| -| Hover | Port is visible when mousehover the DiagramElement. | -| Hidden | Port is not visible for the DiagramElement. | -| Connect | Specifies to visible the port when mousehover the DiagramElement and enable the PortConstraints as InConnect and OutConnect. | -| Visible | Port is always visible for the DiagramElement. | -| Default | By default, PortVisibility is set to Hidden. So, the port is not visible for the DiagramElement. | - -## Types of port shapes - -We have provided some basic built-in [PortShapes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapes.html) for the port. Find the shapes as follows. - -* Circle -* Custom -* Square -* X - -### Custom shape - - We have provided custom shape support for port. you can able to add the custom path data instead of build-in shapes. Find the code example that explains how to change the custom shape for port. - - ```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0.5, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="gray", StrokeColor="black"}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Custom, - PathData="M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Port Drag](../images/port_customport.png) - -## Constraints - -The constraints property allows you to enable or disable certain behaviors of ports. For more information about port constraints, refer to [Port Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Constraints). You can verify the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Constraints) to learn how to enable or disable the port constraints. - -The PortConstraints may have multiple behaviors listed as follows: - -| Constraints | Usages | -|---|---| -| None |Disables all behaviors of Port. | -| Drag |Defines whether port to be dragged at boundaries of node. | -| Draw |Enables or disables to draw a connector. | -| InConnect |Enables or disables connecting to the incoming Connector. | -| OutConnect | Enables or disables connecting the outgoing Connector. | - -## Custom properties - -The [AddInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_AddInfo) property of the port allows you to maintain additional information to the port. - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to customize the ports](./appearance) - -* [How to set the position of the port](./positioning) - -* [How to interact the ports](./interaction) diff --git a/blazor/diagram-classic/ports/interaction.md b/blazor/diagram-classic/ports/interaction.md deleted file mode 100644 index 17c1af5e83..0000000000 --- a/blazor/diagram-classic/ports/interaction.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -The port can be dragged in the diagram area and create the connector over the port by using the [port constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html). - -## Drag - -Diagram provides the support to drag the port interactively, it can be dragged out of the node bounds. - -The following code explains how to drag the port. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0.5, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill = "gray", StrokeColor = "black"}, - // Sets the shape of the port as Circle - Width = 12, - Height = 12, - Shape = PortShapes.X, - // Enable drag operation for Port - Constraints = PortConstraints.Default|PortConstraints.Drag - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Port Drag](../images/port_drag.gif) - -## Draw - -Diagram provides the support to draw the connector in the port. - -The following code explains how to draw the connector by using the port constraints. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 1, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style = new PortShapeStyle(){ Fill = "gray", StrokeColor = "black"}, - // Sets the shape of the port as Circle - Width = 12, - Height = 12, - Shape = PortShapes.Circle, - // Enable drag operation for Port - Constraints = PortConstraints.Default | PortConstraints.Draw - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Port Draw](../images/port_draw.gif) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to customize the ports](./appearance) - -* [How to set the position of the port](./positioning) diff --git a/blazor/diagram-classic/ports/ports.md b/blazor/diagram-classic/ports/ports.md deleted file mode 100644 index e4f93c0308..0000000000 --- a/blazor/diagram-classic/ports/ports.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -layout: post -title: Actions of Port in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Actions of port in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Actions of Port in Blazor Diagram Component - -Port is a special connection point in a Node that you can glue the connectors. When you glue a connector to a node or port, they stay connected, even if one of the node is moved. - -![Port](../images/Port1.png) - -## Connections - -There are two main types of connections, dynamic and port. The difference between these two connections is whether or not a connector remains glued to a specific connection point when you move the attached node or connector. - -A dynamic connection is one where the connector will move around the node as you move the node. Diagram will always ensure the connector is the shortest, most direct line possible. You can create a dynamic connection by selecting the entire node (rather than the port) and connect it to another shape (rather than to a port). - -![node to node](../images/Node_Connection.gif) - -Ports act as the connection points of the node and allows creating connections with only those specific points as shown in the following image. - -![port to port](../images/Node_RunTimeConnection.gif) - -## Create ports - -To add a connection port, define the port object and add it to node’s ports collection. The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Offset) property of the port accepts an object of fractions and used to determine the position of ports. The following code explains how to add ports when initializing the node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - // Sets the position for the port - new DiagramPort() - { - Style=new PortShapeStyle(){ Fill="gray" }, - Offset= new NodePortOffset(){X=0.5,Y=0.5}, - Visibility = PortVisibility.Visible - } - } - }; - NodeCollection.Add(node1); - } -} -``` - -![Port Image](../images/Nodeport.png) - -## Add ports at runtime - -Add ports at runtime by using the server-side method [Add`] in the port collection. The following code explains how to add ports to node at runtime. - -The port’s [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Id) property is used to define the unique ID for the port and it is further used to find the port at runtime. If **Id** is not set, then default **Id** is automatically set. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - //A node is created and stored in nodes array - DiagramNode node1 = new DiagramNode() - { - //Position of the node - OffsetX = 250, - OffsetY = 250, - //Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } - public void AddPorts() - { - // Initialize port collection - NodeCollection[0].Ports.Add(new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible - }); - NodeCollection[0].Ports.Add(new DiagramPort() - { - Id = "port2", - Offset = new NodePortOffset() { X = 1, Y = 0.5 }, - Visibility = PortVisibility.Visible - }); - NodeCollection[0].Ports.Add(new DiagramPort() - { - Id = "port3", - Offset = new NodePortOffset() { X = 0.5, Y = 0 }, - Visibility = PortVisibility.Visible - }); - NodeCollection[0].Ports.Add(new DiagramPort() - { - Id = "port4", - Offset = new NodePortOffset() { X = 0.5, Y = 1 }, - Visibility = PortVisibility.Visible - }); - } -} -``` - -## Remove ports at runtime - -A collection of ports can be removed from the node by using the native[RemoveAt`] method. Refer to the following example that shows how to remove ports at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="red", StrokeColor="black", StrokeWidth=2}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Circle - } - }, - }; - NodeCollection.Add(node1); - } - public void RemovePorts() - { - (NodeCollection[0].Ports as ObservableCollection).RemoveAt(0); - } -} -``` - -## Update ports at runtime - -You can change any port properties at runtime. - -The following code example explains how to change the port properties at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // Initialize port collection - ObservableCollection Ports1 = new ObservableCollection() { }; - Ports1.Add(new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible - }); - // A node is created and stored in nodes array - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Ports = Ports1 - }; - NodeCollection.Add(node1); - } - public void UpdatePort() - { - //update ports at run time - NodeCollection[0].BeginUpdate(); - NodeCollection[0].Ports[0].Offset.X = 1; - NodeCollection[0].Ports[0].Offset.Y = 1; - NodeCollection[0].EndUpdate(); - } -} -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to customize the ports](./appearance) - -* [How to interact the ports](./interaction) - -* [How to set the position of the port](./positioning) diff --git a/blazor/diagram-classic/ports/positioning.md b/blazor/diagram-classic/ports/positioning.md deleted file mode 100644 index a47ca8752b..0000000000 --- a/blazor/diagram-classic/ports/positioning.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -layout: post -title: Positioning in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Positioning in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Positioning in Blazor Diagram Component - -Diagram allows you to customize the position and appearance of the port efficiently. Port can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [DiagramPort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html) class. Ports of a node can be positioned using the following properties of `DiagramPort`. - -* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Offset) -* [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_HorizontalAlignment) -* [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_VerticalAlignment) -* [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Margin) - -## Offset - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Offset) property is used to align the Ports based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="gray", StrokeColor="black"}, - // Sets the shape of the port as Square - Width= 12, - Height=12, - Shape= PortShapes.Square, - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Offset](../images/port_offset.png) - -The following code shows the relationship between the shape port position and path port offset (fraction values). - -| Offset values | Output | -|---|---| -| (0,0) | ![Left](../images/offset1.png) | -| (0,0.5) | ![Left](../images/offset2.png) | -| (0,1) | ![Left](../images/offset3.png) | -| (0.5,0) | ![Left](../images/offset4.png) | -| (0.5,0.5) | ![Left](../images/offset5.png) | -| (0.5,1) | ![Left](../images/offset6.png) | -| (1,0) | ![Left](../images/offset7.png) | -| (1,0.5) | ![Left](../images/offset8.png) | -| (1,1) | ![Left](../images/offset9.png) | - - -N> Type of the offset property for node’s shape port is NodePortOffset. - -## Horizontal and vertical alignment - -The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_HorizontalAlignment) property of the port is used to set how the port is horizontally aligned at the port position determined from the fraction values. The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_VerticalAlignment) property is used to set how the port is vertically aligned at the port position. - -The following table shows all the possible alignments visually with `offset (0, 0)`. - -| Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | -| -------- | -------- | -------- | -| Left | Top | ![Left Top Port Alignment](../images/aligment_port1.png) | -| Center | Top | ![Center Top Port Alignment](../images/aligment_port2.png) | -| Right | Top | ![Right Top Port Alignment](../images/aligment_port3.png) | -| Left | Center | ![Left Center Port Alignment](../images/aligment_port4.png) | -| Center | Center| ![Center Center Port Alignment](../images/aligment_port5.png) | -| Right | Center | ![Right Center Port Alignment](../images/aligment_port6.png) | -| Left | Bottom | ![Left Bottom Port Alignment](../images/aligment_port7.png) | -| Center | Bottom | ![Center Bottom Port Alignment](../images/aligment_port8.png) | -| Right |Bottom |![Right Bottom Port Alignment](../images/aligment_port9.png) | - -The following code explains how to align ports. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="gray", StrokeColor="black"}, - // Sets the shape of the port as Square - Width= 12, - Height=12, - Shape= PortShapes.Square, - HorizontalAlignment = HorizontalAlignment.Left, - VerticalAlignment = VerticalAlignment.Top - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -N>* The value of the `HorizontalAlignment` is `Center` by default. -
    * The value of the `VerticalAlignment` is `Center` by default. -
    * Alignment positioned based on the offset value. - -## Margin - -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Margin) is an absolute value used to add some blank space to any one of its four sides. The ports can be displaced with the margin property. The following code example explains how to align an port based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0.5, Y = 1 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="gray", StrokeColor="black"}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Square, - HorizontalAlignment = HorizontalAlignment.Left, - VerticalAlignment = VerticalAlignment.Top, - Margin=new PortMargin(){Top=10} - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Margin](../images/port_margin.png) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to customize the ports](./appearance) - -* [How to interact the ports](./interaction) diff --git a/blazor/diagram-classic/ruler.md b/blazor/diagram-classic/ruler.md deleted file mode 100644 index c10a486652..0000000000 --- a/blazor/diagram-classic/ruler.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -layout: post -title: Ruler in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about the Ruler in the Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Ruler in Blazor Diagram Component - -The Ruler provides a horizontal and vertical guide for measuring in the Diagram control. The Ruler can be used to measure the diagram objects, indicate positions, and align diagram elements. This is especially useful in creating scale models. - -## Adding Rulers to the Diagram - -* The [DiagramRulerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramRulerSettings.html) property is used to control the visibility and appearance of the ruler in the diagram. - -* The RulerSettings [ShowRulers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramRulerSettings.html#Syncfusion_Blazor_Diagrams_DiagramRulerSettings_ShowRulers) property is used to show or hide the rulers in the diagram. - -* The RulerSettings [HorizontalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.HorizontalRuler.html) and [VerticalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.VerticalRuler.html) properties are used to customize the rulers appearance in the diagram. - -The following code shows how to add a ruler to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - -``` - -![Ruler](images/Ruler.png) - -## Customizing the Ruler - -By default, the ruler segments are arranged based on pixel values. - -* The HorizontalRuler’s [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_Interval) property allows you to define the interval between ruler segments and the [SegmentWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_SegmentWidth) property allows you to define the segment width of the ruler. Similarly, the VerticalRuler’s [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_Interval) and [SegmentWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_SegmentWidth) properties are used to define the interval and segment width of the vertical ruler. - -* The HorizontalRuler’s [TickAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_TickAlignment) property is used to align the ruler tick either left or right side of the ruler. The VerticalRuler’s [TickAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_TickAlignment) property is used to align the ruler tick either top or bottom side of the ruler. - -* The HorizontalRuler’s [MarkerColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_MarkerColor) and VerticalRuler’s [MarkerColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_MarkerColor) properties are used to define the ruler marker color and marker will be shown when performing the interaction in the diagram. - -The following code shows how the diagram ruler can be customized. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - - - -@code{ - TickAlignment verticalTickAlignment = TickAlignment.LeftOrTop; - TickAlignment horizontalTickAlignment = TickAlignment.RightOrBottom; -} -``` - -> The MarkerColor property can be customized using the [Marker](./style/#customizing-the-ruler) CSS style. - -![Customize](images/CustomRuler.png) \ No newline at end of file diff --git a/blazor/diagram-classic/scroll-settings.md b/blazor/diagram-classic/scroll-settings.md deleted file mode 100644 index d9b53da346..0000000000 --- a/blazor/diagram-classic/scroll-settings.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: post -title: Scroll Settings in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Scroll Settings in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Scroll Settings in Blazor Diagram Component - -The diagram can be scrolled by using the vertical and horizontal ScrollBars. In addition to the ScrollBars, mouse wheel can be used to scroll the diagram. Diagram’s [ScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ScrollSettings) enable you to read the current scroll status, view port size, current zoom and zoom factor. It also allows you to scroll the diagram programmatically. - -## Get current scroll status - -Scroll settings allow you to read the scroll status, [ViewPortWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ViewPortWidth), [ViewPortHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ViewPortHeight), and [CurrentZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_CurrentZoom) with a set of properties. To explore those properties, see [Scroll Settings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ScrollSettings). - -## Define scroll status - -Diagram allows you to pan the diagram before loading, so that any desired region of a large diagram can be viewed. You can programmatically pan the diagram with the [HorizontalOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_HorizontalOffset) and [VerticalOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_VerticalOffset) properties of scroll settings. The following code illustrates how to set pan the diagram programmatically. - -In the following example, the vertical scroll bar is scrolled down by 50px and horizontal scroll bar is scrolled to right by 100px. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollSettings for the diagram *@ - - - -``` - -## Update scroll status - -You can programmatically change the scroll offsets at runtime by using the server-side method update. The following code illustrates how to change the scroll offsets and zoom factor at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollSettings for the diagram *@ - - - - -@code{ - public double horizontalOffset { get; set; } = 100; - public double verticalOffset { get; set; } = 100; - - public void updateScrollValues() - { - //Update scroll settings. - verticalOffset = 400; - horizontalOffset = 200; - } -} - -``` - -## Autoscroll - -Autoscroll feature automatically scrolls the diagram, whenever the node or connector is moved beyond the boundary of the diagram. So that, it is always visible during dragging, resizing, and multiple selection operations. Autoscroll is automatically triggered when any one of the following is done towards the edges of the diagram. - -* Node dragging, resizing -* Connection editing -* Rubber band selection -* Label dragging - -The Autoscroll behavior in your diagram can be enabled/disabled by using the [CanAutoscroll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_CanAutoScroll) property of the diagram. - -## Autoscroll border - -The Autoscroll border is used to specify the maximum distance between the object and diagram edge to trigger Autoscroll. The default value is set as 15 for all sides (left, right, top, and bottom) and it can be changed by using the [AutoScrollMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_AutoScrollBorder) property of scroll settings. The following code example illustrates how to set Autoscroll margin. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollSettings for the diagram *@ - - @* Sets the Auto Scroll border for the diagram *@ - - - -``` - -## Scroll limit - -The scroll limit allows you to define the scrollable region of the diagram. It includes the following options: - -* Allows to scroll in all directions without any restriction. -* Allows to scroll within the diagram content. -* Allows to scroll within the specified scrollable area. -* The [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ScrollLimit) property of scroll settings helps to limit the scrolling. - -The ScrollSettings [ScrollableArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ScrollableArea) allows to extend the scrollable region that is based on the scroll limit. -The following code example illustrates how to specify the scroll limit. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollLimit of scroll settings *@ - - - -``` - -## Scroll padding - -The scroll padding allows you to extend the scrollable region that is based on the scroll limit. The following code example illustrates how to set scroll padding to diagram region. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollSettings for the diagram *@ - - @* Sets the Padding for the diagram Scroll*@ - - - -``` - -## Scrollable area - -Scrolling beyond any particular rectangular area can be restricted by using the [ScrollableArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ScrollableArea) property of scroll settings. To restrict scrolling beyond any custom region, set the [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ScrollLimit) as “limited”. The following code example illustrates how to customize scrollable area. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the scrollable Area *@ - - - - -@code{ - public class Area - { - public int X { get; set; } - public int Y { get; set; } - public int Width { get; set; } - public int Height { get; set; } - } - // Sets the values of scroll area. - object scrollArea = new Area() { X = 0, Y = 0, Width = 500, Height = 500 }; -} -``` - -## UpdateViewport - -The [UpdateViewPort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_UpdateViewPort) method is used to update the diagram page and view size at runtime. diff --git a/blazor/diagram-classic/serialization.md b/blazor/diagram-classic/serialization.md deleted file mode 100644 index 8d3a62d459..0000000000 --- a/blazor/diagram-classic/serialization.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -layout: post -title: Serialization in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Serialization in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Serialization in Blazor Diagram Component - -**Serialization** is the process of saving and loading for state persistence of the diagram. - -## Save - -The diagram is serialized as string while saving. The server-side method, [SaveDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SaveDiagram) helps to serialize the diagram as a string. The following code illustrates how to save the diagram. - - -```csharp -SfDiagram Diagram; -//Returns serialized string of the Diagram. -string Data = await this.Diagram.SaveDiagram(); -``` - -This string can be converted to JSON data and stored for future use. The following snippet illustrates how to save the serialized string into local storage. - -```csharp -localStorage.setItem('fileName', saveData); -saveData = localStorage.getItem('fileName'); - -``` - -Diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to [Print and Export](./export). - - -## Load - -Diagram is loaded from the serialized string data by server-side method, [LoadDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_LoadDiagram_System_String_). The following code illustrates how to load the diagram from serialized string data. - -```csharp -SfDiagram Diagram; - -//Returns serialized string of the Diagram. -string Data = await this.Diagram.SaveDiagram(); - -//Loads the Diagram from saved json data. -this.Diagram.LoadDiagram(this.Data); -``` - -N> Before loading a new diagram, existing diagram is cleared. - -## Prevent default values -The diagram provides supports to simplify the saved JSON object without adding the default properties that are presented in the diagram. The following code illustrates how to simplify the JSON object. - -```cshtml -@using Syncfusion.Blazor.Diagrams - -@* Initialize diagram *@ - - - -``` \ No newline at end of file diff --git a/blazor/diagram-classic/shapes.md b/blazor/diagram-classic/shapes.md deleted file mode 100644 index debeee63a8..0000000000 --- a/blazor/diagram-classic/shapes.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -layout: post -title: Shapes in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about the Shapes in the Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Shapes in Blazor Diagram Component - -Diagram provides support to add different kind of nodes. They are as follows: - -* Text node -* Image node -* HTML node -* Path node -* Basic shapes -* Flow shapes - - - - -## Text - -Texts can be added to the diagram as [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) nodes. The shape property of the node allows you to set the type of node and for text nodes, it should be set as **text**. In addition, define the content object that is used to define the text to be added and style is used to customize the appearance of that text. The following code illustrates how to create a text node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a text node. - new DiagramNode() - { - Id="node1", - // Size of the node. - Height=100, - Width=100, - // Position of the node. - OffsetX=100, - OffsetY=100, - //Sets type of the shape as text. - Shape=new DiagramShape(){Type=Shapes.Text,Content="Text Node"} - } - }; -} -``` - -![Text node](images/Textnode.png) - -## Image - -Diagram allows to add images as [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) nodes. The shape property of node allows you to set the type of node and for image nodes, it should be set as **image**. In addition, the source property of shape enables you to set the image source. - -The following code illustrates how an image node is created. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a image node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets type of the shape as image. - Shape=new DiagramShape(){Type=Shapes.Image,Source="/diagram/images/syncfusion.png"} - } - }; -} -``` - -![Image node](images/Imagenode.png) - -**Base64 Encoded Image Into The Image Node:** - -The following code illustrates how to add Base64 image into image node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a image node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets type of the shape as image. - Shape=new DiagramShape(){Type=Shapes.Image,Source="data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw=="} - } - }; -} -``` - -![Image node](images/base64.jpg) - -N> Deploy your HTML file in the web application and export the diagram (image node) or else the image node will not be exported in the Chrome and Firefox due to security issues. Refer to the following link. - -Link 1: [http://stackoverflow.com/questions/4761711/local-image-in-canvas-in-chrome](http://stackoverflow.com/questions/4761711/local-image-in-canvas-in-chrome) - -## Image alignment - -Stretch and align the image content anywhere but within the node boundary. - -The scale property of the node allows to stretch the image as you desired (either to maintain proportion or to stretch). By default, the [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShape.html#Syncfusion_Blazor_Diagrams_DiagramShape_Scale) property of the node is set as meet. The following code illustrates how to scale or stretch the content of the image node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a image node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets type of the shape as image. - Shape=new DiagramShape(){Type=Shapes.Image,Source="/diagram/images/syncfusion.png",Scale=Stretch.Meet, Align = ImageAlignment.XMinYMin} - } - }; -} -``` - -The following table illustrates all the possible scale options for the image node. - -| Values | Images | -|-------- | -------- | -| None | ![None Alignment](images/Image1.png) | -| Meet |![Meet Alignment](images/Image2.png) | -| Slice |![Slice Alignment](images/Image3.png) | -| Stretch |![Stretch Alignment](images/Image4.png) | - -## HTML - -Html elements can be embedded in the diagram through `Html` type node. The shape property of node allows you to set the type of node and to create a HTML node it should be set as `HTML`. The following code illustrates how an Html node is created. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Add a Namespace for a Syncfusion control used in Diagram HTML node *@ -@using Syncfusion.Blazor.Inputs - -@* Initialize Diagram with node template *@ - - - - @{ - - } - - - - -@code{ - public Type model = typeof(Node); - public class Node - { - public string Id { get; set; } - public double Width { get; set; } - } - - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates an HTML node - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=400, - OffsetY=100, - //Sets the type of the shape as HTML. - Shape=new DiagramShape() - { - Type=Shapes.HTML, - } - } - }; -} -``` - -![HTML node](images/Htmlnode.png) - -N> HTML node cannot be exported to image format, like JPEG, PNG and BMP. It is by design, while exporting the diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation. - -## Basic shapes - -* The [Basic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) shapes are common shapes that are used to represent the geometrical information visually. To create basic shapes, the type of the shape should be set as **basic**. Its shape property can be set with any one of the built-in shapes. - -* To render a rounded rectangle, you need to set the type as basic and shape as rectangle. Set the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShape.html#Syncfusion_Blazor_Diagrams_DiagramShape_CornerRadius) property to specify the radius of rounded rectangle. - -The following code example illustrates how to create a basic shape. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a basic shape node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets the type of the shape as basic. - Shape=new DiagramShape(){Type=Shapes.Basic,BasicShape=BasicShapes.Rectangle} - } - }; -} -``` - -N> By default, the `Shape` property of the node is set as **basic**. - -Default property for shape is Rectangle. - -N> When the `Shape` is not set for a basic shape, it is considered as a **rectangle**. - -The list of basic shapes are as follows. - -![BasicShapes](images/Basic.png) - -## Path - -The [Path](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) node is a commonly used basic shape that allows visually to represent the geometrical information. To create a path node, specify the shape as **path**. The path property of node allows you to define the path to be drawn. The following code illustrates how a path node is created. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - // Creates a path node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets the type of the shape as path. - Shape=new DiagramShape() - { - Type=Shapes.Path, - Data="M35.2441,25 L22.7161,49.9937 L22.7161,0.00657536 L35.2441,25 z M22.7167,25 L-0.00131226,25 M35.2441,49.6337 L35.2441,0.368951 M35.2441,25 L49.9981,25" - } - } - }; -} -``` - -## Flow Shapes - -The [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) shapes are used to represent the process flow. It is used for analyzing, designing and managing for documentation process. To create a flow shape, specify the shape type as **flow**. Flow shapes and by default, it is considered as **process**. The following code example illustrates how to create a flow shape. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a flow shape node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets the type of the shape as flow. - Shape=new DiagramShape() - { - Type=Shapes.Flow, - FlowShape=FlowShapes.DirectData - } - } - }; -} -``` - -The list of flow shapes are as follows. - -![FlowShapes](images/FlowShapes.png) \ No newline at end of file diff --git a/blazor/diagram-classic/style.md b/blazor/diagram-classic/style.md deleted file mode 100644 index c31c52a7b0..0000000000 --- a/blazor/diagram-classic/style.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -layout: post -title: CSS Structure in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about CSS Structure in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# CSS Structure in Blazor Diagram Component - -## Customizing the connector end point handle - -Use the following CSS to customize the connector end point handle. - -```scss - -.e-diagram-endpoint-handle { - fill: red; - stroke: green; - } - -``` - -## Customizing the connector end point handle when connected - -Use the following CSS to customize the connector end point handle when connected. - -```scss - -.e-diagram-endpoint-handle.e-connected { - fill: red; - stroke: green; - } - -``` - -## Customizing the connector end point handle when disabled - -Use the following CSS to customize the connector end point handle when disabled. - -```scss - -.e-diagram-endpoint-handle.e-disabled { - fill: red; - opacity: 1; - stroke: green; - } - -``` - -## Customizing the bezier connector handle - -Use the following CSS to customize the bezier handle properties. - -```scss - -.e-diagram-bezier-handle { - fill: red; - stroke: green; - } - -``` - -## Customizing the bezier connector line - -Use the following CSS to customize the bezier line properties. - -```scss - -.e-diagram-bezier-line { - stroke: black; - } - -``` - -## Customizing the resize handle - -Use the following CSS to customize the resize handle. - -```scss - -.e-diagram-resize-handle { - fill: white; - opacity: 1; - stroke: white; - } -``` - -## Customizing the selector pivot line - -Use the following CSS to customize the line between the selector and rotate handle. - -```scss - - .e-diagram-pivot-line { - stroke: red; - } - -``` - -## Customizing the selector border - -Use the following CSS to customize the selector border. - -```scss - -.e-diagram-border { - stroke: red; - } - -``` - -## Customizing the rotate handle - -Use the following CSS to customize the rotate handle properties. - -```scss - -.e-diagram-rotate-handle { - fill: red; - stroke: green; - } - -``` - -## Customizing the symbolpalette while hovering - -Use the following CSS to customize the symbolpalette while hovering. - -```scss - -.e-symbolpalette .e-symbol-hover:hover { - background: red; - } - -``` - -## Customizing the symbolpalette when selected - -Use the following CSS to customize the symbolpalette when selected. - -```scss - -.e-symbolpalette .e-symbol-selected { - background: white; - } - -``` - -## Customizing the ruler - -Use the following CSS to customize the ruler properties. - -```scss - -.e-diagram .e-ruler { - background-color: red; - font-size: 13px; - } - -``` - -## Customizing the ruler overlap - -Use the following CSS to ruler overlap properties. - -```scss - -.e-diagram .e-ruler-overlap { - background-color: red; - } - -``` - -## Customizing the text edit - -Use the following CSS to customize the text edit properties. - -```scss - - .e-diagram .e-diagram-text-edit { - background: white; - border-color: red; - border-style: dashed; - border-width: 1px; - box-sizing: content-box; - color: black; - min-width: 50px; - } - -``` - -## Customizing the text edit on selection - -Use the following CSS to customize the text edit on selection properties. - -```scss - - .e-diagram-text-edit::selection { - background: red; - color: green; - } - -``` \ No newline at end of file diff --git a/blazor/diagram-classic/symbol-palette.md b/blazor/diagram-classic/symbol-palette.md deleted file mode 100644 index 07915c0b39..0000000000 --- a/blazor/diagram-classic/symbol-palette.md +++ /dev/null @@ -1,589 +0,0 @@ ---- -layout: post -title: Symbol Palette in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Symbol Palette in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Symbol Palette in Blazor Diagram Component - -The **SymbolPalette** displays a collection of palettes. The palette shows a set of nodes and connectors. It allows to drag and drop the nodes and connectors into the diagram. - -## Create symbol palette - -The `Width` and `Height` properties of the symbol palette allows to define the size of the symbol palette. - -```cshtml -@using Syncfusion.Blazor.Diagrams - -@* Initializes the symbol palette *@ - - -``` - -## Add palettes to SymbolPalette - -A palette allows to display a group of related symbols and it textually annotates the group with its header. A [Palettes](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html) can be added as a collection of symbol groups. - -The collection of predefined symbols can be added in palettes using the [Symbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Symbols) property. To initialize a palette, define a JSON object with the property [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Id) that is unique ID is set to the palettes. - -The following code example illustrates how to define a palette and how it is added to the symbol palette. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using Syncfusion.Blazor.Navigations -@using System.Collections.ObjectModel - -@* Initializes the symbol palette *@ -@* Defines how many palettes can be at expanded mode at a time *@ - - - -@code{ - SfSymbolPalette SymbolPalette; - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - // Defines palette's flow-shape collection. - public ObservableCollection FlowShapes { get; set; } - // Defines palette's connector collection. - public ObservableCollection Connectors { get; set; } - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - //Initialize the basicshapes for the symbol palette - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - }, - new DiagramNode() - { - Id = "Ellipse", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - } - }, - new DiagramNode() - { - Id = "Hexagon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - //Initialize the flowshapes for the symbol palette - FlowShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "process", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.Process - } - }, - new DiagramNode() - { - Id = "document", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.Document - } - }, - new DiagramNode() - { - Id = "predefinedprocess", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.PreDefinedProcess - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "Flowshapes", - Expanded = true, - Symbols = FlowShapes, - Title = "Flowshapes" - }); - //Initializes connector symbols for the symbol palette. - Connectors = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Link1", - Type = Segments.Orthogonal, - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 }, - Style = new ConnectorShapeStyle() { StrokeWidth = 1 }, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow } - }, - new DiagramConnector() - { - Id = "Link2", - Type = Segments.Straight, - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 }, - Style = new ConnectorShapeStyle() { StrokeWidth = 1 }, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow } - }, - new DiagramConnector() - { - Id = "Link3", - Type = Segments.Bezier, - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 }, - Style = new ConnectorShapeStyle() { StrokeWidth = 1 }, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "Connectors", - Expanded = true, - Symbols = Connectors, - Title = "Connectors" - }); - } -} -``` - -## Customize the palette header - -Palettes can be annotated with its header texts. - -The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Title) displayed as the header text of palette. - -The [Expanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Expanded) property of palette allows to expand/collapse its palette items. - -The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Height) property of palette sets the height of the symbol group. - -The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_IconCss) property sets the content of the symbol group. - -## Stretch the symbols into the palette - -The [Fit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolInfo.html#Syncfusion_Blazor_Diagrams_SymbolInfo_Fit) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. The following code example illustrates how to customize the symbol size. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Symbol palette with customize symbol size*@ - - - -@code{ - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - public SymbolInfo symbolInfo; - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - // Enables to fit the content into the specified palette item size. When it is set as false, the element is rendered with actual node size. - symbolInfo = new SymbolInfo() { Fit = true }; - //Initialize the basicshapes for the symbol palette - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - } -} -``` - -## Add/Remove symbols to palette at runtime - -* Symbols can be added to palette at runtime by using public method, [AddPaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_AddPaletteItem_System_String_System_Object_). - -* Symbols can be removed from palette at runtime by using public method, [RemovePaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_RemovePaletteItem_System_String_System_String_). - -## Customize the size of symbols - -The size of the individual symbol can be customized. The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_SymbolHeight) properties of node enables you to define the size of the symbols. The following code example illustrates how to change the size of a symbol. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Symbol palette with customize symbol size*@ - - @* Sets the margin for the symbols *@ - - - -@code{ - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - }, - new DiagramNode() - { - Id="Ellipse" , - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - } - }, - new DiagramNode() - { - Id="Hexagon" , - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - } -} -``` - -The [SymbolMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_SymbolMargin) property is used to create the space around elements, outside of any defined borders. - -## Symbol preview - -The symbol preview size of the palette items can be customized using [SymbolPreview](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_SymbolPreview). The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPaletteSymbolPreview.html#Syncfusion_Blazor_Diagrams_SymbolPaletteSymbolPreview_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPaletteSymbolPreview.html#Syncfusion_Blazor_Diagrams_SymbolPaletteSymbolPreview_Height) properties of SymbolPalette enables you to define the preview size to all the symbol palette items. The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPaletteSymbolPreview.html#Syncfusion_Blazor_Diagrams_SymbolPaletteSymbolPreview_Offset) of the dragging helper relative to the mouse cursor. - -The following code example illustrates how to change the preview size of a palette item. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Symbol palette with customize symbol size*@ - - @* Sets the margin for the symbols *@ - - @* Specifies the preview size and position to symbol palette items *@ - - - - - -@code{ - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - }, - new DiagramNode() - { - Id="Ellipse", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - } - }, - new DiagramNode() - { - Id="Hexagon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - } -} -``` - -## Default settings - -While adding more number of symbols such as nodes and connectors to the palette, define the default settings for those objects through the [NodeDefaults](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_NodeDefaults) and the `ConnectorDefaults` properties of diagram allows to define the default settings for nodes and connectors. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel -@using Syncfusion.Blazor.Navigations; - -@* Initialize Symbol palette with customize symbol size*@ - - - - - - - -@code{ - public ObservableCollection Palettes; - // Defines palette's basic shape collection. - public ObservableCollection BasicShapes { get; set; } - // Defines the default values for Nodes. - public DiagramNode PaletteNodeDefaults; - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - }, - new DiagramNode() - { - Id = "Ellipse", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - } - }, - new DiagramNode() - { - Id = "Hexagon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - } - } - }; - // Sets the default values for Nodes. - PaletteNodeDefaults = new DiagramNode() - { - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { StrokeColor = "#3A3A3A" } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - } -} -``` - -## Adding symbol description for symbols in the palette - -The diagram provides support to add symbol description below each symbol of a palette. This descriptive representation of each symbol will enhance the details of the symbol visually. The height and width of the symbol description can also be set individually. -* The property `getSymbolInfo`, can be used to add the symbol description at runtime. - The following code is an example to set a symbol description for symbols in the palette. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using Syncfusion.Blazor.Navigations -@using System.Collections.ObjectModel - -@* Initializes the symbol palette *@ -@* Defines how many palettes can be at expanded mode at a time *@ - - - -@code{ - SfSymbolPalette SymbolPalette; - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - // Defines palette's flow-shape collection. - public ObservableCollection FlowShapes { get; set; } - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - //Initialize the basicshapes for the symbol palette. - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - }, - // Sets symbol description for rectangle shape. - SymbolInfo= new SymbolInfo() - { - Description= new SymbolDescription - { - Text="Rectangle" - } - } - }, - new DiagramNode() - { - Id = "Ellipse", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - }, - // Sets symbol description for ellipse shape. - SymbolInfo= new SymbolInfo(){Description=new SymbolDescription{Text="Ellipse"}} - }, - new DiagramNode() - { - Id = "Hexagon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - }, - // Sets symbol description for hexagon shape. - SymbolInfo= new SymbolInfo(){Description=new SymbolDescription{Text="Hexagon"} } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - //Initialize the flowshapes for the symbol palette. - FlowShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "process", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.Process - }, - // Sets symbol description for process shape. - SymbolInfo= new SymbolInfo() - { - Description= new SymbolDescription - { - Text="Process" - } - } - }, - new DiagramNode() - { - Id = "document", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.Document - }, - // Sets symbol description for document shape. - SymbolInfo= new SymbolInfo() - { - Description= new SymbolDescription - { - Text="Document" - } - } - }, - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "Flowshapes", - Expanded = true, - Symbols = FlowShapes, - Title = "Flowshapes" - }); - } -} -``` - -## Palette interaction - -Palette interaction notifies the element enter, leave, and dragging of the symbols into the diagram. - -## Escape Key function - -The diagram provides support to cancel the node from symbol palette when the ESC key is pressed. - -## See Also - -* [How to add the symbol to the diagram](./nodes) \ No newline at end of file diff --git a/blazor/diagram-classic/tool-tip.md b/blazor/diagram-classic/tool-tip.md deleted file mode 100644 index 64b380f8b7..0000000000 --- a/blazor/diagram-classic/tool-tip.md +++ /dev/null @@ -1,346 +0,0 @@ ---- -layout: post -title: Tooltip in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Tooltip in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Tooltip in Blazor Diagram Component - -In Graphical User Interface (GUI), the tooltip is a message that is displayed when mouse hovers over an element. The diagram provides tooltip support while dragging, resizing, rotating a node, and when the mouse hovers any diagram element. - -## Default tooltip - -By default, diagram displays a tooltip to provide the size, position, and angle related information while dragging, resizing, and rotating. The following images illustrate how the diagram displays the node information during an interaction. - -| Drag | Resize | Rotate | -|------|--------|--------| -|![ToolTip During Drag](images/Tooltip_img1.png) | ![ToolTip During Resize](images/Tooltip_img2.png) | ![ToolTip During Rotate](images/Tooltip_img3.png) | - -## Common tooltip for all nodes and connectors - -The diagram provides support to show tooltip when the mouse hovers over any node/connector. To show tooltip on mouse over, the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTooltip.html) property of diagram model needs to be set with the tooltip `Content` and `Position` as shown in the following example. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the diagram component *@ - - - -@code{ - //Defines diagram's node collection. - public ObservableCollection NodeCollection { get; set; } - // Defines position of the tooltip. - - public DiagramTooltip tooltip = new DiagramTooltip() - { - Content = "Nodes", - Position = Syncfusion.Blazor.Popups.Position.TopLeft - }; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - //Defines nodes. - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Disable tooltip at runtime - -The tooltip on mouse over can be disabled by assigning the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTooltip.html) property as `null`. The following code example illustrates how to disable the mouse over tooltip at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams - -@* Initializes the diagram component *@ - - - -@code{ - //Disables mouse over tooltip. - public DiagramTooltip tooltip = null; -} - -``` - -## Tooltip for a specific node/connector - -The tooltip can be customized for each node and connector. Remove the `InheritTooltip` option from the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html) of that node/connector. The following code example illustrates how to customize the tooltip for individual elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the diagram component *@ - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - //Defines nodes. - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - }, - //Defines mouse over tooltip for a node. - Tooltip = new NodeTooltip() - { - //Sets the content of the tooltip. - Content = "Node1", - //Sets the position of the tooltip. - Position = Syncfusion.Blazor.Popups.Position.BottomRight, - //Sets the tooltip position relative to the node. - RelativeMode = TooltipRelativeMode.Object - } - }; - NodeCollection.Add(node); - } -} -``` - -## Tooltip alignments - -### Tooltip relative to object - -The diagram provides support to show tooltip around the node/connector that is hovered by the mouse. The tooltip can be aligned by using the `Position` property of the tooltip. The [RelativeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeTooltip.html#Syncfusion_Blazor_Diagrams_NodeTooltip_RelativeMode) property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position. - -The following code example illustrates how to position the tooltip around object. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the diagram component *@ - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - //Defines nodes. - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", - Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - }, - //Defines mouse over tooltip for a node - Tooltip = new NodeTooltip() - { - Content = "Node1", - //Sets the position properties - Position = Syncfusion.Blazor.Popups.Position.BottomRight, - //Sets to show tooltip around the element - RelativeMode = TooltipRelativeMode.Object - } - }; - NodeCollection.Add(node); - } -} -``` - -### Tooltip relative to mouse position - -To display the tooltip at mouse position, you need to set mouse option to the [RelativeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeTooltip.html#Syncfusion_Blazor_Diagrams_NodeTooltip_RelativeMode) property of the tooltip. The following code example illustrates how to show tooltip at mouse position. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the diagram component *@ - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - //Defines nodes. - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", - Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - }, - //Defines mouse over tooltip for a node. - Tooltip = new NodeTooltip() - { - Content = "Node1", - //Sets to show tooltip at mouse position. - RelativeMode = TooltipRelativeMode.Mouse - } - }; - NodeCollection.Add(node); - } -} -``` - -## Tooltip animation - -To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsTooltip.html#Syncfusion_Blazor_Diagrams_DiagramsTooltip_Animation) property. The animation property also allows you to set delay, duration, and various other effects of your choice. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the Diagram component *@ - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - }, - //Defines mouse over tooltip for a node. - Tooltip = new NodeTooltip() - { - Content = "Node1", - Position = Syncfusion.Blazor.Popups.Position.BottomRight, - RelativeMode = TooltipRelativeMode.Mouse, - Animation = new Syncfusion.Blazor.Popups.AnimationModel() - { - //Animation settings to be applied on the tooltip, while it is being shown over the target. - Open = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() - { - //Animation effect on the tooltip is applied during open and close actions. - Effect = Syncfusion.Blazor.Popups.Effect.ZoomIn, - //Duration of the animation that is completed per animation cycle. - Duration = 1000, - //Indicating the waiting time before animation begins. - Delay = 0 - }, - //Animation settings to be applied on the tooltip, when it is closed. - Close = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() - { - Effect = Syncfusion.Blazor.Popups.Effect.ZoomOut, - Duration = 500, - Delay = 0 - } - } - } - }; - NodeCollection.Add(node); - } -} - -``` \ No newline at end of file diff --git a/blazor/diagram-classic/tools.md b/blazor/diagram-classic/tools.md deleted file mode 100644 index 68c9d1c93a..0000000000 --- a/blazor/diagram-classic/tools.md +++ /dev/null @@ -1,332 +0,0 @@ ---- -layout: post -title: Tools in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Tools in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Tools in Blazor Diagram Component - -## Drawing tools - -Drawing tool allows you to draw any kind of node/connector during runtime by clicking and dragging on the diagram page. - -N> A new blazor diagram component which provides better performance than this diagram control in Blazor WebAssembly App. It is available in preview mode. Refer the [Link](https://blazor.syncfusion.com/documentation/diagram/getting-started) - - -## Shapes - -To draw a shape, set the JSON of that shape to the drawType property of the diagram and activate the drawing tool by using the [Tool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Tool) property. The following code example illustrates how to draw a rectangle at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } - - private void AddNode() - { - //To draw an object once, activate draw once. - diagram.Tool = DiagramTools.DrawOnce; - //Initialize the drawing object to draw the shape. - diagram.DrawingObject = new DiagramNode() - { - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - }; - } -} -``` - -## Connectors - -To draw connectors, set the JSON of the connector to the drawType property. The drawing [Tool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IDiagram.html) can be activated by using the tool property. The following code example illustrates how to draw a straight line connector. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } - - private void AddConnector() - { - //To draw an object once, activate draw once. - diagram.Tool = DiagramTools.DrawOnce; - //Initialize the drawing object to draw the connectors. - diagram.DrawingObject = new DiagramConnector() - { - Id = "connector1", - Type = Segments.Straight, - Segments = new ObservableCollection() - { - new DiagramConnectorSegment() - { - Type = Segments.Polyline, - } - }, - }; - } -} -``` - -## Text - -Diagram allows you to create a textNode, when you click on the diagram page. The following code illustrates how to draw a text. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } - - private void TextNode() - { - //To draw an object once, activate draw once. - diagram.Tool = DiagramTools.DrawOnce; - - //Initialize the drawing object to draw the text node. - diagram.DrawingObject = new DiagramNode() - { - Shape = new DiagramShape() - { - Type = Shapes.Text, - TextContent = "Text", - }, - }; - } -} -``` - -Once you activate the TextTool, perform label editing of a node/connector. - -## Polygon shape - -Diagram allows to create the polygon shape by clicking and moving the mouse at runtime on the diagram page. - -The following code illustrates how to draw a polygon shape. - -```cshtml -@using System.Collections.ObjectModel -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } - - private void Polygon() - { - //To draw an object once, activate draw once. - diagram.Tool = DiagramTools.DrawOnce; - //Initialize the drawing object to draw the polygon shape. - diagram.DrawingObject = new DiagramNode() - { - Id = "polygon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = BasicShapes.Polygon, - }, - }; - } -} -``` - -## Tool selection - -There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows, - -* Draw selection rectangle: MultipleSelect tool -* Pan the diagram: Zoom pan -* Draw nodes/connectors: DrawOnce/DrawOnce - -As all the three behaviors are completely different, you can achieve only one behavior at a time based on the tool that you choose. -When more than one of those tools are applied, a tool is activated based on the precedence given in the following table. - -|Precedence|Tools|Description| -|----------|-----|-----------| -|1st|ContinuesDraw|Allows you to draw the nodes or connectors continuously. Once it is activated, you cannot perform any other interaction in the diagram.| -|2nd|DrawOnce|Allows you to draw a single node or connector. Once you complete the DrawOnce action, SingleSelect, and MultipleSelect tools are automatically enabled.| -|3rd|ZoomPan|Allows you to pan the diagram. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.| -|4th|MultipleSelect|Allows you to select multiple nodes and connectors. When you enable both the MultipleSelect and ZoomPan tools, cursor hovers the diagram. When panning is enabled, you cannot select multiple nodes.| -|5th|SingleSelect|Allows you to select individual nodes or connectors.| -|6th|None|Disables all tools.| - -Set the desired [Tool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IDiagram.html) to the tool property of the diagram model. - -The following code illustrates how to enable single tools, - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Enable the single tool. - public DiagramTools tool = DiagramTools.DrawOnce; - //Defines diagram's connectors collection. - public ObservableCollection ConnectorCollection = new ObservableCollection(); -} -``` - -The following code illustrates how to enable multiple tools, - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Enable the multiple tools. - public DiagramTools tool = DiagramTools.DrawOnce | DiagramTools.ZoomPan; - //Defines diagram's connectors collection. - public ObservableCollection ConnectorCollection = new ObservableCollection(); -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/umldiagram.md b/blazor/diagram-classic/umldiagram.md deleted file mode 100644 index 610176669f..0000000000 --- a/blazor/diagram-classic/umldiagram.md +++ /dev/null @@ -1,624 +0,0 @@ ---- -layout: post -title: UML Diagram Shapes in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about UML Diagram Shapes in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# UML Diagram Shapes in Blazor Diagram Component - -## UML Class Diagram Shapes - -Class diagram is used to represent the static view of an application. The class diagrams are widely used in the modeling of object-oriented systems because they are the only UML diagrams that can be mapped directly with object-oriented languages. Diagram supports to generate the class diagram shapes from business logic. - -The UML class diagram shapes are explained as follows. - -## Class - -* A class describes a set of objects that shares the same specifications of features, constraints, and semantics. To define a class object, you should define the classifier as [Class](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClass.html). - -* Also, define the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClass.html#Syncfusion_Blazor_Diagrams_DiagramUmlClass_Name), [Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClass.html#Syncfusion_Blazor_Diagrams_DiagramUmlClass_Attributes), and [Methods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClass.html#Syncfusion_Blazor_Diagrams_DiagramUmlClass_Methods) of the class using the class property of node. - -* The attribute’s [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassAttribute_Name), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassAttribute_Type), and [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassAttribute_Scope) properties allow you to define the name, data type, and visibility of the attribute. - -* The method’s [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassMethod.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassMethod_Name), [Parameters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassMethod.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassMethod_Parameters), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassMethod.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassMethod_Type), and [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassMethod.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassMethod_Scope) properties allow you to define the name, parameter, return type, and visibility of the methods. - -* The method parameters object properties allow you to define the name and type of the parameter. - -* The following code example illustrates how to create a class. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's Node collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "Patient", - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.UmlClassifier, - Classifier = ClassifierShape.Class, - //Define class object. - ClassShape = new DiagramUmlClass() - { - Name = "Patient", - //Define class attributes. - Attributes = new ObservableCollection() - { - new DiagramUmlClassAttribute() { Name = "accepted", Type = "Date" } - }, - //Define class methods. - Methods = new ObservableCollection() - { - new DiagramUmlClassMethod() - { - Name = "getHistory", Type = "getHistory" - } - } - } - } - }; - //Add node. - NodeCollection.Add(node); - } -} -``` - -## Interface - -* An Interface is a kind of classifier that represents a declaration of a set of coherent public features and obligations. To create an interface, define the classifier property as [Interface](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlInterface.html). - -* Also, define the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlInterface.html#Syncfusion_Blazor_Diagrams_DiagramUmlInterface_Name), [Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlInterface.html#Syncfusion_Blazor_Diagrams_DiagramUmlInterface_Attributes), and [Methods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlInterface.html#Syncfusion_Blazor_Diagrams_DiagramUmlInterface_Methods) of the interface using the interface property of the node. - -* The attribute’s name, type, and scope properties allow you to define the name, data type, and visibility of the attribute. - -* The method’s name, parameter, type, and scope properties allow you to define the name, parameter, return type, and visibility of the methods. - -* The method parameter object properties of name and type allows you to define the name and type of the parameter. - -* The following code example illustrates how to create an interface. - -```cshtml -@* Initializes diagram control *@ -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - //Defines diagram's Node collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "Patient", - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.UmlClassifier, - Classifier = ClassifierShape.Interface, - //Define interface object. - InterfaceShape = new DiagramUmlInterface() - { - Name = "Patient", - //Define interface attributes. - Attributes = new ObservableCollection() - { - new DiagramUmlClassAttribute() { Name = "owner", Type = "String[*]" } - }, - //Define interface methods. - Methods = new ObservableCollection() - { - new DiagramUmlClassMethod() - { - Name = "deposit", - Parameters = new ObservableCollection() - { - new DiagramMethodArguments(){Name = "amount", Type = "Dollars" } - } - } - } - } - } - }; - //Add node. - NodeCollection.Add(node); - } -} -``` - -## Enumeration - -* To define an enumeration, define the classifier property of node as [Enumeration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlEnumeration.html). Also, define the name and members of the enumeration using the enumeration property of the node. - -* You can set a name for the enumeration members collection using the name property of members collection. - -* The following code example illustrates how to create an enumeration. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's Node collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "Patient", - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.UmlClassifier, - Classifier = ClassifierShape.Enumeration, - //Define enumeration object. - EnumerationShape = new DiagramUmlEnumeration() - { - Name = "AccountType", - //Set the members of enumeration. - Members = new ObservableCollection() - { - new DiagramUmlEnumerationMember() - { - Name = "Checking Account" - }, - new DiagramUmlEnumerationMember() - { - Name = "Savings Account" - }, - new DiagramUmlEnumerationMember() - { - Name = "Credit Account" - } - } - } - } - }; - NodeCollection.Add(node); - } -} -``` - -## Connector shapes - -* The connector shape property defines the role or meaning of the connector. - -* The different types of connector shapes are `BPMN`, [UMLClassifier](https://help.syncfusion.com/cr/blazor) and [UMLActivity](https://help.syncfusion.com/cr/blazor) and can render these shapes by setting the connector shape type property. - -* The type of flow shapes in a BPMN process are sequence, association, and message. - -## Relationships - -* A relationship is a general term covering the specific types of logical connections found on class diagrams. - -* The list of Relationships is demonstrated as follows. - -| Shape | Image | -| ----------- | ------------------------------------ | -| Association | ![Association](images/Association.png) | -| Aggregation | ![Aggregation](images/Aggregation.png) | -| Composition | ![Composition](images/Composition.png) | -| Inheritance | ![Inheritance](images/Inheritance.png) | -| Dependency | ![Dependency](images/Dependency.png) | - -## Association - -Association is basically a set of links that connects elements of an UML model. The type of association are as follows. -1. Directional -2. BiDirectional - -The association property allows you to define the type of association. The default value of association is [Directional](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BpmnAssociationFlows.html). The following code example illustrates how to create an association. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 }, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - Relationship = ClassifierShape.Association, - //Define type of association. - Association = BpmnAssociationFlows.BiDirectional - } - }; - //Add connector. - ConnectorCollection.Add(connector); - } -} -``` - -## Aggregation - -Aggregation is a binary association between a property and one or more composite objects which group together a set of instances. Aggregation is decorated with a hollow diamond. To create an aggregation shape, define the relationship as “aggregation”. - -The following code example illustrates how to create an aggregation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector. - Relationship = ClassifierShape.Aggregation - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -## Composition - -Composition is a “strong” form of “aggregation”. Composition is decorated with a black diamond. To create a composition shape, define the relationship property of connector as “composition”. - -The following code example illustrates how to create a composition. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector - Relationship = ClassifierShape.Composition - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - //Add connector. - ConnectorCollection.Add(connector); - } -} -``` - -## Dependency - -Dependency is a directed relationship, which is used to show that some UML elements needs or depends on other model elements for specifications. Dependency is shown as dashed line with opened arrow. To create a dependency, define the relationship property of connector as “dependency”. - -The following code example illustrates how to create an dependency. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector. - Relationship = ClassifierShape.Dependency - }, - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -## Inheritance - -Inheritance is also called as “generalization”. Inheritance is a binary taxonomic directed relationship between a more general classifier (super class) and a more specific classifier (subclass). Inheritance is shown as a line with hollow triangle. - -To create an inheritance, define the relationship as “inheritance”. - -The following code example illustrates how to create an inheritance. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector. - Relationship = ClassifierShape.Inheritance - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -## Multiplicity - -Multiplicity is a definition of an inclusive interval of non-negative integers to specify the allowable number of instances of described element. The type of multiplicity are as follows. - -1. OneToOne -2. ManyToOne -3. OneToMany -4. ManyToMany - -* By default the multiplicity will be considered as “OneToOne”. - -* The multiplicity property in UML allows you to specify large number of elements or some collection of elements. - -* The shape multiplicity’s source property is used to set the source label to connector and the target property is used to set the target label to connector. - -* To set an optionality or cardinality for the connector source label, use optional property. - -* The `LowerBounds` and `UpperBounds` could be natural constants or constant expressions evaluated to natural (non negative) number. Upper bound could be also specified as asterisk ‘\*’ which denotes unlimited number of elements. Upper bound should be greater than or equal to the lower bound. - -* The following code example illustrates how to customize the multiplicity. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector. - Relationship = ClassifierShape.Dependency, - Multiplicity = new DiagramClassifierMultiplicity() - { - //Set multiplicity type - Type = Multiplicity.OneToMany, - //Set source label to connector. - Source = new SourceMultiplicityLabel() - { - Optional = true, - LowerBounds = "89", - UpperBounds = "67" - }, - //Set target label to connector. - Target = new TargetMultiplicityLabel() - { - Optional = true, - LowerBounds = "78", - UpperBounds = "90" - } - } - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -## UmlActivity diagram - -Activity diagram is basically a flowchart to represent the flow from one activity to another. The activity can be described as an operation of the system. - -The purpose of an activity diagram can be described as follows. -1. Draw the activity flow of a system. -2. Describe the sequence from one activity to another. -3. Describe the parallel, branched, and concurrent flow of the system. - -To create a UmlActivity, define type as "UmlActivity" and the list of built-in shapes as demonstrated as follows and it should be set in the "shape" property. - -| Shape | Image | -| -------------- | ---------------------------------------- | -| Action | ![Action](images/Action.png) | -| Decision | ![Decision](images/Decision.png) | -| MergeNode | ![MergeNode](images/MergeNode.png) | -| InitialNode | ![InitialNode](images/InitialNode.png) | -| FinalNode | ![FinalNode](images/FinalNode.png) | -| ForkNode | ![ForkNode](images/ForkNode.png) | -| JoinNode | ![JoinNode](images/JoinNode.png) | -| TimeEvent | ![TimeEvent](images/TimeEvent.png) | -| AcceptingEvent | ![AcceptingEvent](images/AcceptingEvent.png) | -| SendSignal | ![SendSignal](images/SendSignal.png) | -| ReceiveSignal | ![ReceiveSignal](images/ReceiveSignal.png) | -| StructuredNode | ![StructuredNode](images/StructuredNode.png) | -| Note | ![Note](images/Note.png) | - -The following code illustrates how to create a UMLActivity shapes. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection NodeCollection { get; set; } - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "UmlDiagram", - //Set node size. - Width = 100, - Height = 100, - //Position the node. - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.UmlActivity, - //Define UmlActivity shape. - UmlActivityShape = UmlActivityShapes.Action - } - }; - NodeCollection.Add(node); - } -} -``` - -### UMLActivity connector - -To create an UMLActivity connector, define the type as "UMLActivity" and flow as either "Exception" or "Control" or "Object". - -The following code illustrates how to create a UMLActivity connector. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlActivity, - UmlActivityFlow = UmlActivityFlows.Exception - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -### Editing - -You can edit the name, attributes, and methods of the class diagram shapes just by double clicking, similar to editing a node annotation. - -The following image illustrates how the text editor looks in an edit mode. - -![Editing Class Diagram](images/ClassEdit.png) \ No newline at end of file diff --git a/blazor/diagram-classic/undo-redo.md b/blazor/diagram-classic/undo-redo.md deleted file mode 100644 index 20a1370b81..0000000000 --- a/blazor/diagram-classic/undo-redo.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -layout: post -title: Undo Redo in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Undo Redo in the Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Undo Redo in Blazor Diagram Component - -Diagram tracks the history of actions that are performed after initializing the diagram and provides support to reverse and restore those changes. - -## Undo and redo - -Diagram provides built-in support to track the changes that are made through interaction and through public APIs. The changes can be reverted or restored either through shortcut keys or through commands. - -## Undo/redo through shortcut keys - -Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is Ctrl+Z and shortcut key for redo is Ctrl+Y. - -## Undo/redo through public APIs - -The server-side methods [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Undo) and [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Redo) help you to revert/restore the changes. The following code example illustrates how to undo/redo the changes through script. - -```csharp -SfDiagram Diagram; - -// Reverts the last action performed. -this.Diagram.Undo(); - -// Restores the last undone action. -this.Diagram.Redo(); -``` - -When a change in the diagram is reverted or restored (undo/redo), the [HistoryChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramModel.html#Syncfusion_Blazor_Diagrams_DiagramModel_HistoryChange) event gets triggered. - -### Group multiple changes - -History list allows to revert or restore multiple changes through a single undo/redo command. For example, revert/restore the fill color change of multiple elements at a time. - -The server-side method [StartGroupAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.History.html#Syncfusion_Blazor_Diagrams_History_StartGroupAction) is used to notify the diagram to start grouping the changes. The server-side method [EndGroupAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.History.html#Syncfusion_Blazor_Diagrams_History_EndGroupAction) is used to notify to stop grouping the changes. The following code illustrates how to undo/redo to change of multiple elements at a time. - -```csharp -SfDiagram Diagram; - -//Starts grouping the changes. -this.Diagram.StartGroupAction(); - -//Ends grouping the changes. -this.Diagram.EndGroupAction(); -``` - -### Track custom changes - -Diagram provides options to track the changes that are made to custom properties. For example, in case of an employee relationship diagram, track the changes in the employee information. The `HistoryList` of the diagram enables you to track such changes. -The following example illustrates how to track such custom property changes. - -Before changing the employee information, save the existing information to history list by using the server-side method push of `HistoryList`. The history list [CanLog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.History.html#Syncfusion_Blazor_Diagrams_History_CanLog) method can be used which takes a history entry as argument and returns whether the specific entry can be added or not. - -The following code example illustrates how to save the existing property values. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Reference of diagram. - SfDiagram diagram; - public string Height { get; set; } = "500px"; - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - //Unique id of the node. - Id="NewIdea", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Customize the appearance of the node. - Style= new NodeShapeStyle(){Fill="#6BA5D7",StrokeColor="White"}, - //Enable shadow constraint of the node. - Constraints=NodeConstraints.Default|NodeConstraints.Shadow, - //Initialize annotation collection with annotation. - Annotations=new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content="node1", - //Customize the appearance of the annotations. - Style=new AnnotationStyle() - { - Color="White", - StrokeColor="None" - }, - } - }, - //Customizes the appearance of the node shadow style. - Shadow=new DiagramShadow() - { - Angle=50, - Opacity=0.8, - Distance=9 - } - } - }; - - public void TrackCustomActions() - { - //Creates a custom entry. - HistoryEntry historyEntry = new HistoryEntry() { UndoObject = diagram.Nodes[0] }; - // Adds that to history list. - diagram.AddHistoryEntry(historyEntry); - diagram.DataBind(); - } -} -``` - -### Track undo/redo actions - -The [GetHistoryStack](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetHistoryStack_System_Boolean_) method is used to get the collection of undo and redo actions which should be performed in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code -{ - //Get the collection of undostack objects when passing true to GetHistoryStack() method. - List undostack = await diagram.GetHistoryStack(true); - //Get the collection of redo stack objects when passing true to GetHistoryStack() method. - List redostack = await diagram.GetHistoryStack(false); -} -``` - -## History change event - -The [HistoryChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramModel.html#Syncfusion_Blazor_Diagrams_DiagramModel_HistoryChange) event triggers, whenever the interaction of the node and connector takes place. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code -{ - public void Onhistorychange(IBlazorHistoryChangeArgs args) - { - //Causes of history change. - var cause = args.Cause; - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/user-handle.md b/blazor/diagram-classic/user-handle.md deleted file mode 100644 index 47bcd654a1..0000000000 --- a/blazor/diagram-classic/user-handle.md +++ /dev/null @@ -1,693 +0,0 @@ ---- -layout: post -title: User Handles in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about User Handles in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# User Handles in Blazor Diagram Component - -User handles are customizable handles that can be used to perform custom actions and default clipboard actions. - -## Initialization an userhandle - -The user handle can enables for the selected nodes/connectors by setting a [SelectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SelectorConstraints.html) as `UserHandle` and then use the [DiagramUserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) class to create an object for the user handles. The following code example used to enable and create an user handles for the diagram nodes/connectors. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - // Defines diagram's SelectedItems. - public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; } - ObservableCollection UserHandles { get; set; } - - protected override void OnInitialized() - { - //Creating the userhandle for cloning the objects. - DiagramUserHandle cloneHandle = new DiagramUserHandle() - { - //Name of the user handle. - Name = "clone", - //Set pathdata for userhandle. - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", - //Set visibility for the user handle. - Visible = true, - //Set the position for the user handle. - Offset = 0, - //Set side based on the given offset. - Side = Side.Bottom, - //Set margin for the user handle. - Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 } - }; - //Add user handle to the collection. - UserHandles = new ObservableCollection() - { - cloneHandle - }; - SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems() - { - //Enable userhandle for selected items. - Constraints = SelectorConstraints.UserHandle, - UserHandles = this.UserHandles - }; - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node" - } - } - }; - NodeCollection.Add(diagramNode); - } -} -``` - -![User handle for node](images/userhandle1.png) - -## Customization - -If set `false` to the [DisableConnectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_DisableConnectors) property in userhandle, the userhandle prevents rendering for the connectors. The following code example is used to show userhandle for the nodes alone. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - // Reference to diagram. - SfDiagram Diagram; - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - // Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - // Defines diagram's SelectedItems. - public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; } - ObservableCollection UserHandles { get; set; } - - protected override void OnInitialized() - { - //Creating the userhandle for cloning the objects. - DiagramUserHandle cloneHandle = new DiagramUserHandle() - { - //Name of the user handle. - Name = "clone", - //Set pathdata for userhandle. - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", - //Set visibility for the user handle. - Visible = true, - //Set the position for the user handle. - Offset = 0, - //Set side based on the given offset. - Side = Side.Bottom, - //Disable to render this userhandle for connectors. - DisableConnectors = true, - //Set margin for the user handle. - Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 } - }; - //Add user handle to the collection. - UserHandles = new ObservableCollection() - { - cloneHandle - }; - SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems() - { - //Enable userhandle for selected items. - Constraints = SelectorConstraints.UserHandle, - UserHandles = this.UserHandles - }; - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node" - } - } - }; - NodeCollection.Add(diagramNode); - ConnectorCollection = new ObservableCollection(); - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -N> You can disable the [DisableNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_DisableNodes) property in userhandle. The userhandle prevents rendering for the nodes. - -### Position - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset) property of userhandle is used to align the userhandles based on fractions. 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width or Height. The [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Side) property is used to set how the userhandle is aligned based on the given [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset). - -The following table shows all the possible alignments visually shows the userhandle positions. - -| Offset | Side | Output | -| -------- | -------- | -------- | -|0|Left|![User handle for node](images/userhandle2.png)| -|0|Right|![User handle for node](images/userhandle3.png)| -|0|Top|![User handle for node](images/userhandle4.png)| -|0|Bottom|![User handle for node](images/userhandle5.png)| -|1|Left|![User handle for node](images/userhandle6.png)| -|1|Right|![User handle for node](images/userhandle7.png)| -|1|Top|![User handle for node](images/userhandle8.png)| -|1|Bottom|![User handle for node](images/userhandle9.png)| - -### Size - -Diagram allows you set size for userhandles by using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Size) property. The default value of the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset) property is 25. - -### Style - -You can change the style of the userhandles with the specific properties of PathColor, BorderColor, BackgroundColor, and BorderWidth. The following code explains how to customize the appearance of the userhandles. - -* The userhandle's [PathColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_PathColor) property is used to change the color of the given [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_PathData) of the userhandle. - -* The userhandle [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BorderColor) and [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BackgroundColor) properties are used to define the background color and border color of the userhandle and the [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BorderWidth) property is used to define the border width of the userhandles. - -* The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Visible) property of the userhandle enables or disables the visibility of userhandle. - -The following code explains how to customize the appearance of the userhandle. - -```csharp -//Creating the userhandle for cloning the objects. -DiagramUserHandle cloneHandle = new DiagramUserHandle() -{ - //Name of the user handle. - Name = "clone", - //Set pathdata for userhandle. - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", - //Set visibility for the user handle. - Visible = true, - //Set the position for the user handle. - Offset = 1, - //Set side based on the given offset. - Side = Side.Bottom, - //Disable to render this userhandle for connectors. - DisableConnectors = true, - //Set margin for the user handle. - Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, - //Set size of the user handle. - Size = 50, - //Set pathcolor for given pathdata. - PathColor = "yellow", - //Set Border color of the user handle. - BorderColor = "red", - //Set Background Color of the user handle. - BackgroundColor = "green", - //Set Border Width Color of the user handle. - BorderWidth = 3, -}; -``` - -![Customized appearance of Userhandle](images/userhandle10.png) - -## Events - -The Diagram control provides following list of events for the userhandle. - -| Event Name | Event Type | Description | -| -------- | -------- | -------- | -| [OnUserHandleMouseDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnUserHandleMouseDown) | [UserHandleEventsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.UserHandleEventsArgs.html) | Triggered when the mouse pointer is over the userhandle and mouse button is down. | -| [OnUserHandleMouseUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnUserHandleMouseUp) | [UserHandleEventsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.UserHandleEventsArgs.html) | Triggered when the mouse pointer is over the userhandle and mouse button is released. | -| [OnUserHandleMouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnUserHandleMouseEnter) | [UserHandleEventsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.UserHandleEventsArgs.html) | Triggered when mouse enter into the userhandle. | -| [OnUserHandleMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnUserHandleMouseLeave) | [UserHandleEventsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.UserHandleEventsArgs.html) | Triggered when mouse leaves the userhandle. | - -The following code explains how to use the `OnUserHandleMouseUp` event for an userhandle. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // Reference to diagram. - SfDiagram Diagram; - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - // Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - // Defines diagram's SelectedItems. - public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; } - ObservableCollection UserHandles { get; set; } - - protected override void OnInitialized() - { - //Creating the userhandle for cloning the objects. - DiagramUserHandle cloneHandle = new DiagramUserHandle() - { - //Name of the user handle. - Name = "clone", - //Set pathdata for userhandle. - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", - //Set visibility for the user handle. - Visible = true, - //Set the position for the user handle. - Offset = 0, - //Set side based on the given offset. - Side = Side.Bottom, - //Disable to render this userhandle for connectors. - DisableConnectors = true, - //Set margin for the user handle. - Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 } - }; - //Add user handle to the collection. - UserHandles = new ObservableCollection() - { - cloneHandle - }; - SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems() - { - //Enable userhandle for selected items. - Constraints = SelectorConstraints.UserHandle, - UserHandles = this.UserHandles - }; - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() { new DiagramNodeAnnotation() { Content = "Node" } } - }; - NodeCollection.Add(diagramNode); - ConnectorCollection = new ObservableCollection(); - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(diagramConnector); - } - - /// - /// Mouse up event for the userhandles. - /// - public async Task OnUserHandleMouseUp(UserHandleEventsArgs args) - { - if (Diagram.SelectedItems.Nodes.Count > 0) - { - await Diagram.Copy(); - await Diagram.Paste(); - } - } -} -``` - -## Fixed user handles - - The fixed user handles are used to add some frequently used commands around the node and connector even without selecting it. - -## Initialization an fixed user handles - -To create the fixed user handles, define and add them to the collection of nodes and connectors property. The following code example used to create an fixed user handles for the nodes and connectors. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - OffsetX = 250, - OffsetY = 250, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // A fixed user handle is created and stored in fixed user handle collection of Node. - FixedUserHandles = new ObservableCollection() - { - new DiagramNodeFixedUserHandle() - { - Id = "user1", - Height = 20, - Width = 20, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Margin = new UserHandleMargin(){ Right = 20}, - Offset = new UserHandleOffset() { X =0 , Y = 0 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - }, - } - }; - NodeCollection.Add(node1); - } -} -``` - -## Customization the fixed user handle - -* The id property of fixed user handle is used to define the unique identification of the fixed user handle and it is further used to add custom events to the fixed user handle. - -* The fixed user handle can be positioned relative to the node and connector boundaries. It has offset, padding and cornerRadius settings. It is used to position and customize the fixed user handle. - -* The `Padding` is used to leave the space that is inside the fixed user handle between the icon and border. - -* The corner radius allows to create fixed user handles with rounded corners. The radius of the rounded corner is set with the `cornerRadius` property. - -N> The PathData needs to be provided to render fixed user handle. - -### Size - - Diagram allows you to set size for the fixed user handles by using the `width` and `height` properties. The default value of the width and height properties is 10. - -### Style - -* You can change the style of the fixed user handles with the specific properties of borderColor, borderWidth, and background color using the handleStrokeColor, handleStrokeWidth, and fill properties, and the icon borderColor, and borderWidth using the iconStrokeColor and iconStrokeWidth. - -* The fixed user handle's `iconStrokeColor` and `iconStrokeWidth` property used to change the stroke color and stroke width of the given `pathData`. - -* The fixed user handle `handleStrokeColor` and `fill` properties are used to define the background color and border color of the userhandle and the `handleStrokeWidth` property is used to define the border width of the fixed user handle. - -* The `visible` property of the fixed user handle enables or disables the visibility of fixed user handle. - -The following code explains how to customize the appearance of the fixed user handles. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - public ObservableCollection ConnectorCollection { get; set; } - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // A fixed user handle is created and stored in fixed user handle collection of Node. - FixedUserHandles = new ObservableCollection() - { - new DiagramNodeFixedUserHandle() - { - Id = "user1", - Height = 20, - Width = 20, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Margin = new UserHandleMargin(){ Right = 20}, - Offset = new UserHandleOffset() { X =0 , Y = 0 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - }, - } - }; - NodeCollection.Add(node); - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7" }, - // A fixed user handle is created and stored in fixed user handle collection of Connector. - FixedUserHandles = new ObservableCollection() - { - new DiagramConnectorFixedUserHandle() - { - Id = "user1", - Height = 25, - Width = 25, - Offset = 0.5, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Alignment = FixedUserHandleAlignment.After, - Displacement = new ConnectorDisplacementPoint{X = 5, Y = 5 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - } - }, - }; - ConnectorCollection.Add(connector); - } -} -``` - -N> The fixed user handle id need to be unique. - -## Customizing the node fixed user handle - -The node fixed user handle can be aligned relative to the node boundaries. It has `margin` and `offset` settings. It is quite useful to position the node fixed userhandle and used together and gives you more control over the node fixed user handle positioning. - -### Margin for the node fixed user handle - -Margin is an absolute value used to add some blank space in any one of its four sides. The fixed user handle can be displaced with the `margin` property. - -### Offset for the node fixed user handle - -The `offset` property of fixed user handle is used to align the user handle based on the `x` and `y` points. (0,0) represents the top or left corner and (1,1) represents the bottom or right corner. - -The following table shows all the possible alignments visually shows the fixed user handle positions. - -| Offset | Margin | Output | -| -------- | -------- | -------- | -| (0,0) | Right = 20 |![fixed user handle for node](images/topleft.png)| -| (0.5,0) | Bottom = 20 |![fixed user handle for node](images/topcenter.png)| -| (1,0) | Left = 20 |![fixed user handle for node](images/topright.png)| -| (0,0.5) | Right = 20 |![fixed user handle for node](images/leftcenter.png)| -| (0,1) | Left = 20 |![fixed user handle for node](images/rightcenter.png)| -| (0,1) | Right = 20 |![fixed user handle for node](images/bottomleft.png)| -| (0.5,1) | Top = 20 |![fixed user handle for node](images/bottomcenter.png)| -| (1,1) | Left = 20 |![fixed user handle for node](images/bottomright.png)| - -The following code explains how to customize the node fixed user handle. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - OffsetX = 250, - OffsetY = 250, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // A fixed user handle is created and stored in fixed user handle collection of Node. - FixedUserHandles = new ObservableCollection() - { - new DiagramNodeFixedUserHandle() - { - Id = "user1", - Height = 20, - Width = 20, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Margin = new UserHandleMargin(){ Right = 20}, - Offset = new UserHandleOffset() { X =0 , Y = 0 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - }, - } - }; - NodeCollection.Add(node1); - } -} -``` - -## Customizing the connector fixed user handle - -* The connector fixed user handle can be aligned relative to the connector boundaries. It has alignment, displacement and offset settings. It is useful to position the connector fixed user handle and used together and gives you more control over the connector fixed user handle positioning. - -* The `offset` and `alignment` properties of fixed user handle allows you to align the connector fixed user handles to the segments. - -### Offset for the connector fixed user handle - -The `offset` property of connector fixed user handle is used to align the user handle based on fractions. 0 represents the connector source point, 1 represents the connector target point, and 0.5 represents the center point of the connector segment. - -### Alignment - -The connector’s fixed user handle can be aligned over its segment path using the `alignment` property of fixed user handle. - -The following table shows all the possible alignments visually shows the fixed user handle positions. - -| Offset | Alignment | Output | -| -------- | -------- | -------- | -| 0 | Before |![fixed user handle for node](images/before_0.png)| -| 0.5 | Center |![fixed user handle for node](images/center_0.5.png)| -| 1 | After |![fixed user handle for node](images/after_1.png)| - -### Displacement - -The `displacement` property allows you to specify the space to be left from the connector segment based on the x and y value provided. - -The following table shows all the possible alignments visually shows the fixed user handle positions. - -| Displacement | Alignment | Output | -| -------- | -------- | -------- | -| x=10 | Before |![fixed user handle for node](images/xbefore.png)| -| x=10 | After |![fixed user handle for node](images/xafter.png)| -| y=10 | Before |![fixed user handle for node](images/ybefore.png)| -| y=10 | After |![fixed user handle for node](images/yafter.png)| - -N> Displacement will not be done if the alignment is set to be center. - -The following code explains how to customize the connector fixed user handle. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - Type = Segments.Orthogonal, - // A fixed user handle is created and stored in fixed user handle collection of Connector. - FixedUserHandles = new ObservableCollection() - { - new DiagramConnectorFixedUserHandle() - { - Id = "user1", - Height = 25, - Width = 25, - Offset = 0.5, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Alignment = FixedUserHandleAlignment.After, - Displacement = new ConnectorDisplacementPoint{X = 5, Y = 5 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - } - }, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## FixedUserHandle Event - -The Diagram control provides following event for the fixed user handle. - -| Event Name | Event Type | Description | -| -------- | -------- | -------- | -| FixedUserHandleClick | FixedUserHandleClickEventArgs | Triggered when the mouse pointer is over the userhandle and mouse button is up. | - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram diagram; - - public async void Changed(FixedUserHandleClickEventArgs args) - { - if (args.Element.Node.Id == "node1" && args.FixedUserHandle.NodeFixedUserHandle.Id == "user1") - { - await diagram.Copy(); - await diagram.Paste(); - } - } - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - OffsetX = 250, - OffsetY = 250, - Id = "node1", - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // A fixed user handle is created and stored in fixed user handle collection of Node. - FixedUserHandles = new ObservableCollection() - { - new DiagramNodeFixedUserHandle() - { - Id = "user1", - Height = 20, - Width = 20, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Margin = new UserHandleMargin(){ Right = 20}, - Offset = new UserHandleOffset() { X =0 , Y = 0 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - }, - } - }; - NodeCollection.Add(node1); - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/virtualization.md b/blazor/diagram-classic/virtualization.md deleted file mode 100644 index 4c0467762b..0000000000 --- a/blazor/diagram-classic/virtualization.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: post -title: Virtualization in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Virtualization in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Virtualization in Blazor Diagram Component - -## Virtualization in Diagram - -Virtualization is the process of loading the diagramming objects available in the visible area of the Diagram control, that is, only the diagramming objects that lie within the `ViewPort` of the Scroll Viewer are loaded (remaining objects are loaded only when they come into view). - -This feature gives an optimized performance while loading and dragging items to the Diagram that consists of many Nodes and Connectors. - -The following code illustrates how to enable [Virtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConstraints.html) mode in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams - -@* Initialize Diagram *@ - - - -@code -{ - public DiagramConstraints Constraints = DiagramConstraints.Default | DiagramConstraints.Virtualization; -} -``` \ No newline at end of file diff --git a/blazor/diagram/accessibility.md b/blazor/diagram/accessibility.md index 860b713f18..1621f43481 100644 --- a/blazor/diagram/accessibility.md +++ b/blazor/diagram/accessibility.md @@ -9,9 +9,9 @@ documentation: ug # Accessibility Features in Blazor Diagram Component -Accessibility in the Blazor diagram component is achieved through compliance with the [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, as well as [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) and support for keyboard navigation. This ensures that users can effectively interact with the diagram features using assistive technologies such as screen readers. +Accessibility in the Blazor Diagram component is achieved through compliance with [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, as well as [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) and supports keyboard navigation. This ensures that users can effectively interact with diagram features using assistive technologies such as screen readers. -The accessibility compliance for the Blazor diagram component is outlined below: +The accessibility compliance for the Blazor Diagram component is outlined below: | Accessibility Criteria | Compatibility | | -- | -- | @@ -39,14 +39,14 @@ The accessibility compliance for the Blazor diagram component is outlined below: ## WAI-ARIA Attributes -The Blazor Diagram component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Diagram component: +The Blazor Diagram component follows WAI-ARIA patterns to support accessibility. The following ARIA attributes are used in the Blazor Diagram component: | Attributes | Purpose | | --- | --- | -| `aria-label` | Provides an accessible name for the Diagram Objects. | +| `aria-label` | Provides an accessible name for diagram objects. | ### Aria-label -The aria-label attribute provides the text label with some default description for below elements in diagram. +The `aria-label` attribute provides a text label with a default description for the following elements in the diagram. @@ -96,20 +96,20 @@ The aria-label attribute provides the text label with some default description f - +
    RotateThumbThumb to rotate the selected object.Thumb to rotating the selected object.
    ## Keyboard Shortcuts and Navigations -The Blazor Diagram component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Diagram component. +The Blazor Diagram component supports the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported. | Windows | Mac | Description | |-----|-----| ---- | |Ctrl+C | ⌘ + C | Copy the selected diagram elements to the clipboard.| |Ctrl+X | ⌘ + X | Cut the selected diagram elements to the clipboard.| |Ctrl+V | ⌘ + V | Paste the diagram elements from the clipboard.| -|Ctrl+A | ⌘ + A | Select all the diagram elements.| +|Ctrl+A | ⌘ + A | Select all diagram elements.| |Delete | Delete | Delete the selected diagram elements.| |Ctrl+P | ⌘ + P | Print the diagram page.| |Ctrl+Z | ⌘ + Z | Undo the last action.| @@ -135,8 +135,8 @@ The Blazor Diagram component followed the [keyboard interaction](https://www.w3. |Ctrl+Shift+V | ⌘ + ⇧ + V | Align the selected text to the bottom vertically.| |Ctrl+G or Ctrl+Shift+G | ⌘ + G or ⌘ + ⇧ + G | Group selected shapes together, treating them as a single shape.| |Ctrl+Shift+U | ⌘ + ⇧ + U | Ungroup shapes within a previously grouped selection.| -|Ctrl+Shift+F | ⌘ + ⇧ + F | Bring the selected shape forward in the stacking order.| -|Ctrl+Shift+B | ⌘ + ⇧ + B| Send the selected shape backward in the stacking order.| +|Ctrl+Shift+F | ⌘ + ⇧ + F | Bring the selected element forward in the stacking order.| +|Ctrl+Shift+B | ⌘ + ⇧ + B| Send the selected element backward in the stacking order.| |Ctrl+] | ⌘ + ] | Move the selected node, connector, and group over the nearest overlapping node, connector, or group.| |Ctrl+[ | ⌘ + [ | Move the selected node, connector, and group behind the underlying node, connector, or group.| |Ctrl+L | ⌘ + L | Rotate the selected nodes counterclockwise.| @@ -159,9 +159,9 @@ N> You can download a complete working sample for keyboard navigation from [GitH ## How to Ensure Accessibility -The Blazor diagram component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Diagram component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. -The accessibility compliance of the Blazor diagram component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/diagram) in a new window to evaluate the accessibility of the Blazor diagram component with accessibility tools. +The accessibility compliance of the Blazor Diagram component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/diagram) in a new window to evaluate its accessibility of the Blazor diagram component with accessibility tools. ## See also diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 5927de5974..24f1c833d6 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to customize the appearance of annotation in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## How to Customize Annotation Size -The diagram allows you to set size for annotations by using the Height and Width properties. The default value of the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) properties is 0, and it takes the node or connector size as default. The following code example shows how the annotation size is customized. +The annotation size can be customized using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) properties. By default, the `Width` and `Height` properties are **0**, which means the annotation inherits the size of its parent node or connector. The following code example demonstrates how to customize the annotation size. ```cshtml @using Syncfusion.Blazor.Diagram @@ -44,13 +44,15 @@ The diagram allows you to set size for annotations by using the Height and Width } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXByCtXxVTAfPZsm?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/Appearance/SizeOfAnnotation) ![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png) -## How to Add Hyper Link to Annotation +## How to Add a Hyperlink to an Annotation -The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) to the node's or connector's annotation. It can also be customized. +A [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) can be added to the node's or connector's annotation. It can also be customized. ```cshtml @using Syncfusion.Blazor.Diagram @@ -90,11 +92,15 @@ The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBIWtDRBTaSnpxq?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/Appearance/HyperlinktoAnnotation) ![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png) -### How to Display Text in Annotation Hyper Links +### How to Display Text in Annotation Hyperlinks + +The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the `Hyperlink` can be set to display custom text for the link. ```cshtml @using Syncfusion.Blazor.Diagram @@ -135,13 +141,15 @@ 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/Annotations/Appearance/HyperlinkWithContent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMXNRrIZKmISV?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/Appearance/HyperlinkWithContent) ![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png) ## How to Wrap Text Using Text Wrapping -The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation defines how the text should be wrapped. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node. +The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation's style defines the wrapping behavior for its text content. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,7 +190,9 @@ The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextWrapping) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthoiXDdVIsShZlW?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/Appearance/AnnotationWithTextWrapping) | TextWrapping | Description | Image | | -------- | -------- | -------- | @@ -192,13 +202,13 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Control Text Overflow -The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow property can have the following values. +The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The `TextOverflow` property can have the following values. -* **Wrap**: Wraps the text to next line, when it exceeds its bounds. -* **Ellipsis**: It truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. -* **Clip**: Clips the text, and the overflow text will not be shown. +* **Wrap**: Wraps the text to the next line when it exceeds its bounds. +* **Ellipsis**: Truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. +* **Clip**: Clips the text, and the overflowed text will not be visible. -The following code sample shows how the different types of overflow property working for the different types of text wrapping. +The following code sample demonstrates how the `TextOverflow` property works with different `TextWrapping` settings. ```cshtml @using Syncfusion.Blazor.Diagram @@ -240,7 +250,9 @@ The following code sample shows how the different types of overflow property wor } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVoCXtHLSBncEEM?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/Appearance/AnnotationWithTextOverflow) | TextOverflow | Wrapping | Image | | -------- | -------- | -------- | @@ -254,19 +266,21 @@ You can download a complete working sample from [GitHub](https://github.com/Sync | Clip| Wrap | ![Blazor Diagram With Text Wrap in TextClipOverflow](../images/blazor-diagram-flowclip-wrap.png) | | Clip | WrapWithOverflow | ![Blazor Diagram Text Wrap with Overflow in TextClipOverflow](../images/blazor-diagram-flowclip-wrapwithoverflow.png) | -N>**Note :** All the customization over the overflow is also applicable to connector’s annotation. +N>**Note :** All overflow customizations are also applicable to connector annotations. ## How to Customize the Appearance of an Annotation -You can change the font style of the annotations with the font specific properties such as FontSize, FontFamily, and Color. The following code explains how to customize the appearance of the annotation. +The appearance of an annotation can be customized using various style properties. + +* The text style can be modified using properties like [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration). -* The annotation’s [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration) properties are used to style the annotation’s text. +* The annotation's background and border color can be defined with the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties. -* The annotation’s [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties are used to define the background color and border color of the annotation and the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property is used to define the transparency of the annotations. +* The transparency of the annotation is controlled by the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property. * The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Visibility) property of the annotation enables or disables the visibility of annotation. -The Fill, Border, and Opacity appearances of the text can also be customized with appearance specific properties of the annotation. The following code explains how to customize the appearance of the annotation. +The following code explains how to customize the visual appearance of an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -312,13 +326,15 @@ The Fill, Border, and Opacity appearances of the text can also be customized wit } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBSMtXHByUvlGFt?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/Appearance/Appearance) ![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png) ## How to Update Annotation Font Style at Runtime -You can change the font style of the annotations with the font specific properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code explains how to update the font style of the annotation. +The font style of annotations can be changed dynamically at runtime by modifying properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code demonstrates how to update the font style of the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -380,22 +396,24 @@ You can change the font style of the annotations with the font specific properti } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLSMXXHLypEIAGt?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/Appearance/AnnotationStyleatRunTime) ## How to Edit Annotations at Runtime -The diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, the annotation is in view mode. However, it can be brought into edit mode in two ways. +Annotations can be edited at runtime either programmatically or interactively. By default, annotations are in view mode. Edit mode can be enabled in the following ways: -* You can edit the annotation programmatically by using the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method. -* Also, you can edit the annotation interactively. -* By double-clicking the annotation. -* By selecting the item and pressing the F2 key. +* Programmatically: Invoke the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method of the diagram component. +* Interactively: + * Double-click the annotation. + * Select the parent and press the F2 or enter key. -Double-clicking any annotation will enable the editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated. +Double-clicking an annotation enables edit mode. For a object with multiple annotations, double-clicking the object itself will start the edit for the first annotation in its collection. When the focus of editor is lost, the annotation content is updated. -## How to Set Read Only Mode for Annotations +## How to Set Read-Only Mode for Annotations -The diagram allows you to create read-only annotations. You have to set the read-only property of annotation to enable or disable the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints. The following code explains how to enable read-only mode. +Annotations can be set to read-only mode by configuring their [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints). Setting the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints prevents user interaction and modification. The following code explains how to enable read-only mode. ```cshtml @using Syncfusion.Blazor.Diagram @@ -432,11 +450,13 @@ The diagram allows you to create read-only annotations. You have to set the read } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrIWjtxBeoSmkMG?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/Appearance/ReaonlyConstraints) ## How to Create Multiple Annotations -You can add any number of annotations to a node or connector. The following code example shows how to add multiple annotations to a node. +Multiple annotations can be added to a single node or connector. The following code example shows how to add multiple annotations to both a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -513,20 +533,22 @@ You can add any number of annotations to a node or connector. The following code } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLoMZtHrSEKMWRQ?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/Appearance/MultipleAnnotation) ![Blazor Diagram with Multiple Annotations](../images/blazor-diagram-multiple-annotations.png) N>* Type of the annotation’s property of the node or connector is ObservableCollection. -
    * Default value of the annotation will be null. -
    * All the same customization can be applicable for the annotations. -
    * Text Editing can be started only the first annotation of the annotation collection when you double click the node or connector. +
    * Default value of the annotation will be **null**. +
    * All customization options are applicable to each annotation in the collection. +
    * When double-clicking a node or connector, text editing is initiated only for the first annotation in the collection. ## How to Control Annotation Constraints -[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of the annotation. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled with bitwise operators. +[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of an annotation. Constraints are provided as flag enumerations, allowing multiple behaviors to be combined using bitwise operators. -AnnotationConstraints may have multiple behaviors as follows: +`AnnotationConstraints` may have multiple behaviors as follows: | Constraints | Usages | |---|---| @@ -534,14 +556,15 @@ AnnotationConstraints may have multiple behaviors as follows: | [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_None) | Disables all behaviors of Annotation. | |[InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) |Enables or disables to inherit the ReadOnly option from the parent object.| -N> The default value is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) for constraints property of the annotation. +N> The default value for an annotation's Constraints property is **InheritReadOnly**. -Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn about how to enable or disable the annotation constraints. +Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn more about how to enable or disable the annotation constraints. ## How to Define Templates in Annotations -The Diagram provides support for templates in annotations. You can define HTML content at the tag level and specify the use of a template using the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you need to define separate templates for each annotation, you can differentiate them by using the ID property. -The following code illustrates how to define a template for a node's annotation. Similarly, you can define templates for connectors. +The Diagram component supports templating for annotations. HTML content can be defined within the `DiagramTemplates` tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to **true**. To define separate templates for individual annotations, use the `ID` property to differentiate them. + +The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -635,14 +658,16 @@ The following code illustrates how to define a template for a node's annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVoMDtHVnZBKrQG?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/TemplateSupportforAnnotation) ![Blazor Diagram with Template Annotations](../images/TemplateSupportforAnnotation.png) ## How to Add Additional Information for an Annotation -The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that you may need to access programmatically. +The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that need to be accessed programmatically. -The following code shows how to set the AdditionalInfo value. +The following code demonstrates how to set a value for the `AdditionalInfo` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -683,17 +708,19 @@ The following code shows how to set the AdditionalInfo value. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtreCDDHBnjOUXBB?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/AdditionalInfoProperty) -**Note:** You can set any type of value for the AdditionalInfo property. +**Note:** The `AdditionalInfo` property can accept any type of object as its value. ## See also * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [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) \ No newline at end of file diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 8dfeafc11e..a974684ff0 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Connector Annotation Position in Blazor Diagram | Syncfusion -description: Checkout and learn here all about Annotation for Connector in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to position and align annotations on connectors in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Connector Annotation Position in Blazor Diagram -Annotations of a connector can be positioned using the following properties of Annotation class. +Connector annotations can be precisely positioned using several properties of the `PathAnnotation` class, including: * Offset * Alignment @@ -21,7 +21,7 @@ Annotations of a connector can be positioned using the following properties of A ## How to Update Offset Position for Annotations -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. A value of 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.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property positions an annotation along the length of the connector segment. It accepts a fractional value from **0** to **1**, where **0** represents the beginning of the segment, **1** represents the end, and **0.5** represents the center. ```cshtml @using Syncfusion.Blazor.Diagram @@ -68,19 +68,21 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSsDtHrxzCiyfQ?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/AnnotationOfConnector/UpdateOffsetofAnnotation) The following image shows the relationship between the annotation position and offset (fraction values). ![Displaying Annotation based on Offset in Blazor Diagram](../images/blazor-diagram-annotation-basedon-offset.png) >**Note:** -> * By default, offset value of the connector annotation is 0.5. -> * Connector annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. +> * By default, the `offset` value of a connector annotation is 0.5. +> * An annotation's ID must not start with a number or special character and must not contain underscores(_) or spaces. ## How to Change Annotation Alignment -The connector’s annotation can be aligned over its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property of the annotation. +The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property aligns an annotation relative to the connector's path. ```cshtml @using Syncfusion.Blazor.Diagram @@ -121,7 +123,9 @@ The connector’s annotation can be aligned over its segment path using the [Ali } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIWNNdhRHwmmwP?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/AnnotationOfConnector/AlignmentOfAnnotation) The following screenshot shows how the annotation of the connector aligned over its path. @@ -131,7 +135,7 @@ N> By default, Alignment value of the connector annotation is `Center`. ## How to Change Annotation Displacement -The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in centered on the connector path. When you assign a value to the Displacement property, the annotation will be displaced from its position by displacement value. +The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property moves an annotation from its default position along the connector path. By default, annotation will be in centered on the connector path. It accepts a DiagramPoint object that specifies the horizontal (X) and vertical (Y) distance to move the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -171,7 +175,9 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhSiDjdhHmyHgYP?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/AnnotationOfConnector/DisplacementOfAnnotation) ## How to Update Annotation Segment Angle @@ -213,20 +219,22 @@ The following code example shows how the connector annotation rotated in its pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLIWtDnBRPnqaBj?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/AnnotationOfConnector/SegmentAngleOfAnnotation) | SegmentAngle | Output | |---|---| | True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) | | False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) | -N> By default, the SegmentAngle will be disabled. +N> By default, the `SegmentAngle` property is **false**. The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation). ## See also -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index 0346bf033b..a4a6bd9347 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to use annotation events in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Annotation Events in Blazor Diagram Component -## How to Handle Text Change event +## How to Handle Text Change Event * While editing a node's or connector's annotation, the following event can be used to do the customization. * When a node's or connector's annotation is changed in the diagram, this event is getting triggered. |Event Name|Arguments|Description| |------------|-----------|------------------------| -|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers when the node’s/connector's label is changed in the diagram.| -|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's label is changing in the diagram.| +|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers after a node or connector's annotation text has been changed in the diagram.| +|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's annotation text is changing in the diagram.| -The following code example shows how to register and get notifications from the TextChanged and TextChanging events. +The following code example shows how to register and get notifications from the `TextChanged` and `TextChanging` events. ```cshtml @using Syncfusion.Blazor.Diagram @@ -61,7 +61,9 @@ The following code example shows how to register and get notifications from the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoijjnBnkUtSTH?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/Events/TextChangedEvent) ## See also @@ -69,6 +71,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the annotation](./appearance) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 2beddf9b66..819909b43a 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to interact with annotations in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -12,7 +12,7 @@ documentation: ug Diagram provides the support to the annotations rotation interactively. ## How to Rotate Annotations -The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure RotationReference for an annotation. +The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure `RotationReference` for an annotation. ```cshtml @@ -67,21 +67,21 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVesNXxpShYJhRa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} Value | Description | Image | | -------- | -------- | -------- | -| Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | -| Parent | In this case, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | +| **Page** | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | +| **Parent** | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) ## How to rotate a Annotation using the RotationAngle property -The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property for an annotation gets or sets the rotation angle in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0. +The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is **0**. -The following code examples illustrate how to configure RotationAngle for an annotation. +The following code examples illustrate how to configure `RotationAngle` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -112,7 +112,9 @@ The following code examples illustrate how to configure RotationAngle for an ann } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIiZDRTogIAqku?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/RotationAngleProperty) ![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png) @@ -120,8 +122,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [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 ) \ No newline at end of file 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/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 90f46e74d6..711045f60f 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Node Annotation Position in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about annotation for node in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to position annotations on nodes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,9 @@ documentation: ug # Node Annotation Position in Blazor Diagram Component -The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. +The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has margin, offset, horizontal, and vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. + + Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. * Offset * HorizontalAlignment @@ -18,9 +20,9 @@ The diagram allows you to customize the position and appearance of the annotatio ## How to Change Annotation Offset Position -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations 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.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. It is defined by a `DiagramPoint` where the X and Y values are fractions of the node's width and height, respectively. A value of **0** represents the top or left edge, **1** represents the bottom or right edge, and **0.5** represents the center. -The following code shows the relationship between the shape annotation position and the path annotation offset (fraction values). +The following code demonstrates how to set an annotation's `Offset`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -56,7 +58,9 @@ The following code shows the relationship between the shape annotation position } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeiZDnBmmdikgL?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/AnnotationOfNode/OffsetofAnnotation) | Offset values | Output | @@ -81,7 +85,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_HorizontalAlignment) property of an annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_VerticalAlignment) property is used to set how the annotation is vertically aligned at the annotation position. -The following table shows all the possible alignments visually with 'offset (0, 0)'. +The following table shows all the possible alignments visually with an 'offset of (0, 0)'. | Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | | -------- | -------- | -------- | @@ -95,7 +99,7 @@ The following table shows all the possible alignments visually with 'offset (0, | Center | Bottom | ![Blazor Diagram Label in Center Bottom Position](../images/blazor-diagram-label-in-centerbottom-position.png) | | Right |Bottom |![Blazor Diagram Label in Right Bottom Position](../images/blazor-diagram-label-in-rightbottom-position.png) | -The following code explains how to align annotations. +The following code demonstrates how to align an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -133,7 +137,9 @@ The following code explains how to align annotations. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDByMjDHhGlBwFTP?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/AnnotationOfNode/AlignmentOfAnnotation) N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Center) by default. @@ -142,7 +148,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c ## How to Change Annotation Margin -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) is an absolute value used to add some blank space to any one of its four sides. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. +The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) property adds space around the annotation. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its `Offset`, `HorizontalAlignment`, `VerticalAlignment`, and `Margin` values. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,12 +188,14 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjDnBcbmFJCD?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/AnnotationOfNode/MarginOfAnnotation) ## How to Align the Text -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. +The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set `TextAlign` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -227,12 +235,13 @@ The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhSWDjdVvthJdOl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) ## See also -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index bec15c2b7b..499069bb25 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,20 +1,20 @@ --- layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion +title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Blazor Diagram Component +# BPMN Activity in Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. There are two types of activities. They are listed as follows: * [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task): It occurs within a process and is not broken down to a finer level of detail. -* [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. +* [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. You can specify the any one of the above activity type using the [ActivityType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_ActivityType) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). @@ -115,7 +115,7 @@ The various types of BPMN tasks are tabulated as follows. ## How to Create a BPMN Activity Collapsed Sub-Process -A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). +A [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). ```cshtml @using Syncfusion.Blazor.Diagram @@ -159,7 +159,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). +[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is **None**. You can define the `Loop` property in BPMN Activity, as shown in the following code. @@ -259,7 +259,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Enable Call -A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) activity is a global sub-process that is reused at various points of the business flow. To create a Call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). +A Call activity is a global sub-process that is reused at various points of the business flow. To create a call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property is false.
    * This Property is only applicable for [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task) Type Activity. @@ -307,7 +307,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Enable Ad-Hoc -An ad-hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). +An Ad-Hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property is false.
    * This Property is only applicable for [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) Type Activity. diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index ecb451a1da..b4dc525754 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,29 +1,31 @@ --- layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion +title: BPMN Connectors in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Connectors in Blazor Diagram Component +# BPMN Connectors in Diagram Component The `BPMN Connectors` are lines that connect BPMN flow objects. -They are classified as follows. +They are primarily classified into three categories: * Association * Sequence * Message -## How to Create a Association +## How to Create an Association -The `BPMN Association` flow is used to link flow objects with their corresponding text or artifact. An association is represented as a dotted graphical line with an opened arrow. -To create an Association, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [AssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_AssociationFlow). The types of association are as follows: +An BPMN `AssociationFlow` is used to link flow objects with their corresponding text or artifact. It is represented as a dotted graphical line with an opened arrow. +To create an association, set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the association types. -* DirectionalAssociationFlow: Represented as a dotted graphical line with one side arrow. -* BiDirectionalAssociationFlow: Represented as a dotted graphical line with double side arrow. -* AssociationFlow: An Association is represented as a dotted graphical line with an opened arrow. +The available association types are: + +* **DirectionalAssociationFlow**: A dotted graphical line with one side arrow. +* **BiDirectionalAssociationFlow**: A dotted graphical line with double side arrow. +* **AssociationFlow**: A dotted graphical line with an opened arrow. The following code example explains how to create an association. @@ -58,7 +60,9 @@ The following code example explains how to create an association. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBeitNHVuzaWWAu?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/BpmnEditor/BpmnConnectors/Association) ![Default BPMN FlowShapes](../images/Bpmn-AssociationFlow.png) @@ -72,11 +76,13 @@ The following table shows the visual representation of association flows. ## How to Create a Sequence -A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow, [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [SequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_SequenceFlow). The types of sequence are as follows: +A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow,set the `Flow` property of the `BpmnFlowShape` shape to one of the sequence types. + +The available sequence types are: -* SequenceFlow: Sequence flows represent the typical path between the two flow objects. -* ConditionalSequenceFlow: Conditional sequence flows are used to control the flow of a process based on certain conditions. -* DefaultSequenceFlow: Default sequence flows are represented by an arrow with a tic mark on one end. +* **SequenceFlow**: Sequence flows represent the typical path between the two flow objects. +* **ConditionalSequenceFlow**: Conditional sequence flows are used to control the flow of a process based on certain conditions. +* **DefaultSequenceFlow**: Default sequence flows are represented by an arrow with a tic mark on one end. The following code example explains how to create a sequence flow. @@ -111,11 +117,13 @@ The following code example explains how to create a sequence flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIsDjHBuSBuntI?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/BpmnEditor/BpmnConnectors/Sequence) ![Normal Sequence BPMN Shape](../images/Bpmn-SequenceFlow.png) -The following table contains various representation of sequence flows. +The following table shows the different representations of sequence flows. | Sequence | Image | | -------- | -------- | @@ -127,11 +135,13 @@ N> The default value for the property `Sequence` is **Normal.** ## How to Create a Message -`Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [MessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_MessageFlow). The types of message flows are as follows: +A `Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the `Flow` property of the `BpmnFlowShape` should be set to one of the message types. + +The available message flow types are: -* InitiatingMessageFlow: An activity or event in one pool can initiate a message to another pool. -* NonInitiatingMessageFlow: An activity or event in one pool cannot initiate a message to another pool. -* MessageFlow: A MessageFlow shows the flow of messages between two participants and is represented by line. +* **InitiatingMessageFlow**: An activity or event in one pool can initiate a message to another pool. +* **NonInitiatingMessageFlow**: An activity or event in one pool cannot initiate a message to another pool. +* **MessageFlow**: A MessageFlow shows the flow of messages between two participants and is represented by line. The following code example explains how to define a message flow. @@ -166,11 +176,13 @@ The following code example explains how to define a message flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVSittnhOeEgbiL?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/BpmnEditor/BpmnConnectors/Message) ![Default Message BPMN Shape](../images/Bpmn-MessageFlow.png) -The following table contains various representation of message flows. +The following table shows the different representations of message flows. | Message | Image | | -------- | -------- | @@ -178,4 +190,4 @@ The following table contains various representation of message flows. | [InitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_InitiatingMessageFlow) | ![InitiatingMessage Message BPMN Shape](../images/Bpmn-NonInitiatingMessageFlow.png) | | [NonInitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_NonInitiatingMessageFlow) | ![NonInitiatingMessage Message BPMN Shape](../images/Bpmn-InitiatingMessageFlow.png) | -N> The default value for the property `Flow` is **SequenceFlow.** +N> The default value for the property `Flow` property of a `BpmnFlow` shape is **SequenceFlow.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index fc0e34822e..c57cb5258f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,15 +1,15 @@ --- layout: post -title: BPMN Data Object in Blazor Diagram Component | Syncfusion +title: BPMN Data Object in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Data Object in Blazor Diagram Component +# BPMN Data Object in Diagram Component -A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** +A [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as `BpmnDataObject`, and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of `BpmnDataObject` as **True.** ```cshtml @using Syncfusion.Blazor.Diagram @@ -46,11 +46,13 @@ A data object represents information flowing through the process, such as data p } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBeiXjxVORwXwCi?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/BpmnEditor/BpmnDataObject/BpmnDataObject) ![ Data BPMN Shape](../images/Bpmn-DataObject-Collective-None.png) -The following table contains various representation of the BPMN data object. +The following table describes the different types of BPMN Data Objects. | DataObjectType | Symbol |IsCollectiveData| Description| | -------- | -------- |-------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 459dc80831..514f4a688f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Store in Blazor Diagram Component -A DataStore is used to store or access data associated with a business process. To create a dataStore, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to [BpmnDataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataStore.html). The following code example explains how to create a data source. +A data store is used to store or access data associated with a business process. To create a data store shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to **BpmnDataStore**. The following code example explains how to create a data store. ```cshtml @using Syncfusion.Blazor.Diagram @@ -42,6 +42,8 @@ A DataStore is used to store or access data associated with a business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNryCNtxhaGiAiQN?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/BpmnEditor/BpmnDataStore/BpmnDataStore) ![BPMN Datasource](../images/Bpmn-DataStore.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 5d5212d551..b0a094e042 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,19 +1,19 @@ --- layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion +title: BPMN Event in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Event in Blazor Diagram Component +# BPMN Event in Diagram Component An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: -* Start - Indicates the beginning of the process and every business process start with an event. -* Intermediate - Indicates the middle of the process. -* End - Indicates the end of the process, and every business process ends with an event. +* **Start** - Indicates the beginning of the process and every business process start with an event. +* **Intermediate** - Indicates the middle of the process. +* **End** - Indicates the end of the process, and every business process ends with an event. The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_EventType) property of the node allows you to define the type of the event. The default value of the event is [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEventType.html#Syncfusion_Blazor_Diagram_BpmnEventType_Start). The following code example explains how to create a BPMN event. @@ -52,7 +52,9 @@ The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLoWZZdracaAiTe?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/BpmnEditor/BpmnEvent/BpmnEventType) ![None Trigger End event event BPMNShape](../images/Bpmn-Event-End.png) @@ -97,7 +99,9 @@ Event triggers are notated as icons inside the circle and they represent the spe } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtresttdBOFpnepH?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/BpmnEditor/BpmnEvent/BpmnEventType) ![Message Trigger Start Event BPMN Shape](../images/Bpmn-Event-Message-Start.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 99fb043502..40ffc61c14 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -9,10 +9,10 @@ documentation: ug # BPMN Expanded Sub-Process in Blazor Diagram Component -An ExpandedSubProcess is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. +An `BpmnExpandedSubProcess` is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. -## How to Create BPMN Expanded Sub-Process -To create a ExpandedSubProcess, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable allow drop property of the node. +## How to Create an Expanded Sub-Process +To create an Expanded Sub-Process, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable `AllowDrop` constraint of the node. The following code example explains how to create a BPMN Expanded Sub-Process. @@ -47,14 +47,17 @@ The following code example explains how to create a BPMN Expanded Sub-Process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLIiXXdLYuCAIfE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![BPMN Expanded Sub-Process](../images/Bpmn-ExpandedSubProcess.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) -## How to Add BPMN Nodes into BPMN Expanded Sub-Process -To add a BpmnNode into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +![BPMN Expanded Sub-Process shape in Blazor Diagram.](../images/Bpmn-ExpandedSubProcess.png) -The following code example explains how to add a BPMN node to a BPMN Expanded Sub-Process using `Children` property. +## How to Add BPMN Nodes into a BPMN Expanded Sub-Process + +To add a BPMN node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BPMN node object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. + +The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -97,7 +100,9 @@ The following code example explains how to add a BPMN node to a BPMN Expanded Su } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBoitNxAtXgsIWc?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/BpmnEditor/BpmnExpandedSubProcess/AddChildren) ![ExpandedSubProcess BPMN Shape](../images/Bpmn-ExpandedSubProcess-WithChildren.png) @@ -116,7 +121,8 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), as shown in the following code. + The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the `BpmnExpandedSubProcess` component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to **None**. + The `Loop` property can be configured within the `BpmnExpandedSubProcess` component, as demonstrated in the following example. ```cshtml @using Syncfusion.Blazor.Diagram @@ -152,11 +158,13 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSCXtnAjCCJzPT?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/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) ![Standard ExpandedSubProcess BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) -The following table contains various types of BPMN loops. +The following table describes the available loop types for an Expanded Sub-Process. | LoopActivity | Task | Description| @@ -168,7 +176,7 @@ The following table contains various types of BPMN loops. ### How to Enable Compensation -[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is triggered when the operation is partially failed and can be enabled with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) property of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is set to false. +[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is triggered when the operation is partially failed and can be enabled with the `IsCompensation` property of the `BpmnExpandedSubProcess`. By default, the `IsCompensation` is set to **false**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -200,18 +208,20 @@ The following table contains various types of BPMN loops. IsCompensation = true, } }; - nodes.Add(node1); + nodes.Add(node); } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBystZxqXilLbOk?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/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) ![IsCompensationActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-Task-Compensation.png) ### How to Enable Ad-Hoc -An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +An Ad-Hoc Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of `BpmnExpandedSubProcess`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -247,14 +257,16 @@ An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBSsXjnKTCBmLLc?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/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) ![IsAdHocActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-ExpandedSub-Process-Adhoc.png) ### How to Set Sub-Process Type -SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) represents the type of task being processed within a BPMN expanded subprocess. The `SubProcessType` property of the `BpmnExpandedSubProcess` component allows specification of the subprocess type. By default, it is set to **Default**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -290,11 +302,13 @@ SubProcessType represents the type of task that is being processed. The [SubProc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVoCZjRAziQIRel?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/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) -The following table contains various types of BPMN SubProcess. +The following table describes the available sub-process types. | SubProcessType | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 9c08db8259..9c6867d3a1 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,15 +1,15 @@ --- layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion +title: BPMN Gateway in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Gateway in Blazor Diagram Component +# BPMN Gateway in Diagram Component -A Gateway is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. +A [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the `BpmnGateway` can be set with any of the appropriate gateways. By default, the value of `GatewayType` is `None`. The following code example explains how to create a `BPMNGateway`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -45,14 +45,16 @@ A Gateway is used to control the flow of a process and it is represented in diam } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIWZtdKJhVMLXv?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/BpmnEditor/BpmnGateway/BpmnGateway) ![GateWay BPMN Shape](../images/bpmn-gataway-none.png) N> By default, the `GatewayType` will be set to **None.** -There are several types of gateways as follows: +The following table describes the available gateway types. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index 3fb0b35515..bcfb0455f4 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,17 +1,17 @@ --- layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion +title: BPMN Shapes in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Shapes in Blazor Diagram Component +# BPMN Shapes in Diagram Component BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. -The following code example explains how to create a simple business process. +The following code example demonstrates how to create a simple BPMN Task shape. ```cshtml @using Syncfusion.Blazor.Diagram @@ -47,14 +47,16 @@ The following code example explains how to create a simple business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIMZDRqphwEgmr?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/BpmnEditor/BpmnShape/BpmnShape) >**Note:** Node's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. ![Activity Shape](../images/Task.png) -The list of supported BPMN shapes are as follows: +The following table describes the available BPMN shapes. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 954f284ffb..05ab547859 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,25 +1,25 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Diagram | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Text Annotation in Blazor Diagram Component +# BPMN Text Annotation in Diagram Component * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. -* A TextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. +* A [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the `BPMNTextAnnotation`. When a target shape is moved, copied, or deleted, any `BPMNTextAnnotation` attached to the shape will be moved, copied, or deleted too. Thus, the `BPMNTextAnnotation` remain with their target shapes though you can reposition the `BPMNTextAnnotation` to any offset from its target. The `TextAnnotationTarget` property of the `BpmnTextAnnotation` is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. -* By default, the TextAnnotation shape has a connection. +* By default, the `BPMNTextAnnotation` shape has a connection. * The [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) property is used to set the shape direction of the text annotation. -* By default, the [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) is set to a [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left). +* By default, the `TextAnnotationDirection` is set to a **Left**. * To set the size for text annotation, use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Height) properties of the node. @@ -68,7 +68,9 @@ documentation: ug } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrIsXNxgTgIKWVj?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/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) ![Auto BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png) @@ -134,18 +136,21 @@ The following code example represents how to create a TextAnnotation and connect } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIWNXnKpTiBXyn?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/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) -## How to Connect a Text Annotation to a BPMN Node +## How to Connect a BPMN Text Annotation to a BPMN Node + Drag and drop any bpmn shapes from the palette to the diagram and connect the BPMN Node and TextAnnotation. The following image shows how to drag a symbol from the palette and connect the TextAnnotation to the BPMNNode with interaction. ![Auto BPMN Shape](../images/Bpmn-TextAnnotationTarget-Connect.gif) -There are several types of Text annotation directions as follows: +The following table describes the available Text annotation directions | Direction | Image | | -------- | -------- | diff --git a/blazor/diagram/commands.md b/blazor/diagram/commands.md index 807e5e3104..66242dd9e4 100644 --- a/blazor/diagram/commands.md +++ b/blazor/diagram/commands.md @@ -1,13 +1,13 @@ --- layout: post -title: Commands in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Commands in Syncfusion Blazor Diagram component and much more details. +title: Commands in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about diagram Commands in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Commands in Blazor Diagram Component +# Commands in Diagram Component There are several commands available in the diagram as follows. @@ -22,11 +22,11 @@ There are several commands available in the diagram as follows. ## Alignment Commands -Alignment commands enable you to align the selected or defined objects, such as nodes and connectors with respect to the selection boundary. The following are the [AlignmentOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AlignmentOptions.html) available in the [SetAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetAlign_Syncfusion_Blazor_Diagram_AlignmentOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__Syncfusion_Blazor_Diagram_AlignmentMode_) commands, which shows how to use align methods in the diagram. +Alignment commands align selected or defined objects, such as nodes and connectors with respect to the selection boundary. The [SetAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetAlign_Syncfusion_Blazor_Diagram_AlignmentOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__Syncfusion_Blazor_Diagram_AlignmentMode_) method accepts an [AlignmentOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AlignmentOptions.html) value to specify the desired alignment. ### How to Align the Selected Objects to the Left -The following code example illustrates how to align all the selected objects to the left side of the selection boundary. +The following example shows how to align selected objects. ```cshtml @using Syncfusion.Blazor.Diagram @@ -84,7 +84,9 @@ The following code example illustrates how to align all the selected objects to } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignLeft) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVyCDjwJCfOjpco?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/Commands/AlignLeft) ### How to Align the Selected Objects to the Right The following code example illustrates how to align all the selected objects at the right side of the selection boundary. @@ -145,7 +147,9 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignRight) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLysZZGJMcwqXVL?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/Commands/AlignRight) ### How to Align the Selected Objects to the Top The following code example illustrates how to align all the selected objects at the top of the selection boundary. @@ -206,7 +210,9 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignTop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhICDDQJCbChApg?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/Commands/AlignTop) ### How to Align the Selected Objects to the Bottom The following code example illustrates how to align all the selected objects at the bottom of the selection boundary. @@ -267,7 +273,9 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignBottom) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhSsXtczMFIBzzh?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/Commands/AlignBottom) ### How to Align the Selected Objects to the Middle The following code example illustrates how to align all the selected objects at the middle of the selection boundary. @@ -328,7 +336,9 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignMiddle) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSMtXGTLXtRoWh?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/Commands/AlignMiddle) ### How to Align the Selected Objects to the Center The following code example illustrates how to align all the selected objects at the center of the selection boundary. @@ -389,10 +399,12 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignCenter) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLyCNDwJrjONeSo?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/Commands/AlignCenter) ## How to Distribute Diagram Elements -The [SetDistribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetDistribute_Syncfusion_Blazor_Diagram_DistributeOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) commands enable you to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. +The [SetDistribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetDistribute_Syncfusion_Blazor_Diagram_DistributeOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) commands enable place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. The factors to distribute the shapes using [DistributeOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html) are listed as follows: @@ -511,7 +523,9 @@ The following code example illustrates how to execute the space commands. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/SetDistributeCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthyWtZcphWwlvSN?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/Commands/SetDistributeCommands) ## How to Use Sizing Commands Sizing [SetSameSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetSameSize_Syncfusion_Blazor_Diagram_SizingMode_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) commands are used to resize all selected object based on the width, height, and size of the reference object (FirstSelectedItem). @@ -597,10 +611,12 @@ The following code example illustrates how to execute the size commands. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/SizingCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhesNXwJrBISiKH?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/Commands/SizingCommands) ## How to Use Clipboard Commands -Clipboard commands are used to cut, copy, or paste the selected elements. +Clipboard commands are used to cut, copy, or paste selected elements. * Cuts the selected elements from the diagram to the diagram’s clipboard using the [Cut](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Cut) command. @@ -608,7 +624,7 @@ Clipboard commands are used to cut, copy, or paste the selected elements. * Pastes the diagram’s clipboard data (nodes/connectors) into the diagram. Also, when a collection of diagram elements is passed, the passed items will be pasted into the diagram. Otherwise, the cloned copy of elements from the internal clipboard is pasted using the [Paste](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Paste_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) command. -The following code illustrates how to execute the clipboard commands. +The following code illustrates the clipboard commands. ```cshtml @using Syncfusion.Blazor.Diagram @@ -685,7 +701,9 @@ The following code illustrates how to execute the clipboard commands. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ClipboardCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVyCNZwTrAtIRTn?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/Commands/ClipboardCommands) ## How to Use Grouping commands **Grouping commands** are used to group or ungroup the selected elements on the diagram. To group the elements, select the elements using the select all command and group the selected elements using the group command. @@ -694,7 +712,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync [Ungroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Ungroup) command is used to ungroup the selected nodes and connectors in the diagram. -The following code illustrates how to execute the grouping commands. +The following example demonstrates the grouping commands. ```cshtml @using Syncfusion.Blazor.Diagram @@ -758,10 +776,12 @@ The following code illustrates how to execute the grouping commands. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/GroupingCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLeiXtGpVAehaos?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/Commands/GroupingCommands) ## How to Arrange Diagram Elements Using Z-Order Commands -Z – Order commands are used to control the stacking order (Z-Order) of the diagram elements such as nodes, connectors, and groups. Also, you can arrange the selected objects on the diagram page with their Z-order values by using the Bring to front, Bring forward, Send to back, and Send backward features. +Z-Order commands are used to control the stacking order (Z-Order) of the diagram elements such as nodes, connectors, and groups. Also, arrange the selected objects on the diagram page with their Z-order values by using the Bring to front, Bring forward, Send to back, and Send backward features. ### How to Use the Bring To Front Commands @@ -823,7 +843,9 @@ The following code illustrates how to execute the BringToFront command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/BringToFront) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBSCDtwzBJNbsnd?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/Commands/Z-OrderCommands/BringToFront) ### How to Use the Send To Back Commands @@ -886,7 +908,9 @@ The following code illustrates how to execute the SendToBack command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/SendToBack) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhyMDDQJVzeveQe?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/Commands/Z-OrderCommands/SendToBack) ### How to Use the Bring Forward Commands @@ -948,7 +972,9 @@ The following code illustrates how to execute the BringForward command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/BringForward) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVICjZczBStjvIA?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/Commands/Z-OrderCommands/BringForward) ### How to Use the Send Backward Commands @@ -1010,7 +1036,9 @@ The following code illustrates how to execute the SendBackward command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/SendBackward) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyMtXwzrIwhhCQ?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/Commands/Z-OrderCommands/SendBackward) The following gif illustrates how to perform z-order commands. @@ -1018,7 +1046,7 @@ The following gif illustrates how to perform z-order commands. ## How to Use the Zoom command -The [Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Zoom_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) command is used to zoom in and zoom out the diagram view. +The [Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Zoom_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) command changes the magnification of the diagram. When a focus point is provided, zooming is performed relative to that point; otherwise, it is relative to the center of the current view. The following code illustrates how to zoom-in/zoom out the diagram. @@ -1061,11 +1089,13 @@ The following code illustrates how to zoom-in/zoom out the diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ZoomingCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLeCDZmpBRKjQLX?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/Commands/ZoomingCommands) ## How to Use the Nudge command -The [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nudge_Syncfusion_Blazor_Diagram_Direction_System_Nullable_System_Int32__) commands reposition the selected object by the specified delta in the given direction. +The [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nudge_Syncfusion_Blazor_Diagram_Direction_System_Nullable_System_Int32__) commands repositions selected objects by a specified delta in the given direction. [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html) nudge command moves the selected elements towards the specified direction by 1 pixel, by default. @@ -1096,7 +1126,9 @@ The following code illustrates how to execute nudge command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/NudgeCommand) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrICNNGfrnxaSPK?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/Commands/NudgeCommand) ## How to Nudge Elements with Arrow keys @@ -1110,8 +1142,8 @@ Nudge commands are particularly useful for accurate placement of elements. The [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Undo) and [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Redo) commands provide powerful functionality for managing changes in your diagram: -**Undo**: Allows you to revert the most recent action, stepping backwards through your editing history. -**Redo**: Enables you to restore previously undone actions, moving forward through your editing history. +**Undo**: Reverts the most recent action, stepping backwards through your editing history. +**Redo**: Re-applies the most recently undone action, moving forward through your editing history. These commands enhance user experience by offering flexibility in diagram editing, allowing for quick error correction and easy exploration of different design options. They are essential tools for efficient diagram creation and modification in Blazor applications. @@ -1142,12 +1174,14 @@ These commands enhance user experience by offering flexibility in diagram editin } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/UndoRedoCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBIsXjmpVcUdGmM?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/Commands/UndoRedoCommands) ## How to Bring the Specific Element into the Viewport of the Diagram -The [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoView_Syncfusion_Blazor_Diagram_DiagramRect_) command is a powerful feature that allows you to navigate and focus on a specific area of your diagram. It automatically adjusts the viewport to display a specified rectangular region, ensuring that the area of interest is visible to the user. +The [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoView_Syncfusion_Blazor_Diagram_DiagramRect_) command is a powerful feature that allows navigate and focus on a specific area of your diagram. It automatically adjusts the viewport to display a specified rectangular region, ensuring that the area of interest is visible to the user. ```cshtml @using Syncfusion.Blazor.Diagram @@ -1179,11 +1213,13 @@ protected override void OnInitialized() } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/BringInToView) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVSijDGzLGPnCmi?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/Commands/BringInToView) ## How to Bring the Specific Element into the Center of the Viewport of the Diagram -The [BringIntoCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoCenter_Syncfusion_Blazor_Diagram_DiagramRect_) command allows you to bring a specific rectangular region into the center of the diagram's viewport. This command is particularly useful for focusing on a particular area of interest within your diagram. +The [BringIntoCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoCenter_Syncfusion_Blazor_Diagram_DiagramRect_) command brings a specific rectangular region into the center of the diagram's viewport. This command is particularly useful for focusing on a particular area of interest within your diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -1215,11 +1251,13 @@ protected override void OnInitialized() } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/BringintoCenter) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLoMtXmfLFgyexg?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/Commands/BringintoCenter) ## How to Bring the Entire Diagram into the Current Viewport Using Fit to Page Command -The FitToPage command is used to bring the entire diagram (including large diagrams) into view. You can customize the behavior of the FitToPage command by passing a [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) object as a parameter. If no parameter is provided, the entire diagram is fit into the view using default settings. +The [FitToPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitMode.html) command is used to bring the entire diagram (including large diagrams) into view. Customize the behavior of the `FitToPage` command by passing a [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) object as a parameter. If no parameter is provided, the entire diagram is fit into the view using default settings. The following code illustrates how to execute the FitToPage method. @@ -1353,11 +1391,13 @@ The following code illustrates how to execute the FitToPage method. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/FittoPage) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLosXtmfLaNhXqr?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/Commands/FittoPage) #### FitToPage Parameters -The [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) parameter allows you to customize the behavior of the FitToPage command. By configuring various properties of the FitOptions object, you can control how the diagram is adjusted within the view. +The [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) parameter allows you to customize the behavior of the `FitToPage` command. By configuring various properties of the `FitOptions` object, Control how the diagram is adjusted within the view. #### FitToPage @@ -1377,12 +1417,12 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Dia |Values | Description | |------------|------------------| -|[PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRegion.html#Syncfusion_Blazor_Diagram_DiagramRegion_PageSettings) | It is used to perform the fit to page based on the width and height of the page | -|[Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRegion.html#Syncfusion_Blazor_Diagram_DiagramRegion_Content) | It is used to perform the fit to page for the content area only | +|[PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRegion.html#Syncfusion_Blazor_Diagram_DiagramRegion_PageSettings) | Fits the diagram based on the page settings' width and height. | +|[Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRegion.html#Syncfusion_Blazor_Diagram_DiagramRegion_Content) | Fits the diagram based on its content area only. | ![Region](./images/Region.gif) -## How to Enable Zoom in Behaviour +## How to Enable Zoom in Behavior The [CanZoomIn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html#Syncfusion_Blazor_Diagram_FitOptions_CanZoomIn) property controls whether the diagram can zoom in to fit smaller content into a larger viewport. When set to `true`, it allows zooming in, while `false` disables this feature. This is particularly useful for maintaining a minimum zoom level or preventing excessive magnification of small diagrams. @@ -1502,7 +1542,9 @@ The following code illustrates how to execute the CanZoomIn command. } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/CanZoomIn) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoMDXQThuHMAcI?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/Commands/CanZoomIn) ![CanZoomIn to bring the small diagram into view](images/CanZoomIn.png) @@ -1514,13 +1556,13 @@ The [CommandManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia ### How to Handle Command Execution -The [Execute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_Execute) event callback method is triggered when a custom command is executed in the diagram. This allows you to define specific actions to be performed when the command is invoked. +The [Execute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_Execute) event callback method is triggered when a custom command is executed in the diagram. This allows defining specific actions to be performed when the command is invoked. -The [CanExecute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_CanExecute) event evaluates whether the command can be executed in its current state. This event enables you to implement conditional logic to determine if the command should be available or disabled based on the diagram's current context. +The [CanExecute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_CanExecute) event evaluates whether the command can be executed in its current state. This event enabling you to conditionally enable or disable commands. ### How to Create Custom Command -To define a custom command, specify the following properties: +A custom command, specify the following properties: * [Gesture](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyboardCommand.html#Syncfusion_Blazor_Diagram_KeyboardCommand_Gesture): A combination of [Key](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyGesture.html#Syncfusion_Blazor_Diagram_KeyGesture_Key) and [Modifiers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyGesture.html#Syncfusion_Blazor_Diagram_KeyGesture_Modifiers). This defines the keyboard shortcut for the command. * [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyboardCommand.html#Syncfusion_Blazor_Diagram_KeyboardCommand_Name): A unique identifier for the command. Choose a descriptive name that clearly indicates the command's purpose. @@ -1621,7 +1663,9 @@ The following code example shows how to define a custom command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/CustomCommands/CustomCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrSMtjmJKNVzxBS?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/Commands/CustomCommands/CustomCommands) ### How to Modify the Existing Command @@ -1714,4 +1758,6 @@ The following code example shows how to disable a command and how to modify the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ModifyExistingCommands/ModifyExistingCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrIsXtwzKjPJVBi?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/Commands/ModifyExistingCommands/ModifyExistingCommands) diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md index e8fab3b86b..9597c75fa8 100644 --- a/blazor/diagram/constraints.md +++ b/blazor/diagram/constraints.md @@ -1,21 +1,21 @@ --- layout: post -title: Constraints in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Constraints in Syncfusion Blazor Diagram component and much more details. +title: Constraints in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about diagram Constraints in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Constraints in Blazor Diagram Component +# Constraints in Diagram Component -Constraints are used to enable or disable certain behaviors of the diagram, nodes, and connectors. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled using the Bitwise operators `(&, |, ~, <<, etc.)`. +Constraints are used to enable or disable specific behaviors of the diagram, nodes, and connectors. Constraints are provided as flagged enumerations, so multiple behaviors can be enabled or disabled using bitwise operators `(&, |, ~, <<, etc.)`. -To know more about Bitwise operators, refer to the [Bitwise Operations](constraints#bitwise-operations). +To learn more about bitwise operators, refer to [Bitwise Operations](constraints#bitwise-operations). ## How to Enable or Disable Diagram Constraints -[DiagramConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints) allow you to enable or disable the following behaviors. +[DiagramConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints) allow enabling or disabling the following behaviors: * PageEditable * Bridging @@ -41,7 +41,7 @@ To know more about Bitwise operators, refer to the [Bitwise Operations](constrai |[Routing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Routing)|Determines if automatic line routing is enabled or disabled for connectors. When enabled, lines are automatically routed to avoid overlapping with nodes and other obstacles.| |[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Default)|Enables or disables all constraints in diagram.| -The following example shows how to disable PageEditable constraint from default diagram constraints. +The following example shows how to disable the `PageEditable` constraint from the default diagram constraints. ```cshtml @using Syncfusion.Blazor.Diagram @@ -72,21 +72,22 @@ Constraints="@DiagramConstraints" /> } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLeWtDcpKCfcxTa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following example shows how to add Bridging constraint to the default constraints of diagram. +The following example shows how to add the Bridging constraint to the default constraints of the diagram. ```csharp DiagramConstraints DiagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; ``` -The diagram constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations) in the diagram. +Diagram constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations) in the diagram. ```csharp //Removing multiple constraints from default. DiagramConstraints DiagramConstraints = DiagramConstraints.Default & ~(DiagramConstraints.PageEditable|DiagramConstraints.Zoom); ``` -For more information about diagram constraints, refer to the [Diagram constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html). +For more information about diagram constraints, refer to [Diagram constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html). N> By default, the following constraints are enabled in the diagram,
    * ApiUpdate @@ -100,7 +101,7 @@ N> By default, the following constraints are enabled in the diagram, ## How to Enable or Disable Node Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) property of the Node allows you to enable or disable the following behaviors. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) property of the node enables or disables the following behaviors: * Select * Drag @@ -141,7 +142,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra |[RoutingObstacle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_RoutingObstacle)|Enables or disables the node to be treated as obstacle while in routing.| |[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Default)|Enables all default constraints for the node.| -The following example shows how to disable rotate constraint from the default node constraints. +The following example shows how to disable the `Rotate` constraint from the default node constraints. ```cshtml @using Syncfusion.Blazor.Diagram @@ -171,30 +172,32 @@ The following example shows how to disable rotate constraint from the default no } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/NodeConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBSsDtQTUBrDCxW?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/Constraints/NodeConstraints) ![Node Constraints in Blazor Diagram](images/blazor-diagram-node-constraints.png) -The following example shows how to add Shadow constraint to the default constraints of node. +The following example shows how to add the `Shadow` constraint to the default constraints of a node. ```csharp NodeConstraints NodeConstraints = NodeConstraints.Default | NodeConstraints.Shadow; ``` -The node constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations). +Node constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations). ```csharp //Removing multiple constraints from default. NodeConstraints NodeConstraints = NodeConstraints.Default & ~ (NodeConstraints.Select | NodeConstraints.Drag); ``` -The following code example shows how the tooltip can be enabled for the node. +The following code example shows how to enable the tooltip for a node. ```csharp //Enabled the tooltip constraints for the node. node.Constraints = NodeConstraints.Default | NodeConstraints.Tooltip; ``` -For more information about node constraints, refer to the [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html). +For more information about node constraints, refer to [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html). N>By default, the following constraints are enabled for the node,
    * Shadow @@ -216,7 +219,7 @@ N>By default, the following constraints are enabled for the node, ## How to Enable or Disable Connector Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the Connector allows you to enable or disable the following behaviors of connectors. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the connector enables or disables the following behaviors: * Select * Drag @@ -229,7 +232,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra | Constraints | Description | | -------- | -------- | -|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_None)|Disable all connector Constraints.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_None)|Disables all connector constraints.| |[Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Select)|Enables or disables connector to be selected.| |[Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Delete)|Enables or disables connector to be deleted.| |[Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Drag)|Enables or disables connector to be dragged.| @@ -252,7 +255,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra |[ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_ReadOnly)|Enables or disables readonly for the connector.| |[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Default)|Enables all constraints for the connector.| -The following code shows how to disable select constraint from the default constraints of connector. +The following code shows how to disable the `Select` constraint from the default connector constraints. ```cshtml @using Syncfusion.Blazor.Diagram @@ -280,29 +283,31 @@ The following code shows how to disable select constraint from the default const } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/ConnectorConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIMZXGzUrueWNG?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/Constraints/ConnectorConstraints) -The following example shows how to add Bridging constraint to the default constraints of a connector. +The following example shows how to add the `Bridging` constraint to the default constraints of a connector. ```csharp ConnectorConstraints ConnectorConstraints = ConnectorConstraints.Default | ConnectorConstraints.Bridging; ``` -The connector constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations). +Connector constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations). ```csharp //Removing multiple constraints from default. ConnectorConstraints ConnectorConstraints = ConnectorConstraints.Default & ~ (ConnectorConstraints.Select | ConnectorConstraints.Drag); ``` -The following code example shows how the tooltip can be enabled for the connector. +The following code example shows how to enable the tooltip for a connector. ```csharp //Enabled the tooltip constraints for the connector. connector.Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip; ``` -For more information about connector constraints, refer to the [ConnectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html). +For more information about connector constraints, refer to [ConnectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html). N>By default, the following constraints are enabled for the connector,
    * DragSegmentThumb @@ -318,7 +323,7 @@ N>By default, the following constraints are enabled for the connector, ## How to Enable or Disable Port Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Constraints) property of the Port allows you to enable or disable the following behaviors of port. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Constraints) property of a port enables or disables the following behaviors: * InConnect * OutConnect @@ -371,23 +376,25 @@ The following code shows how to disable creating connections with a port. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/PortConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCNXQfqqgQgXk?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/Constraints/PortConstraints) -The following code example shows how to modify the port constraints to accept target connection alone. +The following code example shows how to modify the port constraints to accept only a target connection. ```csharp //Enable to create target connection alone. port.Constraints = PortConstraints.InConnect; ``` -The port constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations). +Port constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations). ```csharp //Enable to create target connection alone. port.Constraints = PortConstraints.Default | PortConstraints.Draw; ``` -For more information about port constraints, refer to the [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html). +For more information about port constraints, refer to [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html). N> By default, the following constraints are enabled for the port,
    * Draw @@ -395,7 +402,7 @@ N> By default, the following constraints are enabled for the port, ## How to Enable or Disable Annotation Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints) property of the Annotations allows you to enable or disable read-only mode for the annotations by using the annotation constraints. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints) property of annotations enables or disables read-only mode using annotation constraints. | Constraints | Description | | -------- | -------- | @@ -403,7 +410,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra |[InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly)|Enables or disables to inherit the ReadOnly option from the parent object.| |[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_None)|Disables all constraints for the annotation.| -The following code shows how to enable read-only mode for the annotations. +The following code shows how to enable read-only mode for annotations. ```cshtml @using Syncfusion.Blazor.Diagram @@ -450,13 +457,15 @@ The following code shows how to enable read-only mode for the annotations. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/AnnotationConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNroWZjcfAgQkhDE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -For more details about annotation constraints, refer to the [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/AnnotationConstraints) + +For more details about annotation constraints, refer to [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html). ## How to Enable or Disable Selector Constraints -Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector [constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_Constraints). The part of selector is categorized as follows: +Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector [constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_Constraints). The parts of the selector are categorized as follows: * ResizeAll * UserHandle @@ -482,7 +491,7 @@ Selector visually represents the selected elements with certain editable thumbs. |[ResizeAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeAll)|Shows or hides all resize handles of the selector.| |[All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_All)|Shows all handles of the selector.| -The following code shows how to hide rotator. +The following code shows how to hide the rotator. ```cshtml @using Syncfusion.Blazor.Diagram @@ -513,22 +522,28 @@ The following code shows how to hide rotator. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/SelectorConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVeCXNwpgTUNJnP?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/Constraints/SelectorConstraints) ![Selector Constraints in Blazor Diagram](images/blazor-diagram-node-constraints.png) -The following code illustrates how to show or hide the tooltip for the drag, resize and rotate operation of the nodes. +The following code illustrates how to show or hide the tooltip for drag, resize, and rotate operations on nodes. ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Popups

    Selector Constraints

    - Tooltip + Tooltip @code { DiagramObjectCollection nodes; bool selector=true; + public DiagramSelectionSettings selection = new DiagramSelectionSettings() + { + Constraints = SelectorConstraints.All + }; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); @@ -567,7 +582,9 @@ The following code illustrates how to show or hide the tooltip for the drag, res } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeCXjwJAaYcwxx?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/Constraints) |![ToolTip During hover the node with selectorconstraints](images/blazor-diagram-selectorconstraintsnode.gif) | @@ -580,7 +597,7 @@ The following code example shows how to disable the userhandle functionality for selectedItems.Constraints = SelectorConstraints.All &~ SelectorConstraints.UserHandle; ``` -For more information about selector constraints, refer to the [SelectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html). +For more information about selector constraints, refer to [SelectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html). N> By default, the following constraints are enabled for the selected items,
    * ConnectorSourceThumb @@ -596,14 +613,14 @@ N> By default, the following constraints are enabled for the selected items, ## How to Enable or Disable Snap Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_Constraints) property of the SnapConstraints control the visibility of gridlines and enable or disable snapping. Snap constraints allow to set the following behaviors. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_Constraints) property of the `SnapConstraints` controls the visibility of gridlines and enables or disables snapping. Snap constraints allow the following behaviors. * Show only horizontal or vertical gridlines. * Show both horizontal and vertical gridlines. * Snap to either horizontal or vertical gridlines. * Snap to both horizontal and vertical gridlines. -The following list of snapping constraints are used to enable or disable certain features of snapping. +The following snapping constraints enable or disable snapping features: | Constraints | Description | | -------- | -------- | @@ -617,7 +634,7 @@ The following list of snapping constraints are used to enable or disable certain |[SnapToObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_SnapToObject)|Enables the object to snap with the other objects in the diagram.| |[All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_All)|Shows gridlines and enables snapping.| -The following code shows how to show only horizontal gridlines. +The following code shows how to display only horizontal gridlines. ```cshtml @using Syncfusion.Blazor.Diagram @@ -647,15 +664,17 @@ The following code shows how to show only horizontal gridlines. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/SnapConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXheiNXwJzZyzJDm?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/Constraints/SnapConstraints) -The snap constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations). +Snap constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations). ```csharp snapconstraints = SnapConstraints.ShowHorizontalLines | SnapConstraints.ShowVerticalLines | SnapConstraints.ShowLines; ``` -For more information about snap constraints, refer to the [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html). +For more information about snap constraints, refer to [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html). N> By default, the following constraints are enabled for the snap functionality in the diagram,
    * ShowLines @@ -667,13 +686,13 @@ N> By default, the following constraints are enabled for the snap functionality ## How to Use Boundary Constraints -Boundary [constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html) defines a boundary for the diagram inside that the interaction should be done. Boundary constraints allow to set the following behaviors. +[BoundaryConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html) defines a boundary for the diagram inside that the interaction should be done. Boundary constraints allow the following behaviors: * Infinity * Diagram * Page -The following list of constraints are used to enable or disable certain features of boundary interactions of the diagram. +The following constraints enable or disable certain boundary interaction features: | Constraints | Description | | -------- | -------- | @@ -681,7 +700,7 @@ The following list of constraints are used to enable or disable certain features |[Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html#Syncfusion_Blazor_Diagram_BoundaryConstraints_Diagram)|Allow the interactions to take place around the diagram height and width.| |[Page](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html#Syncfusion_Blazor_Diagram_BoundaryConstraints_Page)|Allow the interactions to take place around the page height and width.| -The following code shows how to limit the interaction done inside a diagram within a page. +The following code shows how to limit interaction within a page. ```cshtml @using Syncfusion.Blazor.Diagram @@ -711,7 +730,9 @@ The following code shows how to limit the interaction done inside a diagram with } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/BoundaryConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhSiDNGJpWtaRbJ?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/Constraints/BoundaryConstraints) For more information about selector constraints, refer to the [BoundaryConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html). @@ -720,9 +741,9 @@ N> By default, the following boundary constraints are enabled for the snap funct ## How to Inherit Behaviors -Some of the behaviors can be defined through both the specific object (node or connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. +Some behaviors can be defined at both the specific object (node or connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. -The following code example shows how to inherit the line bridging behavior from the diagram. +The following code example shows how to inherit line bridging behavior from the diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -761,15 +782,17 @@ The following code example shows how to inherit the line bridging behavior from } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/InheritBehaviors) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhoWXNQTzWHHdvB?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/Constraints/InheritBehaviors) ## How to Use Bitwise Operations -Bitwise operations are used to manipulate the flagged enumerations `enum`. In this section, Bitwise operations are shown by using the node constraints. The same is applicable when working with node constraints, connector constraints, or port constraints. +Bitwise operations are used to manipulate flagged enumerations `enum`. In this section, Bitwise operations are shown by using the node constraints. The same is applicable when working with node constraints, connector constraints, or port constraints. ### How to Add Constraints Using Bitwise OR Operator -You can add or enable multiple values at a time by using the Bitwise `|` (OR) operator. +Add or enable multiple values at a time by using the Bitwise `|` (OR) operator. The following code shows how to add bridging constraints into the default diagram constraints to enable bridging functionality in the diagram. @@ -787,7 +810,7 @@ The following code shows how to add bridging constraints into the default diagra ### How to Remove Constraints Using Bitwise AND NOT Operator -You can remove or disable values by using the Bitwise ‘&~’ (XOR) operator. +Remove or disable values by using the Bitwise ‘&~’ (XOR) operator. The following code shows to remove zoom and pan constraints from the default constraints to disable zoom and panning functionality in the diagram. @@ -806,7 +829,7 @@ The following code shows to remove zoom and pan constraints from the default con ### How to Check Constraint Values Using Bitwise AND -You can check any value by using the Bitwise ‘&’ (AND) operator. +Check any value by using the Bitwise ‘&’ (AND) operator. ```csharp if ((node.constraints & (NodeConstraints.Rotate)) == (NodeConstraints.Rotate)); diff --git a/blazor/diagram/container.md b/blazor/diagram/container.md index b557f098c7..a17865f2d2 100644 --- a/blazor/diagram/container.md +++ b/blazor/diagram/container.md @@ -9,14 +9,14 @@ documentation: ug # Container in Blazor Diagram Component -Containers provide a powerful way to organize and manage collections of diagram elements. They act as logical groupings of shapes enclosed by a customizable border, allowing for intuitive drag-and-drop operations during runtime. Changes to the container, such as position, size, or style, do not affect its children. This enhances diagram clarity by maintaining organization while allowing individual elements to be edited separately. +Containers provide a structured way to organize and manage collections of diagram elements. They act as logical groupings of shapes enclosed by a customizable border, allowing for intuitive drag-and-drop operations during runtime. Changes to the container, such as position, size, or style, do not affect its children. This enhances diagram clarity by maintaining organization while allowing individual elements to be edited separately. ## How to Create a Container -A container can be created and added to the diagram, either programmatically or interactively. +A container can be created and added to the diagram either programmatically or interactively. ### How to Add a Container -To create a container, you have to define the [Container](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html) object and add it to the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) collection of the diagram. The following code illustrates how to create a Container Node. +To create a container, define a [Container](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html) object and add it to the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) collection of the diagram. The following code illustrates how to create a container node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -42,10 +42,12 @@ To create a container, you have to define the [Container](https://help.syncfusio } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerNode). +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBICtDmzpHBjmkf?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/Container/ContainerNode). ->**Note:** Container's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. + +>**Note:** The container ID should be unique, begin with a letter, and not contain spaces or special characters (such as underscores or symbols). ### How to Add Elements to a Container @@ -101,14 +103,15 @@ To add child elements to a container, define the child nodes and assign their ID } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLeijXGTpdvrBys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerSample). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerSample). ### How to Customize Container Header -Containers can include descriptive text to identify their purpose or contents through the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html#Syncfusion_Blazor_Diagram_Container_Header) property. This feature enhances diagram readability by providing clear labels for grouped elements. The header's visual presentation is fully customizable using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContainerHeader.html#Syncfusion_Blazor_Diagram_ContainerHeader_Style) property. +Containers can include descriptive text to identify their purpose or contents through the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html#Syncfusion_Blazor_Diagram_Container_Header) property. This enhances readability by providing clear labels for grouped elements. The header's visual presentation is fully customizable using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContainerHeader.html#Syncfusion_Blazor_Diagram_ContainerHeader_Style) property. -The following code example explains how to define a container header and its customization: +The following example shows how to define a container header and customize its appearance. ```cshtml @using Syncfusion.Blazor.Diagram @@ -177,18 +180,19 @@ The following code example explains how to define a container header and its cus } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBIMXZmTTwgGvNM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerHeaderSample). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerHeaderSample). ![Blazor Diagram Container Header](images/ContainerImages/ContainerWithHeader.png) ->Note: You can edit the header by double-clicking the region of the container’s header, or by pressing F2. +>Note: Edit the header by double-clicking the header region, or by pressing F2. ### How to Add Containers to the Symbol Palette -Container nodes can be predefined and added to the symbol palette, allowing for quick and consistent reuse throughout your diagrams. When needed, you can simply drag these predefined containers from the palette and drop them directly into your diagram. +Container nodes can be predefined and added to the symbol palette for quick and consistent reuse throughout diagrams. Drag the predefined containers from the palette and drop them into the diagram to instantiate them. -The following code example explains how to define a container and add it to the symbol palette: +The following code example shows how to define containers and add them to the symbol palette. ```cshtml @using Syncfusion.Blazor.Diagram @@ -272,22 +276,24 @@ The following code example explains how to define a container and add it to the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerPalette). +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtreMNtcpzlVcyaI?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/Container/ContainerPalette). ![Blazor Diagram Container Palette](images/ContainerImages/ContainerPalette.png) ## How to Interactively Add or Remove Diagram Elements into Container -Diagram elements can be added or removed from a container at runtime. When an element is dropped onto the container's edges, the container automatically adjusts its size to accommodate the new element. +Diagram elements can be added to or removed from a container at runtime. When an element is dropped onto the container's edges, the container automatically adjusts its size to accommodate the new element. ![Blazor Diagram Container Interaction](images/ContainerImages/ContainerInteraction.gif) ## Interaction -Diagram provides support to select, drag or resize the container interactively. +Diagram supports selecting, dragging, and resizing containers interactively.. ### How to Select a Container -Container can be selected by clicking (tapping) on it. Also, it can be selected at runtime by using 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__) method and clear the selection in the diagram by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) +A container can be selected by clicking (or tapping) it. It can also be selected at runtime by using 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__) method, and selection can be cleared by using [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) ![Blazor Diagram Container Selection](images/ContainerImages/ContainerSelection.png) @@ -302,8 +308,8 @@ Container can be selected by clicking (tapping) on it. Also, it can be selected ### How to Resize a Container * A selected container is surrounded by eight resize thumbs. Dragging these thumbs adjusts the container’s size. -* When dragging one corner, the opposite corner remains fixed. +* When one corner is dragged, the opposite corner remains fixed. * To maintain the container's aspect ratio during resizing, enable the [AspectRatio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_AspectRatio) constraint in NodeConstraints. -* A container can be resized either by resizing the selector or the tight bounds of the child object. If the child node moves to the edge of the container, it will be automatically resized. +* A container can be resized by using the selector or by moving child nodes toward the container edge. If a child node reaches the container edge, the container is resized automatically. ![Blazor Diagram Resize Container](images/ContainerImages/ContainerResize.gif) diff --git a/blazor/diagram/context-menu.md b/blazor/diagram/context-menu.md index bcb7504592..04ae09283f 100644 --- a/blazor/diagram/context-menu.md +++ b/blazor/diagram/context-menu.md @@ -1,22 +1,22 @@ --- layout: post -title: Context Menu in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Context Menu in Syncfusion Blazor Diagram component and much more. +title: Context Menu in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about Diagram Context Menu in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Context Menu in Blazor Diagram Component +# Context Menu in Diagram Component -In Graphical User Interface (GUI), a context menu is a certain type of menu that appears when you perform a right-click operation. You can create a nested level of context menu items. -Diagram provides some in-built context menu items and allows you to define custom menu items through the [ContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html) property. +In graphical user interfaces (GUIs), a context menu is a menu that opens on right-click and can create a nested level of context menu items. +The Diagram component provides built-in context menu items and supports custom items through the [ContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html) property. ## How to Enable Default Context Menu -The [Show](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_Show) property helps you to enable or disable the context menu. Diagram provides default context menu items such as copy, cut, paste, select all, undo, redo and group options. The following code shows how to enable the default context menu items. +The [Show](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_Show) property enables or disables the context menu. The default context menu items such as copy, cut, paste, select all, undo, redo and group options. The following code shows how to enable the default context menu items. ```cshtml @using Syncfusion.Blazor.Diagram @@ -26,7 +26,7 @@ The [Show](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Conte     ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/DefaultContextMenu) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/DefaultContextMenu) ![Default Context Menu](images/ContextMenuDefault.gif) The following code shows how to disable the default context menu items. @@ -44,25 +44,25 @@ The following code shows how to disable the default context menu items. Custom context menu provides an option to add new custom items to the context menu. -* Apart from the default context menu items, Define some additional context menu items. Those additional items must be defined and added to the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_Items) property of the context menu. +* Default context menu items, Define some additional context menu items. Those additional items must be defined and added to the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_Items) property of the context menu. -* The context menu [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Text) and [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_ID) properties allows you to set the text and ID for the context menu item. +* The context menu [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Text) and [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_ID) properties to set the text and ID for the context menu item. -* You can set a navigation url for the context menu item using the context menu [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Url) property. +* Set a navigation url for the context menu item using the context menu [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Url) property. * The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_IconCss) property defines the class or multiple classes separated by a space for the menu item that is used to include an icon. The Menu item consists of the font icon and sprite image. -* The [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Separator) property defines the horizontal lines that are used to separate the menu items. You cannot select the separators. Using the separator attribute, you can enable separators to group the menu items. +* The [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Separator) property defines the horizontal lines that are used to separate the menu items. Cannot select the separators. Using the separator attribute, enable separators to group the menu items. -* You can Hide/Show menu item using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Hidden) property. +* Show or hide an item using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Hidden) property. -* You can Enable/Disable menu item using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Disabled) property. +* Enable or disable an item using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Disabled) property. -* You can add submenu items using the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Items) property. +* Add submenu items with the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Items) property. ### How to Add Custom and Default Context Menu Items Together -The following code example shows how to add custom context menu items along with the default context menu. Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to false to render both the custom context menu and default context menu. +The following code example shows how to add custom context menu items along with the default context menu. Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to false to render both the custom context menu and default context menu. ```cshtml @using Syncfusion.Blazor.Diagram @@ -149,11 +149,13 @@ The following code example shows how to add custom context menu items along with } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/CustomContextMenu) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtryWDDQToDgkczx?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/ContextMenu/CustomContextMenu) ### How to Show Custom Context Menu Alone -Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to true to only display the custom context menu items. +Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to **true** to display only custom context menu items. The following code example shows how to show custom context menu items alone. ```cshtml @@ -270,12 +272,14 @@ Diagram provides template support for the context menu. The context menu items c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuTemplate) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhSitXcpeBhpOuL?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/ContextMenu/ContextMenuTemplate) ![Context Menu Template](images/ContextMenuTemplate.gif) ## Events -The Diagram control provides event support for the context menu that triggers when rendering the context menu and when clicking the items of the context menu. +The Diagram control provides events for the context menu, triggered when rendering the context menu and when clicking the items of the context menu. ### How to Handle Context Menu Opening Event @@ -297,7 +301,7 @@ The Diagram control triggers the event [ContextMenuOpening](https://help.syncfus } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuOpenningEvent) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuOpenningEvent) ### How to Handle Context Menu Item Clicked Event @@ -320,7 +324,7 @@ The Diagram control triggers the event [ContextMenuItemClicked](https://help.syn } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuItemClickedEvent) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuItemClickedEvent) The following code example shows how to add separate custom context menu items for nodes and connectors. In the following code, the node color context menu item only renders for the node and the connector color context menu item only renders for the connector. @@ -432,7 +436,9 @@ The following code example shows how to add separate custom context menu items f } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuEvents) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIMXjGfIhvkfXe?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/ContextMenu/ContextMenuEvent/ContextMenuEvents) ## See also diff --git a/blazor/diagram/data-binding.md b/blazor/diagram/data-binding.md index a3a678e89e..750699b6ce 100644 --- a/blazor/diagram/data-binding.md +++ b/blazor/diagram/data-binding.md @@ -1,36 +1,36 @@ --- layout: post -title: Data Binding in Blazor Diagram Component | Syncfusion +title: Data Binding in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about Data Binding such as local data, remote data in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Data Binding in Blazor Diagram Component +# Data Binding in Diagram Component -* [Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) can be populated with 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) based on the information provided from an external data source. +* The [Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) can be populated with [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) from an external data source. -* Diagram exposes its specific data-related properties allowing you to specify the data source fields from where the node information has to be retrieved. +* Diagram exposes data-related properties to specify the data source fields from where the node information has to be retrieved. -* The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource) property is used to define the data source either as a collection of objects or as an instance of `DataSource` that needs to be populated in the diagram. +* The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource) property specifies the data source either as a collection of objects or as an instance of `DataSource` to populate the diagram. -* The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID) property is used to define the unique field of each JSON data. +* The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID) property defines the unique identifier field for each data item. -* The [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID) property is used to define the parent field which builds the relationship between ID and parent field. +* The [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID) property defines the parent field which builds the relationship between ID and parent field. -* The [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_Root) property is used to define the root node for the diagram populated from the data source. +* The [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_Root) property is used to define the root node for diagrams populated from a data source. * To explore those properties, see [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html). -* Diagram supports two types of data binding. They are: +* Diagram supports two types of data binding: 1. Local data 2. Remote data ## How to Specify Parent Child Relationship in Data Source -The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID) and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID) types are string in DataSourceSettings. When creating a parent-child relationship, it's essential to ensure that at least one node has an empty ParentID. This node will act as the root or parent node, with other nodes linked as its children. For example, let's consider the data source settings. Within the DataSource, we have defined three specific details. The DataModel class has attributes such as ID, ParentID, and various other details. In this scenario, the initial dataset does not have a parent ID, which means we have set it as empty. This node acts as the parent or root node of the layout. Subsequent datasets, however, do contain a ParentID. Below is a code example illustrating this: +The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID) and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID) properties are string in `DataSourceSettings`. When creating a parent-child relationship, it's essential to ensure that at least one node has an empty `ParentID`. This node will act as the root or parent node, with other nodes linked as its children. For example, let's consider the data source settings. Within the `DataSource`, we have defined three specific details. The `DataModel` class has attributes such as `ID`, `ParentID`, and various other details. In this scenario, the initial dataset does not have a parent ID, which means we have set it as empty. This node acts as the parent or root node of the layout. Subsequent datasets, however, do contain a `ParentID`. Below is a code example illustrating this: ```csharp @using Syncfusion.Blazor.Diagram @@ -86,11 +86,13 @@ The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSou }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/Parent-Child%20Relationship) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVysNXGTednqtYb?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/DataBinding/Parent-Child%20Relationship) ## How to Bind Local Data to the Diagram -Diagram can be populated based on the user defined JSON data (Local Data) by mapping the relevant data source fields. +Diagram can be populated from user defined JSON data (local data) by mapping the relevant data source fields. To map the user defined JSON data with diagram, configure the fields of `DataSourceSettings`. The following code example illustrates how to bind local data with the diagram. @@ -195,7 +197,9 @@ To map the user defined JSON data with diagram, configure the fields of `DataSou }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/LocalData) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBSitjmJywScwCt?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/DataBinding/LocalData) ## How to Bind ExpandoObject Data to the Diagram @@ -381,7 +385,9 @@ The following code example illustrates how to bind ExpandoObject data with the d } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/ExpandoObject) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLSiDtcJyboFLqr?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/DataBinding/ExpandoObject) ## How to Bind DynamicObject Data to the Diagram @@ -583,13 +589,15 @@ The following code example illustrates how to bind DynamicObject data with the d } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/DynamicObj) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhSCNNGTykSwaxF?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/DataBinding/DynamicObj) ## How to Bind JSON Data to the Diagram -Local JSON data can be bound to the Diagram component by assigning the array of objects to the Json property of the SfDataManager component. +Local JSON data can be bound to the Diagram by assigning the array of objects to the Json property of the `SfDataManager` component. -The following sample code demonstrates binding local data through the SfDataManager to the Diagram component, +The following sample code demonstrates binding local data through SfDataManager to the Diagram component, ```cshtml @using Syncfusion.Blazor.Diagram @@ -652,13 +660,15 @@ The following sample code demonstrates binding local data through the SfDataMana } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/JSONData) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLostXmzRXsgeJi?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/DataBinding/JSONData) ## How to Bind Remote Data to the Diagram -To bind remote data to [Diagram component](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html), assign service data as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource) property or use the SfDataManager component. To interact with a remote data source, provide the endpoint Url. +To bind remote data to the [Diagram component](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html), assign service data as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource) property or use the SfDataManager component. To interact with a remote data source, provide the endpoint Url. -When using SfDataManager for data binding, the TValue must be provided explicitly in the diagram component. By default, SfDataManager uses ODataAdaptor for remote data-binding. +When using `SfDataManager` for data binding, the TValue must be provided explicitly in the diagram component. By default, `SfDataManager` uses `ODataAdaptor` for remote data-binding. ### How to Bind OData Services @@ -747,11 +757,13 @@ OData (Open Data Protocol) is a standardized protocol for building and consuming } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/ODataAdaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLeWZNQpRDIabQI?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/DataBinding/RemoteData/ODataAdaptor) ### How to Bind OData V4 Services -The ODataV4 is an improved version of OData protocols, and the SfDataManager can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind an OData v4 service, use the ODataV4Adaptor. +OData V4 is an updated version of the OData protocols, and the `SfDataManager` can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind an OData v4 service, use the OData V4 adaptor. ```cshtml @using Syncfusion.Blazor.Diagram @@ -836,15 +848,17 @@ The ODataV4 is an improved version of OData protocols, and the SfDataManager can } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/ODataV4Adaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXreWtNmTdMAJWbU?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/DataBinding/RemoteData/ODataV4Adaptor) ### How to Bind Web API Services to the Diagram -You can use the `WebApiAdaptor` to interact with Web APIs created with OData endpoints. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Therefore, to use the `WebApiAdaptor`, the endpoint must understand the OData formatted queries sent with the request. +Use the `WebApiAdaptor` to interact with Web APIs created with OData endpoints. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Therefore, to use the `WebApiAdaptor`, the endpoint must understand the OData formatted queries sent with the request. To enable OData query option for a Web API, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options). -The following sample code demonstrates hoe to bind remote data to the Diagram component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using a Web API service, +The following sample code demonstrates how to bind remote data to the Diagram component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using a Web API service, ```cshtml @using Syncfusion.Blazor.Diagram @@ -929,7 +943,9 @@ The following sample code demonstrates hoe to bind remote data to the Diagram co } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/WebAPIAdaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSsDXwpHLVLxIu?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/DataBinding/RemoteData/WebAPIAdaptor) ### How to Bind URL Services to the Diagram A URL service is a web service accessible via a Uniform Resource Locator (URL). These services provide specific functionalities or data when a client sends an HTTP request to the given URL. URL services are a foundational aspect of web-based APIs (Application Programming Interfaces) and RESTful services. The [UrlAdaptor](../data/adaptors#url-adaptor) serves as the base adaptor for interacting with remote data services. Most built-in adaptors are derived from the `UrlAdaptor`. @@ -1019,10 +1035,12 @@ The following sample code demonstrates how to bind data to the Diagram component } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/URLAdaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSMZjmfnrvrKJB?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/DataBinding/RemoteData/URLAdaptor) ### How to Bind Custom Data -The custom data binding can be performed in the diagram component by providing a custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class. +Custom data binding can be performed in the diagram component by providing a custom adaptor class and overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The following sample code demonstrates implementing custom data binding using custom adaptor, @@ -1086,6 +1104,21 @@ The following sample code demonstrates implementing custom data binding using cu newConnector.CornerRadius = 5; } + protected override void OnInitialized() + { + employeeDetails = new List(); + employeeDetails = new List() { + new EmployeeDetails { EmployeeID = "1", FirstName = "Andrew", Designation = "CEO", Country = "England", ReportsTo = "", Color = "Red" }, + new EmployeeDetails { EmployeeID = "2", FirstName = "Nancy", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "3", FirstName = "Janet", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "4", FirstName = "Margaret", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "5", FirstName = "Steven", Designation = "Product Manager", Country = "England", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "7", FirstName = "Michael", Designation = "Team Lead", Country = "USA", ReportsTo = "5", Color = "Green" }, + new EmployeeDetails { EmployeeID = "8", FirstName = "Robert", Designation = "Developer", Country = "England", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "9", FirstName = "Anne", Designation = "Developer", Country = "USA", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "6", FirstName = "Laura", Designation = "HR", Country = "USA", ReportsTo = "1", Color = "Purple" }, + }; + } public class EmployeeDetails { @@ -1140,17 +1173,18 @@ The following sample code demonstrates implementing custom data binding using cu } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLIMjNbqJwtqCZT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### How to Perform CRUD Operation -The CRUD operations for the custom bounded data in the diagram component can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class, +The CRUD operations for custom bounded data in the diagram component can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class, * **Insert/InsertAsync** * **Remove/RemoveAsync** * **Update/UpdateAsync** * **Read/ReadAsync** -The following sample code demonstrates implementing CRUD operations for the custom bounded data, +The following sample code demonstrates implementing CRUD operations for custom bounded data, ```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Diagram @@ -1232,6 +1266,21 @@ The following sample code demonstrates implementing CRUD operations for the cust newConnector.CornerRadius = 5; } + protected override void OnInitialized() + { + Details = new List(); + employeeDetails = new List() { + new EmployeeDetails { EmployeeID = "1", FirstName = "Andrew", Designation = "CEO", Country = "England", ReportsTo = "", Color = "Red" }, + new EmployeeDetails { EmployeeID = "2", FirstName = "Nancy", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "3", FirstName = "Janet", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "4", FirstName = "Margaret", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "5", FirstName = "Steven", Designation = "Product Manager", Country = "England", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "7", FirstName = "Michael", Designation = "Team Lead", Country = "USA", ReportsTo = "5", Color = "Green" }, + new EmployeeDetails { EmployeeID = "8", FirstName = "Robert", Designation = "Developer", Country = "England", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "9", FirstName = "Anne", Designation = "Developer", Country = "USA", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "6", FirstName = "Laura", Designation = "HR", Country = "USA", ReportsTo = "1", Color = "Purple" }, + }; + } public class EmployeeDetails { @@ -1348,7 +1397,9 @@ The following sample code demonstrates implementing CRUD operations for the cust } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/DiagramWithCustomAdaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthIMXNbKTJLixOX?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/DataBinding/DiagramWithCustomAdaptor) ### How to Bind GraphQL Service GraphQL is a query language for APIs that allows you to can get exactly what you need and nothing more. The GraphQLAdaptor provides an option to retrieve data from a GraphQL server. For more details on GraphQL service, refer to the [GraphQL documentation](../data/adaptors#graphql-service-binding). @@ -1444,11 +1495,11 @@ GraphQL is a query language for APIs that allows you to can get exactly what you ![Binding with GraphQL service](images/GraphQLAdaptor.png) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptor) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptor) ### How to Perform CRUD Operations Using Mutations -You can perform CRUD operations by setting the mutation queries in the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) property of [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). +CRUD operations can be performed by setting mutation queries in the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) property of [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). The following sample code demonstrates performing CRUD operations. You have to set the Insert mutation query in [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Insert) property of Mutation in `GraphQLAdaptorOptions`. Similarly, you have to set the Update and Delete mutation queries in [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Update) and [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Delete) properties of Mutation in `GraphQLAdaptorOptions` respectively. @@ -1709,11 +1760,10 @@ namespace ASPNetCoreGraphQlServer.GraphQl } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptorCRUD) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptorCRUD) ## Entity Framework - -You need to follow the below steps to consume data from the **Entity Framework** in the diagram component. +Follow these steps to consume data from **Entity Framework** in the Diagram. ### How to Create DBContext Class @@ -1862,7 +1912,7 @@ namespace DiagramWithRemoteData.Controllers ### How to Configure Diagram Component Using Web API Adaptor -Now, you can configure the diagram using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with the web api, you need to use WebApiAdaptor. +Configure the Diagram using the 'SfDataManager' to interact with the created Web API and consume the data appropriately. To interact with the web api, use **WebApiAdaptor**. ```cshtml @using Syncfusion.Blazor.Data diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md index 51306c4db9..fc227a7f3d 100644 --- a/blazor/diagram/events.md +++ b/blazor/diagram/events.md @@ -11,7 +11,7 @@ documentation: ug ## How to Use the Created Event -The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Created) event is triggered when the Diagram component is fully rendered and initialized. This event provides an opportunity to execute custom logic or perform specific actions immediately after the diagram is created. For instance, you can use this event to programmatically select objects, modify diagram properties, or initialize additional components that depend on the diagram's existence. +The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Created) event is raised after the Diagram component is fully rendered and initialized. This event provides an opportunity to execute custom logic or perform specific actions immediately after the diagram is created. For instance, use this event to programmatically select objects, modify diagram properties, or initialize additional components that depend on the diagram's existence. ```cshtml @using Syncfusion.Blazor.Diagram @@ -45,11 +45,13 @@ The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Sf } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CreatedEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDryCDtQpdvIVmCH?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/Events/CreatedEvent) ## How to Handle Click Events -The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Click) event is triggered when a user interacts with a node, connector, or the diagram canvas by clicking on it. This event provides valuable information about the clicked element and the click location. For detailed information about the event arguments, please refer to the [ClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ClickEventArgs.html). +The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Click) event occurs when a user interacts with a node, connector, or the diagram canvas by clicking on it. This event provides valuable information about the clicked element and the click location. For detailed information about the event arguments, please refer to the [ClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ClickEventArgs.html). ```cshtml @using Syncfusion.Blazor.Diagram @@ -82,11 +84,13 @@ The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVeMtjcfROiEWpl?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/Events/ClickEvent) ## How to Handle the Key Down Event -The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html). +The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is raised when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html). ```cshtml @@ -120,11 +124,13 @@ The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Sf } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthICZNmznawLOVz?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/Events/KeyDownEvent) ## How to Handle the Key Up Event -The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively. +The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is raised when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively. ```cshtml @using Syncfusion.Blazor.Diagram @@ -157,24 +163,26 @@ The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyUpEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLyMDDcpmWhdWJy?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/Events/KeyUpEvent) ## How to Handle the Drag Start Event -* The [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is triggered when a user begins dragging a symbol from the symbol palette into the diagram canvas. This event provides valuable information about the drag operation initiation. For detailed information about the event arguments and properties available, refer to the [DragStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragStartEventArgs.html). +* The [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is raised when a user begins dragging a symbol from the symbol palette into the diagram canvas. This event provides valuable information about the drag operation initiation. For detailed information about the event arguments and properties available, refer to the [DragStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragStartEventArgs.html). ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette @using System.Collections.ObjectModel - + + - - + @code{ SfDiagramComponent Diagram; SfSymbolPaletteComponent PaletteInstance; @@ -213,25 +221,27 @@ 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/Events/DragStartEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhyCjtcfwJSgxiR?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/Events/DragStartEvent) ## How to Handle the Dragging Event -* The [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is triggered when a diagram element is being dragged over another element in the diagram. This event provides real-time feedback during the dragging process. To explore the available arguments and properties associated with this event, refer to the [DraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DraggingEventArgs.html). +* The [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is raised when a diagram element is being dragged over another element in the diagram. This event provides real-time feedback during the dragging process. To explore the available arguments and properties associated with this event, refer to the [DraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DraggingEventArgs.html). ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette @using System.Collections.ObjectModel - + - + @code{ SfDiagramComponent Diagram; @@ -265,25 +275,27 @@ 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/Events/DraggingEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhSMZZGJcKGJAkd?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/Events/DraggingEvent) ## How to Handle the DragLeave Event -* The [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragLeave) event is triggered when a dragged element exits the boundaries of another diagram element. For detailed information about the event arguments, refer to the [DragLeaveEventArgs](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DragLeaveEvent) documentation and sample code. +* The [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragLeave) event is raised when a dragged element exits the boundaries of another diagram element. For detailed information about the event arguments, refer to the [DragLeaveEventArgs](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DragLeaveEvent) documentation and sample code. ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel @using Syncfusion.Blazor.Diagram.SymbolPalette - + + - - + @code{ SfDiagramComponent Diagram; DiagramSize SymbolPreview; @@ -320,24 +332,27 @@ 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/Events) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBoCXNQJwSmzgkQ?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/Events) ## How to Handle the Drag Drop Event -* The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a user drags a symbol from the symbol palette and drops it onto the diagram's drawing area. This event provides valuable information about the drag and drop operation. To access and utilize the event arguments, refer to the [DropEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DropEventArgs.html) documentation, which details the properties and methods available for handling this event effectively. +* The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is raised when a user drags a symbol from the symbol palette and drops it onto the diagram's drawing area. This event provides valuable information about the drag and drop operation. To access and utilize the event arguments, refer to the [DropEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DropEventArgs.html) documentation, which details the properties and methods available for handling this event effectively. ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel @using Syncfusion.Blazor.Diagram.SymbolPalette + + - - + @code{ SfDiagramComponent Diagram; DiagramSize SymbolPreview; @@ -374,10 +389,12 @@ 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/Events/DragDrop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVIMNZczQFDlDDa?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/Events/DragDrop) ## How to Handle the On Auto Scroll Change Event -The [OnAutoScrollChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_OnAutoScrollChange) event is triggered when changes are detected in the scroll position, extent, or viewport size due to auto-scrolling of diagram elements. This event provides an [AutoScrollChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AutoScrollChangeEventArgs.html) argument containing relevant information. +The [OnAutoScrollChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_OnAutoScrollChange) event is raised when changes are detected in the scroll position, extent, or viewport size due to auto-scrolling of diagram elements. This event provides an [AutoScrollChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AutoScrollChangeEventArgs.html) argument containing relevant information. The [AutoScrollChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AutoScrollChangeEventArgs.html) include the following properties: @@ -445,10 +462,11 @@ These properties allow for fine-tuned control over the auto-scrolling behavior i } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrosjtcpGFlAEMJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Speed Limit control in autoScroll support for node](images/SpeedLimitNodeConnector.gif) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/OnAutoScrollChange) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/OnAutoScrollChange) ## See also diff --git a/blazor/diagram/how-to.md b/blazor/diagram/how-to.md index 354bb01f12..f1f9b47978 100644 --- a/blazor/diagram/how-to.md +++ b/blazor/diagram/how-to.md @@ -13,7 +13,7 @@ The diagram's core functionalities are implemented through a comprehensive set o ## How to Add Nodes Using the Add Method -To create a node in a Blazor diagram, define a Node object and add it to the diagram's nodes collection using the `Add()` method. It's crucial to call the Add() method within the OnInitialized() lifecycle method. This approach ensures that each diagram element is properly measured and rendered individually before the entire diagram is displayed. Attempting to use the Add() method outside of OnInitialized() is not recommended, as it may lead to unexpected behavior or rendering issues in the diagram. The following code example shows how to add a node to the diagram. +Create a node in a Blazor diagram, define a Node object and add it to the diagram's nodes collection using the `Add` method. It's crucial to call the `Add` method within the `OnInitialized` lifecycle method. This approach ensures that each diagram element is properly measured and rendered individually before the entire diagram is displayed. Attempting to use the `Add` method outside of `OnInitialized` is not recommended, as it may lead to unexpected behavior or rendering issues in the diagram. The following code example shows how to add a node to the diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -48,7 +48,9 @@ To create a node in a Blazor diagram, define a Node object and add it to the dia } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZByCjXwfvJVAbsa?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/Methods/AddMethod) ## How to Add Nodes Using the AddDiagramElementsAsync Method @@ -151,11 +153,13 @@ The [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.B } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddDiagramElements) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDheMXDcJPTQYWFA?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/Methods/AddDiagramElements) ## How to Clear Nodes and Connectors from the Diagram -The [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clear) method provides a quick and efficient way to remove all elements from the diagram, including nodes, connectors, and groups. This method is particularly useful when you need to reset the diagram to its initial state or prepare it for a new set of elements. +The [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clear) method removes all elements from the diagram, including nodes, connectors, and groups. Use it to reset the canvas to a blank state before loading or creating a new set of elements. ```cshtml @using Syncfusion.Blazor.Diagram @@ -220,13 +224,15 @@ The [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/Clear) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBesjNQpboWvycs?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/Methods/Clear) ![Blazor Diagram clear](images/blazor-diagram-clear.gif) ## How to Delete Diagram Elements -The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Delete_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method is a powerful tool for removing diagram elements such as nodes, connectors, and groups. When invoked without parameters or with a null parameter, it automatically deletes all selected elements. Alternatively, you can pass a collection of specific diagram elements to be removed. This versatile method provides flexibility in managing your diagram's content. The following code example demonstrates how to effectively use the Delete method to remove elements from your diagram. +The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Delete_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method removes diagram elements such as nodes, connectors, and groups. When invoked without parameters or with a null parameter, it automatically deletes all selected elements. Alternatively, pass a collection of specific diagram elements to be removed. This versatile method provides flexibility in managing your diagram's content. The following code example demonstrates how to effectively use the Delete method to remove elements from your diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -327,10 +333,12 @@ The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfD } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/Delete) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLyMZNwplRtkZvS?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/Methods/Delete) ## How to Reset Diagram Zoom Level -The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ResetZoom) method is used to reset the current zoom level of the diagram page to its default value of 100%. This method is particularly useful when the diagram is in a zoomed-in or zoomed-out state, allowing users to quickly return to the standard view. The following code example demonstrates how to implement the ResetZoom method to restore the diagram's default zoom level. +The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ResetZoom) method restores the current zoom level of the diagram page to its default value of 100%. This method is particularly useful when the diagram is in a zoomed-in or zoomed-out state, allowing users to quickly return to the standard view. The following code example demonstrates how to implement the ResetZoom method to restore the diagram's default zoom level. ```cshtml @using Syncfusion.Blazor.Diagram @@ -346,6 +354,12 @@ The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } +
    + + + +
    +
    @@ -353,12 +367,6 @@ The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.
    -
    - - - -
    - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -428,12 +436,14 @@ The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ResetZoom) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDByMttQzaXbtFcK?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/Methods/ResetZoom) ![Blazor Diagram reset zoom methos](images/blazor-diagram-reset-zoom-method.gif) ## How to Clear Selected Items -The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) method is used to deselect all currently selected nodes and connectors in the diagram. This method provides a quick way to reset the selection state of the diagram, allowing for a clean slate before performing new operations or updates. +The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) method deselects all currently selected nodes and connectors in the diagram. This method provides a quick way to reset the selection state of the diagram, allowing for a clean slate before performing new operations or updates. ```cshtml @using Syncfusion.Blazor.Diagram @@ -449,6 +459,10 @@ The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia } +
    + +
    +
    @@ -456,10 +470,6 @@ The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia
    -
    - -
    - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -521,10 +531,12 @@ The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ClearSelection) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDheWZZQzEjtSkVX?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/Methods/ClearSelection) ## How to Get Object in the Diagram -The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetObject_System_String_) method in SfDiagramComponent accepts an ID as a parameter and returns an IDiagramObject. You can retrieve a specific connector or node by passing its unique identifier to this method. This powerful functionality allows for easy access and manipulation of diagram elements within your Blazor application. +The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetObject_System_String_) method in SfDiagramComponent accepts an ID as a parameter and returns an IDiagramObject. Retrieve a specific connector or node by passing its unique identifier to this method. This powerful functionality allows for easy access and manipulation of diagram elements within your Blazor application. ```cshtml @using Syncfusion.Blazor.Diagram @@ -540,6 +552,10 @@ The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } +
    + +
    +
    @@ -547,10 +563,6 @@ The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.
    -
    - -
    - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -613,10 +625,12 @@ The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetObjectMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVysDjwpPuWVGUI?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/Methods/GetObjectMethod) ## How to Get Page Bounds of the Diagram -The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetPageBounds_System_Nullable_System_Double__System_Nullable_System_Double__) method is used to retrieve the boundaries of the diagram page. This method allows you to obtain essential page dimensions such as width, height, and other relevant values, enabling precise control over the diagram's layout and positioning. +The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetPageBounds_System_Nullable_System_Double__System_Nullable_System_Double__) method is used to retrieve the boundaries of the diagram page. This method allows to obtain essential page dimensions such as width, height, and other relevant values, enabling precise control over the diagram's layout and positioning. ```cshtml @using Syncfusion.Blazor.Diagram @@ -632,6 +646,10 @@ The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } +
    + +
    +
    @@ -639,10 +657,6 @@ The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag
    -
    - -
    - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -704,10 +718,12 @@ The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetPageBounds) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVeiNNGfkUXpFSC?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/Methods/GetPageBounds) ## How to Select All Objects in the Diagram - The [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectAll) method allows you to select all objects (nodes, connectors, and annotations) in the diagram simultaneously. This feature is particularly useful for performing bulk operations or applying changes to multiple elements at once. + The [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectAll) method selects all objects (like nodes, connectors, and groups) in the diagram simultaneously. This feature is particularly useful for performing bulk operations or applying changes to multiple elements at once. ```cshtml @using Syncfusion.Blazor.Diagram @@ -723,6 +739,10 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } +
    + +
    +
    @@ -730,11 +750,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
    -
    - - -
    - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -796,10 +811,12 @@ 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/Methods/SelectAllMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVIsjZmzYpWNISa?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/Methods/SelectAllMethod) ## How to Scale Selected Objects -The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Scale_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) method allows you to resize diagram objects proportionally by applying a specified scaling factor. This enables precise control over the size of elements within your diagram. +The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Scale_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) method resizes a diagram objects proportionally by applying a specified scaling factor. This enables precise control over the size of elements within your diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -815,6 +832,10 @@ The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } +
    + +
    +
    @@ -822,10 +843,6 @@ The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
    -
    - -
    - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -887,10 +904,12 @@ The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ScaleMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBIsNZmTYeioDqg?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/Methods/ScaleMethod) ## How to Get and Customize Cursor Style -The [GetCustomCursor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetCustomCursor) method allows you to create and customize your own cursor. You can define the cursor style according to your specific requirements, enhancing user interaction with the diagram component. +The [GetCustomCursor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetCustomCursor) method create and customize own cursor. Define the cursor style according to your specific requirements, enhancing user interaction with the diagram component. ```cshtml @using Syncfusion.Blazor.Diagram @@ -962,7 +981,9 @@ The [GetCustomCursor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetCustomCursor) + {% previewsample "https://blazorplayground.syncfusion.com/embed/VNVICjNmfaRXpFsy?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/Methods/GetCustomCursor) ## How to Use BeginUpdate and EndUpdateAsync The [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) method temporarily suspends visual updates to the diagram until the [EndUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdateAsync) method is called. This allows for multiple changes to be made efficiently without triggering unnecessary redraws. When EndUpdateAsync() is invoked, it releases the lock imposed by BeginUpdate(Boolean), resulting in an immediate visual refresh that reflects all accumulated changes to the diagram. @@ -971,14 +992,13 @@ The [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons + + - - - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -1043,10 +1063,12 @@ The [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/BeginAndEndUpdate) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByCXZmzadbzxhm?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/Methods/BeginAndEndUpdate) ## How to Unselect Diagram Elements -The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_UnSelect_Syncfusion_Blazor_Diagram_IDiagramObject_) method is utilized to deselect previously selected objects within the diagram. This functionality allows for precise control over the selection state of diagram elements. +The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_UnSelect_Syncfusion_Blazor_Diagram_IDiagramObject_) method deselects a specific previously selected object. This functionality allows for precise control over selection state of diagram elements. ```cshtml @using Syncfusion.Blazor.Diagram @@ -1062,6 +1084,10 @@ The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.S } +
    + +
    +
    @@ -1069,10 +1095,6 @@ The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.S
    -
    - -
    - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -1134,11 +1156,13 @@ The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.S } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/UnSelectMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSCjNQfYGbfwMc?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/Methods/UnSelectMethod) ## How to Clone the Diagram -The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clone) method allows you to create an exact copy of the diagram, including all its nodes, connectors, and properties. This is useful for duplicating diagrams or creating backup versions. +The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clone) method creates an exact copy of the diagram, including all its nodes, connectors, and properties. This is useful for duplicating diagrams or creating backup versions. ```cshtml @using Syncfusion.Blazor.Diagram @@ -1154,6 +1178,10 @@ The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } +
    + +
    +
    @@ -1161,10 +1189,6 @@ The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
    -
    - -
    - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -1226,7 +1250,9 @@ The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/CloneMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBoWXXmTEFbzmUx?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/Methods/CloneMethod) ## How to Get Custom Tool The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetCustomTool) method enables users to create and implement custom tools, extending the functionality of the diagram component. This powerful feature allows for tailored interactions and specialized behaviors within the diagram. @@ -1428,7 +1454,9 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } } ``` - You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetCustomTool) + {% previewsample "https://blazorplayground.syncfusion.com/embed/VXrIMDjQoNXUmgcU?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/Methods/GetCustomTool) ## How to Zoom and Pan Diagrams @@ -1529,7 +1557,9 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ZoomAndPan) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVIiXDwyttPZhfR?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/Methods/ZoomAndPan) ## How to Refresh the Data Source The [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RefreshDataSourceAsync) method dynamically updates the diagram layout to reflect any changes made to the underlying data source. This ensures that the visual representation remains synchronized with the most current data. @@ -1610,7 +1640,9 @@ The [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/RefereshDataSource) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhSCXtQSjiSpCit?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/Methods/RefereshDataSource) ## How to Get the Parent of Object @@ -1660,7 +1692,9 @@ The following code illustrates how to set background color for node. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetParent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhyMZZcyNVMWKLP?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/Methods/GetParent) ## How to Enable the Chunk Message @@ -1710,5 +1744,6 @@ Here is an example demonstrating how to use the [EnableChunkMessages](https://he } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXreCjjGeZLyqIGr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ChunkMessage) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ChunkMessage) diff --git a/blazor/diagram/interaction.md b/blazor/diagram/interaction.md index 2dc22db8f3..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) @@ -1084,6 +1109,8 @@ The following table illustrates those commands with the associated key values. * [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-diagram) +* [How to Drag and Drop Node in a Layout in Blazor Diagram](https://support.syncfusion.com/kb/article/16307/how-to-drag-and-drop-node-in-a-layout-in-blazor-diagram) + * [How to Drag and Drop of Listbox Element into Blazor Diagram Control](https://support.syncfusion.com/kb/article/17895/how-to-drag-and-drop-of-listbox-element-into-blazor-diagram-control) * [How to Create a Blazor Application for Dragging and Dropping Symbols from a Palette into Multiple Diagrams](https://support.syncfusion.com/kb/article/18717/how-to-create-a-blazor-application-for-dragging-and-dropping-symbols-from-a-palette-into-multiple-diagrams) diff --git a/blazor/diagram/overview-component.md b/blazor/diagram/overview-component.md index 9d3fc31dde..3c60d4ebc9 100644 --- a/blazor/diagram/overview-component.md +++ b/blazor/diagram/overview-component.md @@ -99,7 +99,9 @@ public List DataSource = new List() }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Overview/Overview) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVoitXvqgxOfTzQ?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/Overview/Overview) ## How to Zoom and Pan the Diagram @@ -112,13 +114,13 @@ The SfDiagramOverviewComponent displays a viewport of the diagram, highlighted b These interactions provide a seamless way to explore and navigate complex diagrams, enhancing the overall user experience and improving diagram comprehension. -The following image shows how the diagram is zoomed/panned with an overview. +The following image shows how the diagram is zoomed or panned with an overview. ![Overview Interaction](images/Overview.gif) ## How to Enable or Disable Overview Functionalities Using Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.html#Syncfusion_Blazor_Diagram_Overview_SfDiagramOverviewComponent_Constraints) property of the SfDiagramOverviewComponent allows you to enable or disable the following functionalities. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.html#Syncfusion_Blazor_Diagram_Overview_SfDiagramOverviewComponent_Constraints) property of the SfDiagramOverviewComponent allows enable or disable the following functionalities. * None * Zoom @@ -198,7 +200,9 @@ The following example shows how to disable the zoom constraint from the default } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Overview/OverviewConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIstXbqgwxdWkw?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/Overview/OverviewConstraints) ## See also diff --git a/blazor/diagram/swimlane/phase.md b/blazor/diagram/swimlane/phase.md index b04a75572d..f3dd5aa0fb 100644 --- a/blazor/diagram/swimlane/phase.md +++ b/blazor/diagram/swimlane/phase.md @@ -9,15 +9,15 @@ documentation: ug # Phase in Blazor Diagram Component - The [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) is a subprocess that splits each lane either horizontally or vertically based on the swimlane orientation. Multiple phases can be added to the swimlane. + The [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) divides each lane horizontally or vertically based on the swimlane orientation. Multiple phases can be added to a swimlane. ## How to Create an Empty Phase -You can create a [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) and add it to the [Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection of the Swimlane. +Create a [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) and add it to the [Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection of the swimlane. ->Note: For Horizontal Swimlane, you must set the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) of the Phase. For Vertical Swimlane, you must set the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) of the Phase. +>Note: For a horizontal swimlane, set the phase [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width). For a vertical swimlane, set the phase [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height). -The following code example explains how to add a phase at the swimlane. +The following code example explains how to add a phase to a swimlane. ```cshtml @using Syncfusion.Blazor.Diagram @@ -83,15 +83,15 @@ The following code example explains how to add a phase at the swimlane. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLoWZDwgIxDznSV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Phse](Swimlane-images/Swimlane_Phase.PNG). - -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseCreation). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseCreation). +![Phase](Swimlane-images/Swimlane_Phase.PNG). ## How to Dynamically Add and Remove Phase in Swimlane - You can dynamically add or remove a phase at runtime by using the `Add` and `Remove` methods of the [Swimlane.Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection. The following code example explains how to add and remove phases at run time. + Add or remove a phase at runtime by using the `Add` and `Remove` methods of the [Swimlane.Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection. The following code example shows how to add and remove phases at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -184,18 +184,19 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXroWXXQAIHdICLs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Phase Add Remove](Swimlane-images/Phase_Add_Remove.gif) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/AddRemovePhaseAtRuntime). -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/AddRemovePhaseAtRuntime). +![Phase Add Remove](Swimlane-images/Phase_Add_Remove.gif) ## How to Create and Customize the Phase Header -* The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Header) property of the Phase allows you to describe the phase textually and customize the appearance of the description. -* The size of the Phase header can be controlled by using the header's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties. -* The appearance of the Phase header can be customized by using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. +* The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Header) property describes the phase and provides appearance customization. +* Control the header size using [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties. +* Customize header appearance using [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. -The following code example explains how to define a Phase header and its customization. +The following code example shows how to define and customize a phase header. ```cshtml @using Syncfusion.Blazor.Diagram @@ -258,13 +259,15 @@ The following code example explains how to define a Phase header and its customi } } ``` -![Phase Header](Swimlane-images/Swimlane_Phase_Header.PNG). +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVICNNmAenacKHW?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/Swimlanes/Phase/PhaseHeader). -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseHeader). +![Phase Header](Swimlane-images/Swimlane_Phase_Header.PNG). -The Phase header annotations also support templates. You can define HTML content at the tag level and specify the use of a template with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you want to define a separate template for each phase, differentiate the annotation by using the ID property. +Phase header annotations also support templates. Define HTML content at the tag level and specify the use of a template with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. To assign different templates per phase, differentiate annotations by the ID property. -The following code example explains how to define a Phase header annotation template. +The following code example explains how to define a phase header annotation template. ```cshtml @using Syncfusion.Blazor.Diagram @@ -338,24 +341,26 @@ The following code example explains how to define a Phase header annotation temp } } ``` -![Phase Header](Swimlane-images/Swimlane_Phase_Header_Template.PNG). +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLSMjNcKovfbQWR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseHeaderTemplate). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseHeaderTemplate). + +![Phase Header](Swimlane-images/Swimlane_Phase_Header_Template.PNG). ## How to Set the Orientation of a Phase -The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Orientation) property in the Symbol Palette allows you to define whether a phase is displayed horizontally or vertically. This property is particularly relevant when the phase is part of a SymbolPalette. +The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Orientation) property in the symbol palette defines whether a phase is displayed horizontally or vertically. This setting is particularly relevant when the phase is part of a symbol palette. - * Horizontal Orientation: The phase will be aligned horizontally. - * Vertical Orientation: The phase will be aligned vertically. +* Horizontal orientation: The phase is aligned horizontally. +* Vertical orientation: The phase is aligned vertically. -Below is an example demonstrating how to set the orientation for phases in a SfSymbolPaletteComponent: +Below is an example demonstrating how to set the orientation for phases in an SfSymbolPaletteComponent: ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
    -
    +
    @@ -398,25 +403,27 @@ Below is an example demonstrating how to set the orientation for phases in a SfS } } ``` -![Phse](Swimlane-images/PhaseOrientation.PNG). +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhSWDDwUHjXBppC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseOrientation). +![Phase](Swimlane-images/PhaseOrientation.PNG). + ## How to Select and Resize Phase Header - * You can select the individual phase header by clicking on the header twice. On the first click, you can select the respective phase. + * Select an individual phase header by clicking the header twice. The first click selects the phase, and the second click selects the header. - * You can resize the individual phase header. While resizing the phase, it will maintain a 20px distances from Lane children. + * Resize an individual phase header. While resizing a phase, a 20 pixels distance is maintained from the lane children. - * When an element is resized, the [SizeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanging) and [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanged) events get triggered. + * When an element is resized, the [SizeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanging) and [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanged) events are triggered. - The following image shows how to select and resize the phase header. +The following image shows how to select and resize the phase header. -![Header Select and Resize](Swimlane-images/Header_Selection_Resize.gif). +![Header Select and Resize](Swimlane-images/Header_Selection_Resize.gif) ## How to Edit Phase Header -The diagram provides support for editing phase headers at runtime. You can achieve header editing by using the double-click event. Double-clicking the header label enables the editing of that specific header. +Phase headers support runtime editing. Double-click the header label to enable in-place editing for that specific header. The following image shows how to edit the phase header. @@ -431,7 +438,7 @@ Phase can be selected by clicking (tapping) the header of the phase. ### How to Resize a Phase -* The phase can be resized by using its selector. -* You must click the phase header to enable the phase selection. -* Once the phase is resized, the lane size will be updated automatically. +* Resize the phase by using the selector. +* Click the phase header to enable phase selection. +* After resizing a phase, the lane updates its size automatically. diff --git a/blazor/diagram/swimlane/swimlane-palette.md b/blazor/diagram/swimlane/swimlane-palette.md index 1e53403763..d3c22a9111 100644 --- a/blazor/diagram/swimlane/swimlane-palette.md +++ b/blazor/diagram/swimlane/swimlane-palette.md @@ -8,20 +8,20 @@ documentation: ug --- # Swimlane-Palette in Blazor Diagram Component - Diagram provides support to add lanes and phases to the symbol palette. +Diagram supports adding lanes and phases to the symbol palette. ## How to Add Lanes and Phases to the Symbol Palette Swimlane elements such as [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) and [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) can be used to visualize the symbols. -The following code sample shows how to add the lanes and phases to palette. +The following code shows how to add lanes and phases to a palette. ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
    -
    +
    @@ -32,17 +32,17 @@ The following code sample shows how to add the lanes and phases to palette. @code { - //Reference the symbolpreview. + //Reference the symbolnpreview. DiagramSize SymbolPreview; //Define symbol margin. SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; SfSymbolPaletteComponent symbolpalette; - //Define palattes collection. + //Define palettes collection. DiagramObjectCollection Palettes = new DiagramObjectCollection(); - // Defines palette's swimlane-shape collection. + // Define the palette's swimlane-shape collection. DiagramObjectCollection SwimlaneNodes = new DiagramObjectCollection(); protected override void OnInitialized() @@ -56,7 +56,7 @@ The following code sample shows how to add the lanes and phases to palette. SwimlaneNodes = new DiagramObjectCollection(); - //create a horizontal lane. + //Create a horizontal lane. Lane horizontalLane = new Lane() { ID = "HorizontalSwimlane", @@ -73,7 +73,7 @@ The following code sample shows how to add the lanes and phases to palette. }, }; - //create a vertical lane. + //Create a vertical lane. Lane verticalLane = new Lane() { ID = "VerticalSwimlane", @@ -90,10 +90,10 @@ The following code sample shows how to add the lanes and phases to palette. }, }; - //create a horizontal phase. + //Create a horizontal phase. Phase horizontalPhase = new Phase() { ID = "HorizontalPhase", Orientation = Orientation.Horizontal, Width = 80, Height = 1, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } }; - //create a vertical phase. + //Create a vertical phase. Phase verticalPhase = new Phase() { ID = "VerticalPhase", Orientation = Orientation.Vertical, Width = 1, Height = 80, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } }; SwimlaneNodes = new DiagramObjectCollection() @@ -111,18 +111,18 @@ The following code sample shows how to add the lanes and phases to palette. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVeWZXcKcyuCrTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Swimlane SymbolPalette Shapes](Swimlane-images/Swimlane_SymbolPalette.PNG) - -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlanePalette) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlanePalette) +![Swimlane SymbolPalette Shapes](Swimlane-images/Swimlane_SymbolPalette.PNG) ## How to Drag and Drop Swimlane Shapes from the Symbol Palette -* Drag and drop support for swimlane shapes is provided. -* When you drag and drop a lane shape, if the diagram already contains a swimlane with the same orientation, the lane will be added and stacked inside the swimlane based on the order. Otherwise, it will be added as a new swimlane. +* Drag-and-drop is supported for swimlane symbols. +* When a lane symbol is dropped, if the diagram already contains a swimlane with the same orientation, the lane is added and stacked inside the swimlane based on order. Otherwise, a new swimlane is created. * A phase will only drop on a swimlane shape with the same orientation. -The following image shows how to drag a symbol from the palette. +The following image shows dragging a symbol from the palette. ![Drag Symbol from Palette](Swimlane-images/Symbol_palette.gif) diff --git a/blazor/diagram/swimlane/swimlane.md b/blazor/diagram/swimlane/swimlane.md index 863870da9d..cca6599b33 100644 --- a/blazor/diagram/swimlane/swimlane.md +++ b/blazor/diagram/swimlane/swimlane.md @@ -13,14 +13,14 @@ A [Swimlane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swi ![Swimlane Content](./Swimlane-images/Swimlane_Default.PNG) -## How to Create a swimlane -A swimlane can be created and added to the diagram, either programmatically or interactively. +## How to Create a Swimlane +A swimlane can be created and added to the diagram either programmatically or interactively. ### How to Add Swimlane Through Swimlanes Collection To create a swimlane, you have to define the swimlane object and add it to the [Swimlanes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Swimlanes) collection of the diagram. ->Note: By default, if you create a swimlane, one lane and phase will be added. +>Note: By default, when a swimlane is created, one lane and one phase are added. ```cshtml @using Syncfusion.Blazor.Diagram @@ -63,22 +63,23 @@ To create a swimlane, you have to define the swimlane object and add it to the [ } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIiDNcgwRwLkFg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ->**Note:** Swimlane's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. +>**Note:** Swimlane ID should not start with numbers or special characters and should not contain special characters such as underscore(_) or spaces. -Now, the swimlane will be as follows. +The swimlane appears as follows. ![Add swimlane](Swimlane-images/Swimlane_Empty.PNG) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneCreation/SwimlaneCreation). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneCreation/SwimlaneCreation). ->Note: We can't add swimlane elements such as phase, lane, and lane children at runtime by using the [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method. +>Note: Swimlane elements (phase, lane, and lane children) cannot be added at runtime using [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method. ### How to Create and Customize the Swimlane Header -The Swimlane Header was the primary element for swimlanes. The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Header) property of swimlane allows you to define its textual description and to customize its appearance. +The swimlane header is the primary interactive element for a swimlane. The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Header) property of swimlane allows you to define its textual description and to customize its appearance. ->Note: By using this header, swimlane interactions such as selection, dragging, and other functionalities can be performed. +>Note: The header supports interaction such as selection, dragging, and related actions. The following code example explains how to define the swimlane header. @@ -131,16 +132,17 @@ The following code example explains how to define the swimlane header. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLSsjjwUwQKDpUj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Swimlane Header](Swimlane-images/Swimlane_Header.PNG) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeader) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeader) +![Swimlane Header](Swimlane-images/Swimlane_Header.PNG) ### How to Customize Swimlane Header -The height and width of the swimlane header can be customized with the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties of the swimlane header. You can set the fill color of the header by using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. +Customize the header height and width using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties of the swimlane header. Set the fill color of the header by using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. -The following code example explains how to customize the swimlane header. +The following code example explains how to customize a swimlane header. ```cshtml @using Syncfusion.Blazor.Diagram @@ -171,7 +173,7 @@ The following code example explains how to customize the swimlane header. } }, OffsetX = 400, OffsetY = 200, Height = 120, Width = 450, - } + }; // Add swimlane. SwimlaneCollections.Add(swimlane); } @@ -191,12 +193,13 @@ The following code example explains how to customize the swimlane header. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLysXtQgmbodbwe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Swimlane Header Customization](Swimlane-images/Swimlane_Header_Customization.PNG) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeaderCustomization) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeaderCustomization) +![Swimlane Header Customization](Swimlane-images/Swimlane_Header_Customization.PNG) -The Swimlane header annotations also support templates. You can define HTML content at the tag level and specify the use of a template with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you want to define a separate template for each Swimlane, differentiate the annotation by using the ID property. +Swimlane header annotations also support templates. Define HTML content at the tag level and enable templating with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. To assign different templates per swimlane, differentiate annotations by the ID property. The following code example explains how to define a Swimlane header annotation template. @@ -263,21 +266,23 @@ The following code example explains how to define a Swimlane header annotation t } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeaderTemplate) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtreWDXmqwuTgXyU?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/Swimlanes/SwimlaneHeader/SwimlaneHeaderTemplate) ![Swimlane Header Customization](Swimlane-images/Swimlane_Header_Template.PNG) ### How to Edit Header -The diagram provides support to edit swimlane headers at runtime. You can achieve the header editing by double-clicking on it. Double-clicking the header label will enable the editing mode. +Edit swimlane headers at runtime by double-clicking the header label to enable in-place editing. ![Header Editing](Swimlane-images/Header_Edit.gif). ## Orientation -The orientation of the swimlane can be customized using the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Orientation) property of the swimlane. +Customize swimlane orientation using the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Orientation) property. ->Note: The swimlane orientation is set to horizontal by default. +>Note: The default swimlane orientation is Horizontal. The following code example explains how to set the orientation of the swimlane. @@ -304,8 +309,9 @@ The following code example explains how to set the orientation of the swimlane. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBoWDNwUPZKWhnw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneCreation/SwimlaneOrientation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneCreation/SwimlaneOrientation) | Orientation | Output | |---|---| @@ -315,11 +321,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## How to set spacing between lane or phase header and its children -The diagram allows you to define custom spacing between a lane or phase header and its child elements (such as nodes, connectors, or groups) using the [ChildrenSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_ChildrenSpacing) property. This property takes a DiagramThickness object to define spacing on all four sides: Top, Bottom, Left, and Right. +Define custom spacing between a lane or phase header and its child elements (nodes, connectors, or groups) using the [ChildrenSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_ChildrenSpacing) property, which accepts a `DiagramThickness` with `Top`, `Bottom`, `Left`, and `Right` values. -By default, the ChildrenSpacing value is 20 pixels on all sides. You can modify this value to control the padding between the header and its children within the swimlane layout. +By default, `ChildrenSpacing` is 20 pixels on all sides. Adjust these values to control padding between the header and its children within the `Swimlane`. -The following example shows how to apply custom spacing using the ChildrenSpacing property. +The following example shows how to apply custom spacing using `ChildrenSpacing` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -418,20 +424,21 @@ The following example shows how to apply custom spacing using the ChildrenSpacin } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrosXjmqFjxamFa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/ChildrenSpacingProperty) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/ChildrenSpacingProperty) ## Interaction ### How to Select the Swimlane -Swimlane can be selected by clicking (tapping) the header of the swimlane. Also, it can be selected at runtime by using 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__) method and clear the selection in the diagram by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) +Select a `Swimlane` by clicking (tapping) the header of the swimlane. Also, it can be selected at runtime by using 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__) method and clear the selection in the diagram by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) ### How to Drag the Swimlane -* Swimlane object can be dragged by clicking and dragging the header of the swimlane. +* Drag a swimlane by clicking and dragging its header. -* When you drag the elements in the diagram, the [PositionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanging) and [PositionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanged) events get triggered and we can do customization on those events. +* During drag, the [PositionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanging) and [PositionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanged) events are raised; handle these events to implement pre/post-move logic. -![Drag Node](Swimlane-images/Swimlane_Select_Drag.gif) \ No newline at end of file +![Dragging a swimlane by its header](Swimlane-images/Swimlane_Select_Drag.gif) \ No newline at end of file diff --git a/blazor/diagram/symbol-palette/customization.md b/blazor/diagram/symbol-palette/customization.md index 1612423555..8b6a7a7783 100644 --- a/blazor/diagram/symbol-palette/customization.md +++ b/blazor/diagram/symbol-palette/customization.md @@ -9,17 +9,17 @@ documentation: ug # Symbol Palette Appearance in Blazor Diagram Component -The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component showcases a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing a set of predefined nodes and connectors. This powerful feature enables users to easily drag and drop these elements into the diagram, streamlining the process of creating and modifying complex diagrams. +The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component showcases a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing a set of predefined nodes and connectors. This feature enables users to drag and drop these elements into the diagram, streamlining the process of creating and modifying complex diagrams. ## How to Customize the Palette Header -Palettes can be customized with header texts and expansion controls for better organization and user experience. +Palettes can be customized with header text and expansion controls for better organization and user experience. -The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_Title) property allows you to set a descriptive header text for each palette, providing clear identification of its contents. +The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_Title) property sets a descriptive header text for each palette to clearly identify its contents. -The [IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_IsExpanded) property enables you to control the initial state of a palette, determining whether its items are visible (expanded) or hidden (collapsed) when the Symbol Palette is first loaded. +The [IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_IsExpanded) property controls the initial state of a palette, determining whether its items are visible (expanded) or hidden (collapsed) when the symbol palette is first loaded. -The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_IconCss) property of the `Palette` allows you to add CSS class values to customize the appearance of icons in the palette header. By assigning CSS classes to this property, you can apply custom styling, colors, fonts, and other visual modifications to enhance the palette header icons and symbol content presentation. +The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_IconCss) property of `Palette` applies class values to customize the appearance of icons in the palette header. Assign CSS classes to to control icon styling, colors, fonts, and other visual modifications to enhance the palette header icons and symbol content presentation. The following code illustrates how to change the Title and IsExpanded properties at runtime. @@ -33,11 +33,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## How to Customize Symbol Size -The size of individual symbols in the symbol palette can be customized. The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the SfSymbolPaletteComponent allow you to define the dimensions of the symbols. +The size of individual symbols in the symbol palette can be customized. The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the `SfSymbolPaletteComponent` define the symbol dimensions. -Furthermore, you have the flexibility to dynamically adjust the size of the symbols at runtime, providing a more interactive user experience. +Symbol sizes can also be adjusted dynamically at runtime to support interactive scenarios. -The following code example illustrates how to change the size of a symbol and how to update the size at runtime. +The following code example illustrates how to change the size of a symbol and update the size at runtime. ```csharp @using Syncfusion.Blazor.Diagram @@ -49,7 +49,7 @@ The following code example illustrates how to change the size of a symbol and ho
    -
    +
    @@ -116,14 +116,16 @@ The following code example illustrates how to change the size of a symbol and ho } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/CustomSymbolSize) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtheijNGKlrjjZXe?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/SymbolPalette/CustomSymbolSize) -The [SymbolMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolMargin) property allows you to define the space around individual symbols in the palette, outside of their defined borders. This margin creates visual separation between symbols, enhancing the overall layout and appearance of the Symbol Palette. +The [SymbolMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolMargin) property defines the space around individual symbols in the palette, outside their borders. This margin creates visual separation between symbols, enhancing the overall layout and appearance of the Symbol Palette. ## How to Customize the Symbol Drag Preview -The symbol preview size of palette items can be customized using the [SymbolDragPreviewSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolDiagramPreviewSize) property. This property allows you to define a uniform preview size for all symbol palette items. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) properties of SymbolDragPreviewSize enable you to specify the dimensions of the preview for each symbol in the palette. +The symbol preview size of palette items can be customized using the [SymbolDragPreviewSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolDiagramPreviewSize) property. This property defines a uniform preview size for all symbol palette. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) specify the dimensions of the preview for each symbol in the palette. The following code example illustrates how to change the preview size of a palette item. @@ -204,22 +206,24 @@ The following code example illustrates how to change the preview size of a palet } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPreview). +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVIiDXGAbLGlnJz?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/SymbolPalette/SymbolPreview). ![SymbolPreview in Blazor Diagram](../images/blazor-diagram-symbol-preview.gif) ## How to Restrict Symbol Dragging in a Palette -The [AllowDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AllowDrag) property of `SfSymbolPaletteComponent` enables or disables the ability to drag symbols from the palette. When set to `true`, users can drag symbols; when `false`, dragging is disabled. This property provides control over symbol interaction within the Symbol Palette component. +The [AllowDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AllowDrag) property of `SfSymbolPaletteComponent` enables or disables dragging symbols from the palette. When set to **true**, users can drag symbols; when **false**, dragging is disabled. This property provides control over symbol interaction within the `SymbolPaletteComponent`. ## How to get notification when a symbol is selected -The [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SelectionChanged) event of the `SfSymbolPaletteComponent` is triggered when a symbol in the symbol palette is selected or deselected. This event provides an opportunity to perform custom actions or track symbol selection changes within the palette. The `SelectionChanged` event uses [PaletteSelectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html) as its event argument, which provides access to both the previously selected symbol and the newly selected symbol through the following properties: +The [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SelectionChanged) event of `SfSymbolPaletteComponent` is triggered when a symbol in the symbol palette is selected or deselected. Use this event to perform custom actions or track symbol selection changes within the palette. The `SelectionChanged` event uses [PaletteSelectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html) as its event argument, which provides access to both the previously selected symbol and the newly selected symbol through the following properties: -- [OldValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html#Syncfusion_Blazor_Diagram_SymbolPalette_PaletteSelectionChangedEventArgs_OldValue): Contains the ID of the previously selected symbol -- [NewValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html#Syncfusion_Blazor_Diagram_SymbolPalette_PaletteSelectionChangedEventArgs_NewValue): Contains the ID of the newly selected symbol +- [OldValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html#Syncfusion_Blazor_Diagram_SymbolPalette_PaletteSelectionChangedEventArgs_OldValue):The ID of the previously selected symbol +- [NewValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html#Syncfusion_Blazor_Diagram_SymbolPalette_PaletteSelectionChangedEventArgs_NewValue): The ID of the newly selected symbol -This allows you to track selection changes and perform specific actions based on which symbols are being selected or deselected. +This allows tracking selection changes and perform specific actions based on which symbols are being selected or deselected. The following code example illustrates how to use the selectionChanged event. @@ -309,15 +313,17 @@ The following code example illustrates how to use the selectionChanged event. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SelectionChanged). +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIsNXQqFgvvztI?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/SymbolPalette/SelectionChanged). ## How to get notification for expanding the palette -The [Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Expanding) event of the `SfSymbolPaletteComponent` is triggered just before an item in the symbol palette is expanded or collapsed. This event provides an opportunity to perform custom actions or modifications before the expansion/collapse state changes. +The [Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Expanding) event of `SfSymbolPaletteComponent` is triggered just before a palette item is expanded or collapsed. Use this event to perform custom actions or modify state before expansion or collapse occurs. ## How to Expand Single or Multiple Palette -The [PaletteExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_PaletteExpandMode) property of `SfSymbolPaletteComponent` determines how multiple palettes can be expanded within the symbol palette. +The [PaletteExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_PaletteExpandMode) property of `SfSymbolPaletteComponent` determines how palettes expand within the symbol palette. * When set to `Multiple`, clicking on a collapsed palette icon expands that specific palette while preserving the state of other palettes. This allows multiple palettes to be expanded simultaneously. * When set to `Single`, clicking on a collapsed palette icon expands that palette while automatically collapsing all other palettes. This ensures only one palette is expanded at a time. @@ -333,9 +339,9 @@ The [PaletteExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ## How to Enable or Disable Animation in Symbol Palette -The symbol palette offers the ability to enable or disable animation when expanding and collapsing panels. This feature is controlled through the [EnableAnimation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableAnimation) property. By default, EnableAnimation is set to true. +The symbol palette can enable or disable animation when expanding and collapsing panels using the [EnableAnimation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableAnimation) property. By default, `EnableAnimation` is **true**. -When animation is enabled, the following effects are applied by default: +When animation is enabled, the following default effects are applied: * Expand Animation: The panel expands with a SlideDown effect. * Collapse Animation: The panel collapses with a SlideUp effect. @@ -400,11 +406,13 @@ These default settings can be customized to enhance the user experience and matc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AnimationSupport) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZreWZtmUlfeBbkl?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/SymbolPalette/AnimationSupport) ## How to Add Symbol Descriptions to Palette Symbols -The diagram component offers support for adding descriptive text below each symbol in the palette. This enhanced visual representation provides additional details about each symbol, improving user understanding and usability. You can customize the height and width of the symbol description individually to suit your needs. To add or modify symbol descriptions at runtime, utilize the [GetSymbolInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) method provided by the SfSymbolPaletteComponent. +The diagram component supports adding descriptive text below each symbol in the palette. This visual enhancement provides additional details about each symbol, improving user understanding and usability. The height and width of the symbol description can be customized individually. To add or modify symbol descriptions at runtime, use the [GetSymbolInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) method provided by the SfSymbolPaletteComponent. The following code is an example to set a symbol description for symbols in the palette. ```csharp @@ -471,7 +479,9 @@ The following code is an example to set a symbol description for symbols in the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolDescription) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLIMtZwgbSZfWjG?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/SymbolPalette/SymbolDescription) ![Symbol with Description in Blazor Diagram](../images/blazor-diagram-symbol-description.png) @@ -481,39 +491,39 @@ Customize the appearance of symbol descriptions in the symbol palette by adjusti ### SymbolInfo Properties -[Fit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Fit): Represents whether the symbol can fit into the size that is defined by the symbol palette. When set to `true`, the symbol will be resized to fit within the dimensions specified by the symbol palette; otherwise `false` maintains the symbol's original size. The default value is `false`. +[Fit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Fit): Indicates whether the symbol can fit into the size defined by the symbol palette. When set to **true**, the symbol is resized to fit within the dimensions specified by the symbol palette; otherwise **false** maintains the symbol's original size. Default is **false**. -[Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Width): Defines the width of the symbol in the palette. This property allows you to control the horizontal space allocated to each symbol. +[Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Width): Defines the symbol width in the palette. This property control the horizontal space allocated to each symbol. -[Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Height): Defines the height of the symbol in the palette. This property allows you to control the vertical space allocated to each symbol. +[Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Height): Defines the symbol height in the palette. This property control the vertical space allocated to each symbol. ### SymbolDescription Properties -[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolDescription.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolDescription_Text): Represents the textual information to be displayed below the symbol in the palette. This is the actual content that users will see as the symbol's description. +[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolDescription.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolDescription_Text): The text displayed below the symbol in the palette. This is the actual content that users will see as the symbol's description. -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolDescription.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolDescription_Margin): Gets or sets the margin around the text rendered in the symbol palette. This property uses `DiagramThickness` to define spacing on all sides (Top, Bottom, Left, Right) of the description text, improving the visual layout and readability. +[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolDescription.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolDescription_Margin): Margin around the description text using `DiagramThickness` (Top, Bottom, Left, Right). ### TextStyle Properties -[Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color): Defines the color of the symbol description text, enhancing readability and visual appeal. +[Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color): Color of the symbol description text. -[Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill): Sets the background color of the symbol description, improving contrast and highlighting important information. +[Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill): Background color of the symbol description container. -[FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize): Adjusts the font size of the symbol description text, ensuring optimal visibility and hierarchy. +[FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize): Font size of the description text. -[FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily): Specifies the font family of the symbol description text, maintaining consistency with your application's typography. +[FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily): Font family for the description text. -[Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold): Toggles bold formatting for the symbol description text, emphasizing key information. +[Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold): Enables bold formatting. -[Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic): Applies italic formatting to the symbol description text, useful for creating visual distinctions. +[Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic): Enables italic formatting. -[TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration): Adds decorative elements to the symbol description text, such as underline or strikethrough. +[TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration): Adds decorative elements such as underline or strikethrough. -[TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping): Controls how the symbol description text wraps within its container, optimizing space utilization. +[TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping): Controls text wrapping within its container. -[TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow): Defines the behavior when the symbol description text exceeds its container, ensuring all content is accessible. +[TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow): Controls how overflowing text is handled within its container. -By fine-tuning these properties, you can create visually appealing and user-friendly symbol descriptions that seamlessly integrate with your Blazor application's design and enhance the overall user experience. +By fine-tuning these properties, visually appealing and user-friendly symbol descriptions that seamlessly integrate with your Blazor application's design and enhance the overall user experience. The following code is an example to change the style of a symbol description for symbols in the palette. @@ -523,8 +533,8 @@ The following code is an example to change the style of a symbol description for @using Syncfusion.Blazor.Diagram.SymbolPalette
    -
    -
    +
    +
    @@ -595,20 +605,22 @@ The following code is an example to change the style of a symbol description for } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/DescriptionStyle) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthSsjZcKbPsYmTl?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/SymbolPalette/DescriptionStyle) ![Style of the Symbol Description in Blazor Diagram](../images/blazor-diagram-symbol-description-style.png) ## How to Provide Tooltip for Symbols in Symbol Palette -The Symbol Palette offers tooltip support, displaying informative text when the mouse hovers over any node or connector. These tooltips can be customized individually for each symbol within the palette, enhancing user experience and providing additional context for the available elements. +The symbol palette supports tooltips, displaying informative text when hovering over a node or connector. Tooltips can be customized individually for each symbol within the palette, enhancing user experience and providing additional context for the available elements. ### How to Enable or Disable Default Tooltip for Symbols in Symbol Palette -By default, the symbol [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) is displayed as a tooltip when hovering over a symbol in the Symbol Palette. To disable this default tooltip, you can use the [`ShowTooltip`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_ShowToolTip) property within the [`GetSymbolInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) method. The `ShowTooltip` property is set to **true** by default, which enables the tooltip. +By default, the symbol [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) is displayed as a tooltip when hovering over a symbol in the Symbol Palette. To disable this default tooltip, use the [`ShowTooltip`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_ShowToolTip) property within the [`GetSymbolInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) method. `ShowTooltip` is **true** by default. -The following code example demonstrates how to enable or disable the default tooltip for shapes in the Symbol Palette. +The following code example demonstrates how to enable or disable the default tooltip for shapes in the symbol palette. ```cshtml @using Syncfusion.Blazor.Diagram @@ -785,16 +797,17 @@ The following code example demonstrates how to enable or disable the default too } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLSitjwgOVJiwfZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/ShowToolTip). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/ShowToolTip). ![EnableDisableTooltip](../images/defaultShowToolTiptooltip.gif) ->**Note:** This `ShowToolTip` property is effective only when tooltip constraints are disabled for the symbol palette element. +>**Note:** The `ShowToolTip` property is effective only when tooltip constraints are disabled for the symbol palette element. ### How to Provide Custom Tooltips for Symbols -You can enhance the symbol palette by providing custom tooltips for symbols. This is achieved by assigning custom tooltip content to the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Tooltip) property of nodes and connectors. To enable these custom tooltips for symbols in the symbol palette, set the Tooltip constraints for both nodes and connectors. Once configured, these custom tooltips will be displayed when hovering over the corresponding symbols in the symbol palette, offering users more informative and context-specific details about each symbol. +Enhance the symbol palette by providing custom tooltips for symbols. Assign custom tooltip content to the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Tooltip) property of nodes and connectors, and enable Tooltip constraints for those elements. Custom tooltips are then displayed when hovering over the corresponding symbols in the symbol palette, offering users more informative and context-specific details about each symbol. The following code example illustrates how to provide the custom tooltip for nodes. @@ -803,7 +816,7 @@ The following code example illustrates how to provide the custom tooltip for nod @using Syncfusion.Blazor.Diagram.SymbolPalette @using Syncfusion.Blazor.Popups
    -
    +
    @@ -861,13 +874,15 @@ The following code example illustrates how to provide the custom tooltip for nod } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLIsZDQAOTMXzzj?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/SymbolPalette/SymbolPaletteTooltip) ![Tooltip in symbol palette](../images/symboltooltip.png) ## How to Provide Different Tooltip for Symbols in the Palette and Diagram Elements. -When you define custom tooltip to the symbol then same tooltip will be displayed for both symbol and dropped node in the diagram canvas. To provide different tooltip for symbols in the symbol palette and the dropped node in the diagram canvas, then DragDrop event can be utilized. The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a symbol is dragged and dropped from the symbol palette to the drawing area. In the Drop event, you can define the new tooltip for the dropped node by assigning new tooltip content to the Tooltip property of the node. The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas. +When a custom tooltip is defined for a symbol, the same tooltip is applied to the symbol and to the node after dropping it on the diagram canvas. To provide different tooltip for symbols in the symbol palette and for dropped nodes, use the [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a symbol is dragged and dropped from the symbol palette to the drawing area. In the Drop event, define the new tooltip for the dropped node by assigning new tooltip content to the Tooltip property of the node. The following code snippet will demonstrate how to define two different tooltip for symbol in the palette and dropped node on the canvas. ```csharp @using Syncfusion.Blazor.Diagram @@ -959,22 +974,25 @@ When you define custom tooltip to the symbol then same tooltip will be displayed } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNheiDXwAkzRzMKU?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/SymbolPalette/SymbolPaletteTooltip) ![Tooltip in symbol palette](../images/differenttooltip.gif) ### How to Provide Tooltip Template for Symbols -You can provide a custom template as a tooltip for symbols in the symbol palette using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolPaletteTemplates_TooltipTemplate) property of the `SfDiagramComponent`. Once the tooltip template is defined, enable custom tooltips for symbols in the symbol palette by setting the Tooltip constraints for nodes and connectors. This allows the custom tooltip template to be displayed when hovering over symbols in the symbol palette, enhancing the user experience and providing more informative tooltips for each symbol. +Provide a custom template as a tooltip for symbols in the symbol palette using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolPaletteTemplates_TooltipTemplate) property of the `SfDiagramComponent`. Once the tooltip template is defined, enable custom tooltips for symbols in the symbol palette by setting the **Tooltip** constraints for nodes and connectors. This allows the custom tooltip template to be displayed when hovering over symbols in the symbol palette, enhancing the user experience and providing more informative tooltips for each symbol. The following code example illustrates how to provide the tooltip template for nodes. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Popups
    -
    +
    @@ -1036,34 +1054,36 @@ The following code example illustrates how to provide the tooltip template for n } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBICZNmJjWhgbhB?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/SymbolPalette/SymbolPaletteTooltip) ->**Note:** When the tooltip for the symbol is not initialized, the ID of the symbol will be rendered by default as the tooltip content. When the tooltip is defined, either content or template must be specified; otherwise, the tooltip will remain empty. +>**Note:** If a tooltip is not initialized for a symbol, the symbol ID is rendered by default as the tooltip content. When the tooltip is defined, either content or template must be specified; otherwise, the tooltip will be empty. ## How to Handle Symbol Palette Interaction Palette interaction provides notifications for symbol entry, exit, and dragging within the diagram. - The [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is triggered when a symbol is initially dragged from the symbol palette into the diagram area. -- The [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is triggered continuously as an element is being dragged over other diagram elements. +- The [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is triggered continuously as an element is dragged over other diagram elements. - The [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragLeave) event is triggered when a dragged element exits the boundaries of another diagram element. -For more information about event, refer to the [Events](../events). +For more information about events, refer to the [Events](../events). ## How to Cancel Symbol Drop Using the Escape Key -The diagram provides support to cancel the node drop from symbol palette when the ESC key is pressed. +The diagram supports canceling a node drop from the symbol palette by pressing the Esc key during drag-and-drop. ![Escape key in symbol palette](../images/blazor-diagram-palette-escape-key.gif) ## How to Enable the Chunk Message -In the Blazor Diagram component, calculating the bounds of paths, text, images, and SVG data from the server to the JavaScript side using JsInterop calls is crucial. However, when processing large data sets (exceeding 32KB for a single incoming hub message) in a single JS call, connection disconnection issues can arise. To mitigate this problem, we have introduced the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property in the Symbol Palette component. +In the Blazor Diagram component, calculating the bounds of paths, text, images, and SVG data from the server to the JavaScript side using JsInterop calls is crucial. However, when processing large data sets (exceeding 32 KB for a single incoming hub message) in a single JS call, connection disconnection issues can arise. To mitigate this problem, we have introduced the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property in the Symbol Palette component. -This property enables the transmission of large data in smaller, manageable chunks, effectively preventing connection disconnection issues. Chunk messages facilitate the measurement of paths, images, text, and SVG data without exceeding the maximum size limit for a single incoming hub message (MaximumReceiveMessageSize of 32KB). This approach ensures smooth data transfer and processing, even for complex diagrams with substantial amounts of information. +This property enables transmitting large data in smaller, manageable chunks, effectively preventing connection disconnection issues. Chunk messages facilitate the measurement of paths, images, text, and SVG data without exceeding the maximum size for a single incoming hub message (MaximumReceiveMessageSize of 32 KB). This approach ensures smooth data transfer and processing, even for complex diagrams with substantial amounts of information. -By default, the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property is set to `false`. However, for scenarios involving large data sets or complex diagram elements, it is recommended to enable this feature to enhance performance and prevent potential connection issues. +By default, [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property is set to **false**. However, for scenarios involving large data sets or complex diagram elements, it is recommended to enable this feature to enhance performance and prevent potential connection issues. Here is an example demonstrating how to use the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property: @@ -1491,9 +1511,10 @@ Here is an example demonstrating how to use the [EnableChunkMessages](https://he } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthysDXmfDrypXmO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/EnableChunkMessage) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/EnableChunkMessage) ## See Also -* [How to add the symbol to the diagram](./symbol-palette) \ No newline at end of file +* [How to add the symbol to the diagram](./nodes) \ No newline at end of file diff --git a/blazor/diagram/symbol-palette/symbol-palette.md b/blazor/diagram/symbol-palette/symbol-palette.md index ac78913d61..96afb33082 100644 --- a/blazor/diagram/symbol-palette/symbol-palette.md +++ b/blazor/diagram/symbol-palette/symbol-palette.md @@ -1,24 +1,24 @@ --- layout: post -title: Symbol Palette in Blazor Diagram Component | Syncfusion +title: Symbol Palette in Syncfusion Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Symbol Palette in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Symbol Palette in Blazor Diagram Component +# Symbol Palette in Diagram Component -The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component displays a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing a set of predefined nodes and connectors. This versatile tool enables users to easily drag and drop these elements into the diagram, streamlining the process of creating and modifying diagrams efficiently. +The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component displays a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing predefined nodes and connectors. This versatile tool enables users to easily drag and drop these elements into the diagram, streamlining the process of creating and modifying diagrams efficiently. ## How to Create Symbol Palette -To create Symbol Palette easily and to add nodes and connectors in it, you can check the video below. +To learn how to create a symbol palette and add nodes and connectors, refer to the following video. {% youtube "youtube:https://www.youtube.com/watch?v=wgpZ55P4KHE" %} -The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) properties of the symbol palette allow you to define the dimensions of the symbol palette. These properties enable you to customize the size of the palette to fit your specific layout requirements. +The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) properties define the overall size of the symbol palette to fit layout requirements. ```csharp @using Syncfusion.Blazor.Diagram.SymbolPalette @@ -29,14 +29,14 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Symb SymbolHeight="80" SymbolWidth="80"> ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/CreateSymbolPalette) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/CreateSymbolPalette) ### How to Add Node to Palette -The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the SfSymbolPaletteComponent are essential for defining the dimensions of symbols (nodes, connectors, or nodegroups) rendered in the palette. These properties ensure that symbols are displayed with the correct size and proportions. The following code example demonstrates how to add a node to a symbol palette with specified dimensions. +The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the `SfSymbolPaletteComponent` are essential for defining the dimensions of symbols (nodes, connectors, or node groups) rendered in the palette. These properties ensure that symbols are displayed with the correct size and proportions. The following code example demonstrates how to add a node to a symbol palette with specified dimensions. -* To render a node in a palette, first create SymbolPalette and initialize palettes collection. +* To render a node in a palette, first create symbol palette and initialize the palettes collection. ```csharp @using Syncfusion.Blazor.Diagram @@ -67,7 +67,7 @@ The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra } ``` -* Create node and add that node to the DiagramObjectCollection. +* Create a node and add it to the `DiagramObjectCollection`. ```csharp // Defines palette's flow-shape collection. @@ -95,14 +95,14 @@ The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra } ``` -* Complete code to add node to the palette. +* Complete example to add a node to the palette. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
    -
    +
    @@ -155,21 +155,23 @@ The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddNodeToPalette) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVyWNXcztJGwllm?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/SymbolPalette/AddNodeToPalette) ![Adding Node to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-node-to-palette.png) ### How to Add Connector to Palette -The following code example illustrates how to add connector to a palette. +The following example illustrates how to add a connector to a palette. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
    -
    +
    @@ -225,21 +227,23 @@ The following code example illustrates how to add connector to a palette. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddConnectorToSymbolPalette) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVSsDtGpZyphJxt?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/SymbolPalette/AddConnectorToSymbolPalette) ![Adding Connector to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-connector-to-palette.png) ### How to Add Node Group into Palette -The following code example illustrates how to add nodegroup to a palette. +The following example illustrates how to add a node group to a palette. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
    -
    +
    @@ -314,20 +318,22 @@ The following code example illustrates how to add nodegroup to a palette. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddGroupToPalette) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBeiXNwTXHzIlfp?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/SymbolPalette/AddGroupToPalette) ![Adding NodeGroup to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-node-group-to-palette.png) ## How to Add Palette to Symbol Palette -A palette allows you to display a group of related symbols and textually annotate the group with a header. [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html) can be added as a collection of symbol groups, providing a organized way to categorize and present symbols. +A palette displays a group of related symbols and textually annotate the group with a header. [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html) can be added as a collection of symbol groups, providing a organized way to categorize and present symbols. -The collection of predefined symbols can be added to palettes using the [Symbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_Symbols) property. This allows you to populate your palette with custom or pre-designed symbols that users can drag and drop into their diagrams. +The collection of predefined symbols can be added to palettes using the [Symbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_Symbols) property. This allows populate your palette with custom or pre-designed symbols that users can drag and drop into their diagrams. To initialize a palette, define a JSON object with the [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_ID) property. This unique identifier is essential for distinguishing between different palettes and for referencing them programmatically. -The following code example illustrates how to define a palette. +The following example shows how to define a palette. ```csharp @using Syncfusion.Blazor.Diagram.SymbolPalette @@ -345,7 +351,7 @@ The following code example illustrates how to define a palette. } ``` -The following code example illustrates how to add nodes, connectors, nodegroups to the palette and add palette to the palettes collection of the symbol palette. +The following example illustrates how to add nodes, connectors, nodegroups to the palette and add the palette to the palettes collection of the symbol palette. ```csharp Palettes = new DiagramObjectCollection() @@ -356,14 +362,14 @@ Palettes = new DiagramObjectCollection() }; ``` -* Complete code to render palette with node, connector, and nodegroup. +* Complete example to render a palette with node, connector, and node group symbols. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
    -
    +
    @@ -471,13 +477,15 @@ Palettes = new DiagramObjectCollection() } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddPaletteToSymbolPalette) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtryMXXmTXcwMRie?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/SymbolPalette/AddPaletteToSymbolPalette) ![Adding Palette to SymbolPalette in Blazor Diagram](../images/blazor-diagram-add-palette-to-symbol-palette.png) ## How to Drag and Drop Symbols from Palette to Diagram -To enable drag and drop functionality, you must add the diagram component to the [Targets](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Targets) collection of the symbol palette. This establishes the connection between the symbol palette and the diagram, allowing seamless interaction between the two components. +To enable drag and drop functionality, add the diagram component to the [Targets](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Targets) collection of the symbol palette. This connects the palette to the diagram so users can drop symbols onto the canvas. The following code illustrates how to add diagram to the Targets collection. ```csharp @@ -493,7 +501,7 @@ To enable drag and drop functionality, you must add the diagram component to the } ``` -* Complete code to drag and drop symbols from palette to diagram. +* Complete example to drag and drop symbols from the palette to the diagram. ```csharp @using Syncfusion.Blazor.Diagram @@ -628,13 +636,15 @@ To enable drag and drop functionality, you must add the diagram component to the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/DragAndDrop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBeiXjGJZFQrXIW?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/SymbolPalette/DragAndDrop) ![Drag and Drop in Blazor Diagram](../images/blazor-diagram-drag-and-drop.gif) ## How to Add or Remove Symbols in the Symbol Palette at Runtime -Symbols can be dynamically added to the palette at runtime using the public method [AddPaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPaletteItem_System_String_Syncfusion_Blazor_Diagram_NodeBase_System_Boolean_). This method allows for flexible customization of the symbol palette, enabling users to incorporate new symbols as needed during the application's execution. The following code sample illustrates how to add symbol using AddPaletteItem method. +Add symbols at runtime using [AddPaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPaletteItem_System_String_Syncfusion_Blazor_Diagram_NodeBase_System_Boolean_). This method allows for flexible customization of the symbol palette, enabling users to incorporate new symbols as needed during the application's execution. The following code sample illustrates how to add symbol using AddPaletteItem method. ```csharp Node decision = new Node() @@ -645,7 +655,7 @@ Node decision = new Node() SymbolPalette.AddPaletteItem("FlowShapes", decision, false); ``` -Also, you can add symbol to the palette at runtime by using the `Add` method. The following code sample illustrates how to add symbol using Add method. +Symbols can also be added at runtime by using the `Add` method on the palette’s Symbol collection. ```csharp @@ -657,7 +667,7 @@ Node decision = new Node() SymbolPalette.Palettes[0].Symbols.Add(decision); ``` -Symbols can be removed from palette at runtime by using the public method [RemovePaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RemovePaletteItem_System_String_System_String_). The following code sample illustrates how to remove symbol using RemovePaletteItem method. +Remove symbols at runtime using [RemovePaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RemovePaletteItem_System_String_System_String_). The following code sample illustrates how to remove symbol using RemovePaletteItem method. ```csharp @@ -668,7 +678,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## How to Add or Remove Palettes at Runtime -Palettes can be dynamically added to the symbol palette at runtime using the public method [AddPalettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPalettes_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_SymbolPalette_Palette__). This method allows for flexible customization of the symbol palette during application execution. The following code sample illustrates how to add palette using AddPalettes method. +Add palettes dynamically using [AddPalettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPalettes_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_SymbolPalette_Palette__) which accepts a collection of palettes. This method allows for flexible customization of the symbol palette during application execution. The following code sample illustrates how to add palette using AddPalettes method. ```csharp DiagramObjectCollection newNodes = new DiagramObjectCollection(); @@ -685,7 +695,7 @@ Palettes can be dynamically added to the symbol palette at runtime using the pub symbolpalette.AddPalettes(newPalettes); ``` -Also, you can add palette to the symbol palette at runtime by using the `Add` method. The following code sample illustrates how to add palette using Add method. +Also, Add palette to the symbol palette at runtime by using the `Add` method. The following code sample illustrates how to add palette using Add method. ```csharp DiagramObjectCollection newNodes = new DiagramObjectCollection(); @@ -702,7 +712,7 @@ Also, you can add palette to the symbol palette at runtime by using the `Add` me SymbolPalette.Palettes.Add(newPalettes); ``` -Palettes can be removed from the symbol palette at runtime by using the public method [RemovePalettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RemovePalettes_System_String_). The following code sample illustrates how to remove palette using the RemovePalettes method. +Remove palettes at runtime using [RemovePalettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RemovePalettes_System_String_). The following code sample illustrates how to remove palette using the RemovePalettes method. ```csharp SymbolPalette.RemovePalettes("BasicShapes"); @@ -822,13 +832,15 @@ The diagram component offers a search functionality within the symbol palette. B } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchOption) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLSsDXmJXuyQBBK?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/SymbolPalette/SearchOption) ![Search Option in Blazor Diagram](../images/SymbolSearch.gif) ## How to Add Search keywords for Symbols -The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_SearchTags) property enhances the searchability of symbols within the symbol palette by allowing you to specify custom keywords. These tags can be associated with various diagram elements such as nodes, connectors, groups, swimlanes, and BPMN symbols. By utilizing search tags, users can more easily locate and identify relevant symbols for their diagramming needs, improving the overall user experience and efficiency of the symbol palette feature. +The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_SearchTags) property enhances the search ability of symbols within the symbol palette by allowing you to specify custom keywords. These tags can be associated with various diagram elements such as nodes, connectors, groups, swimlanes, and BPMN symbols. By utilizing search tags, users can more easily locate and identify relevant symbols for their diagramming needs, improving the overall user experience and efficiency of the symbol palette feature. ```csharp @using Syncfusion.Blazor.Diagram @@ -888,11 +900,13 @@ The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchTag) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeCtXmpMXBaSVF?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/SymbolPalette/SearchTag) ## How to Update Common Values for All Nodes and Connectors -When adding additional symbols such as nodes and connectors to the palette, you can define default settings for these objects using the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_NodeCreating) and [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_ConnectorCreating) properties of the diagram. These properties allow you to specify default attributes and behaviors for nodes and connectors, ensuring consistency and efficiency when adding new symbols to your palette. +Use the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_NodeCreating) and [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_ConnectorCreating) callbacks on `SfSymbolPaletteComponent` to apply default styles or settings for symbols as they are created in the palette. ```csharp @using Syncfusion.Blazor.Diagram @@ -975,12 +989,13 @@ When adding additional symbols such as nodes and connectors to the palette, you } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjByWXjmJsiXCdSC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Symbol with Description in Blazor Diagram](../images/blazor-diagram-symbol-description.png) ## How to Refresh the Symbols at Runtime -The [RefreshSymbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RefreshSymbols) method enables dynamic redrawing of symbols in the SymbolPalette without the need to re-render the entire Diagram component. This method enhances performance by updating only the necessary symbols, providing a more efficient way to refresh the SymbolPalette's content. +The [RefreshSymbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RefreshSymbols) method redraw symbols in the symbol palette without re-rendering the entire diagram. This method enhances performance by updating only the necessary symbols, providing a more efficient way to refresh the SymbolPalette's content. ```csharp @@ -1052,12 +1067,14 @@ The [RefreshSymbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia SymbolPalette.RefreshSymbols(); } } -``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/RefereshPalette) +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZroCDjcJiseOtxy?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/SymbolPalette/RefereshPalette) ## How to Set a Template for Symbol Palette Symbols -The Symbol Palette allows you to customize the appearance of symbols using [SymbolPaletteTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html). This feature enables you to create visually appealing and informative symbols that can enhance the user experience. The following example demonstrates how to set a template for SVG symbols. You can similarly set templates for HTML symbols. +Customize the appearance of symbols using [SymbolPaletteTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html). This feature enable to create visually appealing and informative symbols that can enhance the user experience. The following example demonstrates how to set a template for SVG symbols. Similarly set templates for HTML symbols. ```csharp @using Syncfusion.Blazor.Diagram @@ -1092,14 +1109,15 @@ The Symbol Palette allows you to customize the appearance of symbols using [Symb } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtryiXNcTWhusyQw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Symbol palette templates](../images/SymbolPaletteTemplate.png) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTemplate) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTemplate) ## See Also -* [How to add the symbol to the diagram](./symbol-palette) +* [How to add the symbol to the diagram](./nodes) * [How to Add Image Node in Symbol Palette in Blazor](https://support.syncfusion.com/kb/article/10090/how-to-add-image-node-in-symbol-palette-in-blazor) * [How to Add Custom HTML Nodes in Symbol Palette for Blazor Diagram](https://support.syncfusion.com/kb/article/18737/how-to-add-custom-html-nodes-in-symbol-palette-for-blazor-diagram) diff --git a/blazor/file-upload/accessibility.md b/blazor/file-upload/accessibility.md index 1b94f93478..fa035d91e4 100644 --- a/blazor/file-upload/accessibility.md +++ b/blazor/file-upload/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor File Upload Component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor File Upload component and more. +description: Learn about accessibility features in the Syncfusion Blazor File Upload component, including support for WCAG 2.2, Section 508, and ARIA standards. platform: Blazor control: File Upload documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Accessibility in Blazor File Upload Component -The [Blazor Uploader](https://www.syncfusion.com/blazor-components/blazor-file-upload) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Syncfusion [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It offers built-in ARIA accessibility support, making it compatible with screen readers and other assistive technologies. -The accessibility compliance for the Blazor Uploader component is outlined below. +The accessibility compliance for the Blazor File Upload component is outlined below: | Accessibility Criteria | Compatibility | | -- | -- | | [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | | [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | | [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | +| [Right-To-Left (RTL) Support](../common/accessibility#right-to-left-rtl-support) | Yes | +| [Color Contrast Support](../common/accessibility#color-contrast-support) | Yes | | [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | | [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | | [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | @@ -30,31 +30,32 @@ The accessibility compliance for the Blazor Uploader component is outlined below margin: 0.5em 0; } +
    Yes - All features of the component meet the requirement.
    -
    Intermediate - Some features of the component do not meet the requirement.
    +
    Intermediate - Some features of the component do not fully meet the requirement.
    No - The component does not meet the requirement.
    -## Keyboard interaction +## Keyboard Navigation -The Blazor Uploader component characterized with complete ARIA accessibility support that helps to be accessible by on-screen readers and other assistive technology devices. +The Blazor Uploader component includes complete ARIA support for operation with screen readers and other assistive technologies. Focus moves predictably through interactive elements such as the browse button, file list items, and action buttons (remove, retry, and clear). Status updates (for example, upload progress and error messages) are exposed to assistive technologies. -The following are the standard keys that works on uploader component: +The following are the standard keys that work in the Uploader component: | Windows | Mac | Actions | | --- | --- | --- | -| Tab | Tab | Move focus to next element. | -| Shift + Tab | ⇧ + Tab | Move focus to previous element. | -| Enter | Enter | Triggers corresponding action to button element. | -| Esc | Esc | Close the file browser dialog alone and cancels the upload on drop the file. | +| Tab | Tab | Moves focus to the next focusable element. | +| Shift + Tab | ⇧ + Tab | Moves focus to the previous focusable element. | +| Enter | Enter | Triggers the action associated with the focused button element. | +| Esc | Esc | Closes the file selection dialog. If a file drop is in progress, it cancels the upload. | -## Ensuring accessibility +## Ensuring Accessibility -The Blazor Uploader component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor File Upload component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. -The accessibility compliance of the Uploader component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the Uploader component with accessibility tools. +The accessibility compliance of the File Upload component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the component with accessibility tools. -## See also +## See Also -* [Accessibility in Syncfusion® components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® Components](../common/accessibility) \ No newline at end of file diff --git a/blazor/file-upload/drag-and-drop.md b/blazor/file-upload/drag-and-drop.md new file mode 100644 index 0000000000..83392cdef6 --- /dev/null +++ b/blazor/file-upload/drag-and-drop.md @@ -0,0 +1,177 @@ +--- +layout: post +title: Drag and Drop in Blazor File Upload Component | Syncfusion +description: Learn about drag-and-drop file selection, configuring an external drop area, and related behaviors in the Syncfusion Blazor File Upload component. +platform: Blazor +control: File Upload +documentation: ug +--- + +# Drag and drop in Blazor File Upload Component + +The File Upload component supports drag-and-drop file selection. Users can drag files from the file explorer and drop them into the drop area. By default, the File Upload component acts as the drop area. The drop area is highlighted when files are dragged over it to indicate that dropping is supported. + +## Custom DropArea + +The File Upload component allows configuring an external target element as the drop area by using the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DropArea) property. The element can be specified as an HTML element reference or by using the element’s ID. + +```cshtml +@using Syncfusion.Blazor.Inputs + +
    + Drop files here to upload +
    + + + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLoiZrPzKWARfzw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Customizing Drop Area in Blazor FileUpload](./images/blazor-fileupload-drop-area-customization.gif) + +## DropEffect + +The File Upload exposes a DropEffect property that controls the cursor feedback and allowed drop operation during drag-and-drop. Set this property to Default, Copy, Move, Link, or None. Default uses the browser’s behavior. Dropped files are added to the selected files list and processed according to component settings (for example, AutoUpload, SaveUrl/RemoveUrl, AllowedExtensions, MinFileSize, and MaxFileSize). + +### Copy + +Shows a copy cursor during drag-and-drop. Dropped files are added to the File Upload’s selection without modifying the originals. File Upload proceeds based on the component configuration. + +```cshtml + +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // here you can get dropped file data + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZroMDBPfgwxYYBv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Copy drop effect in Blazor FileUpload](./images/blazor-fileupload-drag-and-drop-copy.gif) + +### Move + +Shows a move cursor during drag-and-drop. Source files are not moved from their original location; the File Upload only adds them to the selection and uploads according to configuration. + +```cshtml + +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // here you can get dropped file data + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBICXBPfzZPgIvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Move drop effect in Blazor FileUpload](./images/blazor-fileupload-drop-area-move.gif) + +### Link + +Shows a link cursor during drag-and-drop. This changes the cursor feedback only; upload behavior remains unchanged. + +```cshtml + +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // here you can get dropped file data + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBIsDLFJfLAjrAD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Link drop effect in Blazor FileUpload](./images/blazor-fileupload-drop-area-link.gif) + +### None + +Prevents dropping files on the File Upload or the configured drop area. Use this when disabling drops is required regardless of validation rules. + +```cshtml + +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // here you can get dropped file data + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrosDhbppKYbVqC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![None drop effect in Blazor FileUpload](./images/blazor-fileupload-drop-area-none.gif) + +## Clipboard Paste + +The File Upload component supports file selection through clipboard paste operations. Click on the File Upload element and press Ctrl+V to paste files from the clipboard. The pasted files are added to the selected files list. + +```cshtml +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // Access pasted file data here + } +} +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBysXhPpSVDXqxx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Clipboard paste file handling in Blazor File Upload component](./images/blazor-fileupload-clipboard-paste.gif) diff --git a/blazor/file-upload/file-upload-configuration.md b/blazor/file-upload/file-upload-configuration.md new file mode 100644 index 0000000000..b5e75b5b31 --- /dev/null +++ b/blazor/file-upload/file-upload-configuration.md @@ -0,0 +1,266 @@ +--- +layout: post +title: File Upload Configuration in Blazor File Upload Component | Syncfusion +description: Checkout and learn here all about File Upload Configuration in Syncfusion Blazor File Upload component and much more. +platform: Blazor +control: File Upload +documentation: ug +--- + +# File Upload Configuration + +The Syncfusion Blazor FileUpload component offers a wide range of properties to configure its behavior and appearance. + +## ID + +The [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ID) property is used to provide a unique identifier for the FileUpload component. This is useful for referencing the component in JavaScript or CSS, and for ensuring accessibility. + +## Code Example + +```cshtml + +``` + +> Note: Ensure the `ID` is unique across your application. When using AsyncSettings, the `name` must match the controller's save method parameter name. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjryjYhTgSOYvHEJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## AllowedExtensions + +The [`AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions)property specifies the file types that can be uploaded. This is crucial for validating user uploads and ensuring only acceptable file formats are accepted. + +## Code Example + +```cshtml + +``` + +>Note: Multiple extensions should be separated by commas. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryjOhzKHgiZDmV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## AllowMultiple + +The [`AllowMultiple`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) property determines whether the user can select multiple files for upload at once. Set to `true` for scenarios where multiple documents or images need to be uploaded simultaneously. + +## Code Example + +```cshtml + +``` + +>Note: When `AllowMultiple` is `false`, only one file can be selected at a time. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVojOhTKxefALsN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## AutoUpload + +The [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property controls whether files are uploaded immediately after selection. Set to `true` for instant uploads, useful for quick submissions. + +## Code Example + +```cshtml + +``` + +If [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is `false`, you'll typically need to upload a file manually on upload button click. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrStOhTKnuyPkKt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## SequentialUpload + +The [`SequentialUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_SequentialUpload)property, when [`AllowMultiple`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) is `true`, specifies whether selected files should be uploaded one after another or concurrently. Use `true` for sequential processing, which can be useful for server resource management. + +## Code Example + +```cshtml + +``` + +>Note: This property is only effective when `AllowMultiple` is `true`. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhSjkLpqQTZKrlg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## DirectoryUpload + +The [`DirectoryUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_DirectoryUpload) property enables users to select and upload an entire directory instead of individual files. This is useful for uploading complex folder structures. + +## Code Example + +```cshtml + +``` + +>Note: Browser support for directory upload may vary. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLeDOBfgceWwSNY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## Enabled + +The [`Enabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_Enabled) property controls whether the FileUpload component is interactive or disabled. This is useful for temporarily preventing file uploads, for example, until certain form conditions are met. + +## Code Example + +```cshtml + +``` + +>Note: When disabled, users cannot interact with the upload area. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLeNkVfKcOhxybv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## MaxFileSize + +The [`MaxFileSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MaxFileSize) property sets the maximum allowable size for a single file upload in bytes. This helps prevent excessively large files from being uploaded, which can impact server performance or storage. + +## Code Example + +```cshtml + @* 5 MB *@ +``` + +>Note: The value is in bytes. Make sure your server-side configuration also handles maximum file sizes appropriately. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVStkLpqlnsPFdX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + +--- + +## MinFileSize + +The [`MinFileSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MinFileSize) property sets the minimum allowable size for a single file upload in bytes. This can be used to prevent the upload of empty or insignificant files. + +## Code Example + +```cshtml + @* 1 KB *@ +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVotaVTUYsmdyXM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## EnableHtmlSanitizer + +The [`EnableHtmlSanitizer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_EnableHtmlSanitizer) property, when set to `true`, sanitizes the file names to remove potentially harmful HTML content. This is a security measure to prevent cross-site scripting (XSS) attacks through malicious file names. + +## Code Example + +```cshtml + +``` + +>Note: It's recommended to keep this property `true` for security reasons, especially in public-facing applications. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBeNYVfUOhomymd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## EnablePersistence + +The [`EnablePersistence`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_EnablePersistence) property, when `true`, allows the component's state (e.g., uploaded files list) to be maintained even after a page reload. This improves user experience by preserving progress. + +## Code Example + +```cshtml + + +``` + +>Note: Requires unique `ID` for proper functionality. + +--- + +## EnableRtl + +The [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_EnableRtl) property enables Right-to-Left (RTL) rendering for cultures that read from right to left. This is important for internationalization and accessibility. + +## Code Example + +```cshtml + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhINEhJpCTkMvdI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## HtmlAttributes + +The [`HtmlAttributes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HtmlAttributes) property allows you to add custom HTML attributes to the root element of the FileUpload component. This is useful for applying custom styling, data attributes, or other HTML properties not directly exposed as Blazor parameters. + +## Code Example + +```cshtml + +``` + +>Note: This property accepts a `Dictionary`. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLoDYrpTrbUcwZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## InputAttributes + +The [`InputAttributes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_InputAttributes) property allows you to add custom HTML attributes specifically to the underlying `input type="file"` element within the FileUpload component. This is useful for applying browser-specific input attributes or custom event handlers. + +## Code Example + +```cshtml + +``` + +>Note: This property accepts a `Dictionary`. Be cautious not to override essential attributes managed by the component. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBetuhfzUNEgeqP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## TabIndex + +The [`TabIndex`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_TabIndex) property specifies the tab order of the FileUpload component relative to other focusable elements on the page. This is important for keyboard navigation and accessibility. + +## Code Example + +```cshtml +
    + + +``` + +>Note: A value of 0 means the element will be focused in the default tab order. Negative values remove the element from the tab order. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhotYhzzqUHHLgt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + +## Preloaded files + +The FileUpload component supports displaying a list of files that are already available on the server as ["UploaderUploadedFiles"](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderUploadedFiles.html#properties) files. This is useful for editing scenarios where users need to see and potentially remove existing files before uploading new ones. + +## Code Example + +```cshtml + + + + + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBytuBzpzikFnSt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + diff --git a/blazor/file-upload/file-upload-methods.md b/blazor/file-upload/file-upload-methods.md new file mode 100644 index 0000000000..38fbd88dfc --- /dev/null +++ b/blazor/file-upload/file-upload-methods.md @@ -0,0 +1,239 @@ +--- +layout: post +title: File Upload Methods in Blazor File Upload Component | Syncfusion +description: Learn about file upload methods in Syncfusion Blazor, including GetFileDetails, UploadAsync, CancelAsync, and ClearAllAsync. +platform: Blazor +control: File Upload +documentation: ug +--- + +# File Upload Methods in Syncfusion Blazor Uploader + +This section details the various methods available to interact with and manage the Syncfusion Blazor File Upload component programmatically. + +### GetFileDetails + +The [`GetFileDetails`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFileDetails_System_Collections_Generic_List_Syncfusion_Blazor_Inputs_FileInfo__) method retrieves the details of all files currently selected or uploaded in the File Upload component. This is useful for validating file properties like size, type, and name before or after the upload process. + +**Use Case:** Imagine a scenario where you want to display a summary of selected files, including their names and sizes, before the user initiates the actual upload. [`GetFileDetails`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFileDetails_System_Collections_Generic_List_Syncfusion_Blazor_Inputs_FileInfo__) allows you to access this information. + +```cshtml + + + + +Process Files + +@if (fileDetails != null && fileDetails.Any()) +{ +

    Processed File Details:

    +
      + @foreach (var file in uploadedFiles) + { +
    • @file.Name (@((file.Size / 1024).ToString("F2")) KB) - @file.Type
      • + } +
    +} + +@code { + SfUploader uploader; + List uploadedFiles = new(); + List fileDetails; + + private void OnChange(UploadChangeEventArgs args) + { + uploadedFiles = args.Files.Select(f => f.FileInfo).ToList(); + } + + private void ProcessFiles() + { + if (uploadedFiles.Any()) + { + uploader.GetFileDetails(uploadedFiles); + + fileDetails = uploadedFiles; + } + } +} +``` + +> **Note:** The [`GetFileDetails`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFileDetails_System_Collections_Generic_List_Syncfusion_Blazor_Inputs_FileInfo__) method returns a `List` object, where each `FileInfo` contains properties like `Name`, `Size`, `Type`, etc., allowing for comprehensive inspection of selected files. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLetYVyVNjMlOlP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload GetFileDetails Method](./images/blazor-fileupload-getfiledetails.gif) + + +## GetFilesDataAsync + +The [`GetFilesDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFilesDataAsync_System_Nullable_System_Double__) method retrieves a list of `FileInfo` objects representing the files that have been successfully uploaded through the File Upload component. This is particularly useful when you need to perform server-side operations on the uploaded files or update your UI based on the upload status. + +**Use Case:** After a user uploads multiple files, you might want to display a success message listing the names of all successfully uploaded files, or store this information in a database. [`GetFilesDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFilesDataAsync_System_Nullable_System_Double__) provides the necessary data to achieve this. + +```cshtml +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + + +Get Uploaded Files + +@if (uploadedFiles != null && uploadedFiles.Any()) +{ +

    Uploaded Files:

    +
      + @foreach (var file in uploadedFiles) + { +
    • @file.Name - @file.Status
      • + } +
    +} + +@code { + SfUploader uploader; + List uploadedFiles; + public async Task GetUploadedFiles() + { + uploadedFiles = await uploader.GetFilesDataAsync(); + // You can now process uploadedFiles, e.g., display them in a list. + } +} +``` + +> **Note:** The `GetFilesDataAsync` method returns a `List`, which includes important properties like `Name`, `Size`, `Type`, and `Status` (`Uploaded`, `Failed`, etc.) for each file that has gone through the upload process. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthoZYLzypWUmzGy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload GetFilesDataAsync Method](./images/blazor-fileupload-getfilesdataasync.gif) + +## UploadAsync + +The [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__) method programmatically initiates the upload process for all selected files in the File Upload component. This method is particularly useful when [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is set to `false`, allowing the user to trigger the upload manually at a specific time, such as after reviewing their selections. + +**Use Case:** Consider a scenario where users select several files, and then, after confirming their choices with a separate "Upload All" button, you want to start the file transfer. [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__) provides the means to trigger this action. + +```cshtml +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + + +Upload Selected Files + +@code { + SfUploader uploader; + + public async Task UploadFiles() + { + await uploader.UploadAsync(); + // The upload process for all selected files is now initiated. + } +} +``` + +> **Note:** When [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is set to `false`, calling [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__) is essential to begin the file transfer. If [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is `true`, files will start uploading automatically upon selection, and [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__) may not be necessary. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBeXYVTezyQELFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload UploadAsync Method](./images/blazor-fileupload-uploadasync.gif) + +## CancelAsync + +The [`CancelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CancelAsync_Syncfusion_Blazor_Inputs_FileInfo___) method allows you to programmatically cancel the upload of a specific file or all ongoing uploads within the File Upload component. This is useful for providing users with the ability to stop an upload that is in progress, for example, if they selected the wrong file or decide not to proceed. + +**Use Case:** Imagine a scenario where a large file is being uploaded, and the user realizes they picked the incorrect file. Providing a "Cancel" button that triggers [`CancelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CancelAsync_Syncfusion_Blazor_Inputs_FileInfo___) for that specific file (or all uploads) would enhance the user experience by allowing them to halt the transfer. + +```cshtml +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + + +Cancel All Uploads + +@code { + SfUploader uploader; + + public async Task CancelUploads() + { + // To cancel all uploads + await uploader.CancelAsync(); + + // To cancel a specific file's upload, you would need its unique ID or a way to identify it. + // For example, if you have a list of file IDs: + // await uploader.CancelAsync(fileIdToCancel); + } +} +``` + +> **Note:** To cancel a specific file's upload, you typically need to pass an identifier like a `fileInfo[]` to the CancelAsync method. Without an argument, it generally attempts to cancel all pending or in-progress uploads. The exact behavior might depend on the implementation of the Uploader component. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrSNkBzSzuxWFbi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload CancelAsync Method](./images/blazor-fileupload-cancelasync.gif) + +## ClearAllAsync + +The [`ClearAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ClearAllAsync) method allows you to programmatically clear all selected or uploaded files from the File Upload component's internal list and UI. This is useful for resetting the component and preparing it for a new selection of files, or for cleaning up after a successful (or failed) upload operation. + +**Use Case:** After a user has successfully uploaded a batch of files, you might want to automatically clear the file list in the uploader component so they can start a new upload session without manually removing each file. [`ClearAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ClearAllAsync) simplifies this process. + +```cshtml +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + + +Clear All Files + +@code { + SfUploader uploader; + + public async Task ClearFiles() + { + await uploader.ClearAllAsync(); + // All files are now removed from the component's internal state and UI. + } +} +``` + +> **Note:** [`ClearAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ClearAllAsync) only affects the client-side representation in the File Upload component. It does not automatically delete files from the server if they have already been uploaded. Server-side deletion would require a separate call to your server-side API. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVItErIihaDlaeE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload ClearAllAsync Method](./images/blazor-fileupload-clearallasync.gif) + +## RemoveAsync + +The [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) method allows you to programmatically remove a specific file from the File Upload component's display and internal tracking. This method is particularly useful when you need to enable users to delete individual files from the list of selected files before or after upload, or as part of a post-upload management process. + +**Use Case:** If a user has selected several files but then decides to remove one particular file from the list before initiating the upload, [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) can be used. It's also applicable if you want to provide a delete option for individually uploaded files. + +```cshtml + + + + +Remove First File + +@code { + private SfUploader uploader; + private List uploadedFiles = new(); + + private void OnChange(UploadChangeEventArgs args) + { + uploadedFiles = args.Files.Select(f => f.FileInfo).ToList(); + } + + private async Task RemoveSpecificFile() + { + if (uploadedFiles.Any()) + { + var fileToRemove = uploadedFiles.First(); + await uploader.RemoveAsync(new[] { fileToRemove }); + } + } +} +``` + +> **Note:** The [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) method typically requires the fileInfo[] of the file you wish to remove. If [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) is configured in [`UploaderAsyncSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html), calling [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) will also trigger a server-side call to the specified [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) to handle server-side file deletion. If no [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) is configured, [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) will only remove the file from the client-side component. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhSjYreMJJIqYvz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload RemoveAsync Method](./images/blazor-fileupload-removeasync.gif) diff --git a/blazor/file-upload/getting-started-with-maui-app.md b/blazor/file-upload/getting-started-with-maui-app.md index 6fca4b0e70..14e48a676b 100644 --- a/blazor/file-upload/getting-started-with-maui-app.md +++ b/blazor/file-upload/getting-started-with-maui-app.md @@ -50,9 +50,9 @@ To use the MAUI project templates, install the Mobile development with the .NET You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. -## Install Blazor Inputs and Themes NuGet in the App +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add **Blazor File Upload** component in the app, install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using the .NET CLI. {% tabs %} @@ -79,7 +79,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} -@using Syncfusion.Blazor +@using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs {% endhighlight %} @@ -133,16 +133,22 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A - //Blazor File Upload 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. -## Add Blazor File Upload component +## Add Syncfusion® Blazor File Upload component + +The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application. + +### Simple Code to render a Usable File Upload Component Add the Syncfusion® Blazor File Upload component in the **~/Pages/Index.razor** file. +The most basic way to render the File Upload component is by adding the `` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally. + {% tabs %} {% highlight razor %} @@ -165,39 +171,65 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). -![Blazor FileUpload Component](./images/blazor-fileupload-component.png) -## Without server-side API endpoint +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} -### Save and Remove actions +![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif) -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +## Use ValueChange Event + +The [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event fires when files are selected or removed from the uploader. This event is crucial for client-side processing of selected files, allowing you to access file details and their content, which is useful for previewing files or handling uploads without a server-side endpoint. + +### Code Example + +This example demonstrates how to use the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to save uploaded files directly to a local directory when the [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property is set to `true`. This is useful for scenarios where you want to process files immediately after selection without an explicit upload button. {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.Inputs +@using System.IO + + @code { private async Task OnChange(UploadChangeEventArgs args) { try { - foreach (var file in args.Files) + foreach (var fileEntry in args.Files) { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); + // Define a path where you want to save the file. + // For a Blazor Server app, this path will be on the server. + var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads"); + if (!Directory.Exists(uploadsFolder)) + { + Directory.CreateDirectory(uploadsFolder); + } + + // Construct the full file path. + var filePath = Path.Combine(uploadsFolder, fileEntry.FileInfo.Name); + + // Use a FileStream to write the uploaded file's content to the server. + await using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write)) + { + // OpenReadStream with long.MaxValue allows reading the entire stream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream); + } + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' saved successfully to '{filePath}'"); } } catch (Exception ex) { - Console.WriteLine(ex.Message); + Console.WriteLine($"Error saving file: {ex.Message}"); } } } @@ -205,20 +237,71 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. {% endhighlight %} {% endtabs %} -![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) +N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif) + -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +## Memory stream + +When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system. + +### Code Example + +This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} + +@using Syncfusion.Blazor.Inputs +@using System.IO -Private void onRemove(RemovingEventArgs args) + + + + +@if (!string.IsNullOrEmpty(base64Image)) { - foreach(var removeFile in args.FilesData) +

    Uploaded Image Preview (Base64)

    + +} + +@code { + private string base64Image; + + private async Task OnValueChangeMemoryStream(UploadChangeEventArgs args) { - if (File.Exists(Path.Combine(@"rootPath", removeFile.Name))) + base64Image = string.Empty; // Clear previous image + + foreach (var fileEntry in args.Files) { - File.Delete(Path.Combine(@"rootPath", removeFile.Name)) + if (fileEntry.FileInfo.Type.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) + { + // Create a MemoryStream to hold the file content. + using var memoryStream = new MemoryStream(); + + // Copy the file's content from the upload stream to the MemoryStream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream); + + // Convert the MemoryStream content to a byte array. + byte[] imageBytes = memoryStream.ToArray(); + + // Convert byte array to Base64 string for display or further processing. + base64Image = Convert.ToBase64String(imageBytes); + Console.WriteLine($"Image '{fileEntry.FileInfo.Name}' loaded into MemoryStream and converted to Base64."); + } + else + { + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' is not an image and won't be processed for Base64 preview."); + // For non-image files, you could read their content as text or handle differently. + // Example for text file: + // memoryStream.Position = 0; // Reset stream position + // using var reader = new StreamReader(memoryStream); + // var content = await reader.ReadToEndAsync(); + // Console.WriteLine($"Content of {fileEntry.FileInfo.Name}: {content}"); + } } } } @@ -226,109 +309,138 @@ Private void onRemove(RemovingEventArgs args) {% endhighlight %} {% endtabs %} -## With server-side API endpoint +N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server. -The upload process requires save and remove action URL to manage the upload process in the server. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> * The save action is necessary to handle the upload operation. -
    * The remove action is optional, one can handle the removed files from server. +![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif) -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +## Created Event -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. + +### Code Example + +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} -[Route("api/[controller]")] -public class SampleDataController : Controller -{ - public string uploads = ".\\Uploaded Files"; // replace with your directory path +@using Syncfusion.Blazor.Inputs - [HttpPost("[action]")] - public async Task Save(IFormFile UploadFiles) // Save the uploaded file here - { - if (UploadFiles.Length > 0) - { - //Create directory if not exists - if (!Directory.Exists(uploads)) - { - Directory.CreateDirectory(uploads); - } + + + - var filePath = Path.Combine(uploads, UploadFiles.FileName); - if (System.IO.File.Exists(filePath)) - { - //Return conflict status code - return new StatusCodeResult(StatusCodes.Status409Conflict); - } - using (var fileStream = new FileStream(filePath, FileMode.Create)) - { - //Save the uploaded file to server - await UploadFiles.CopyToAsync(fileStream); - } - } - return Ok(); - } +

    @statusMessage

    +@code { + private string statusMessage = "Uploader not yet created."; - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here + private void OnUploaderCreated() { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) - { - //Delete the file from server - System.IO.File.Delete(filePath); - } - } + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } } {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Created Example](images/blazor-fileupload-created.gif) + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} {% highlight razor %} - - - +@using Syncfusion.Blazor.Inputs +@using System.Linq + + + +

    @validationMessage

    + @code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB + + private void OnFileSelected(SelectedEventArgs args) { - // Here, you can customize your code. + validationMessage = ""; + foreach (var file in args.FilesData) + { + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); + } } } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif) + + +## OnFileListRender -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. + +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor.Inputs + + + + + + +@code { + SfUploader fileobj; + private void OnFileListRenderHandler(FileListRenderingEventArgs args) + { + + } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %} - N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). ## See also @@ -336,4 +448,5 @@ 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-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) 3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) \ No newline at end of file +4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) +5. [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload) diff --git a/blazor/file-upload/getting-started-with-server-app.md b/blazor/file-upload/getting-started-with-server-app.md index 5943ebd4bf..f74d7ecccf 100644 --- a/blazor/file-upload/getting-started-with-server-app.md +++ b/blazor/file-upload/getting-started-with-server-app.md @@ -7,11 +7,11 @@ control: FileUpload documentation: ug --- -# Getting Started with Blazor File Upload Component in Server App +# Getting Started with Blazor File Upload Component -This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server Application using Visual Studio, Visual Studio Code, and the .NET CLI. -To get start quickly with Blazor File Upload, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload) sample: +To get started quickly with the Blazor File Upload, you can check out this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). {% tabcontents %} @@ -19,15 +19,15 @@ To get start quickly with Blazor File Upload, you can check on this [GitHub](htt ## 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 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-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 Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +You can create a **Blazor Server App** using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-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 Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) 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" %} @@ -46,7 +46,7 @@ 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 @@ -67,9 +67,9 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Press Ctrl+` to open the integrated terminal in Visual Studio Code. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -103,7 +103,7 @@ dotnet --version ## Create a Blazor Server App using .NET CLI -Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazorserver` command to create a new Blazor Server application in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +114,11 @@ 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 app project 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. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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 the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -149,7 +149,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 your Blazor Server App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} @@ -186,13 +186,19 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A //Blazor File Upload 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. -## Add Blazor File Upload component +## Add Syncfusion® Blazor File Upload component + +The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application. + +### Simple Code to render a Usable File Upload Component + +The most basic way to render the File Upload component is by adding the `` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally. Add the Syncfusion® Blazor File Upload 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. @@ -211,41 +217,60 @@ 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 File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} +![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif) -## Without server-side API endpoint +## Use ValueChange Event -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +The [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event fires when files are selected or removed from the uploader. This event is crucial for client-side processing of selected files, allowing you to access file details and their content, which is useful for previewing files or handling uploads without a server-side endpoint. -### Save and Remove actions +### Code Example -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +This example demonstrates how to use the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to save uploaded files directly to a local directory when the [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property is set to `true`. This is useful for scenarios where you want to process files immediately after selection without an explicit upload button. {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.Inputs +@using System.IO + + @code { private async Task OnChange(UploadChangeEventArgs args) { try { - foreach (var file in args.Files) + foreach (var fileEntry in args.Files) { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); + // Define a path where you want to save the file. + // For a Blazor Server app, this path will be on the server. + var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads"); + if (!Directory.Exists(uploadsFolder)) + { + Directory.CreateDirectory(uploadsFolder); + } + + // Construct the full file path. + var filePath = Path.Combine(uploadsFolder, fileEntry.FileInfo.Name); + + // Use a FileStream to write the uploaded file's content to the server. + await using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write)) + { + // OpenReadStream with long.MaxValue allows reading the entire stream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream); + } + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' saved successfully to '{filePath}'"); } } catch (Exception ex) { - Console.WriteLine(ex.Message); + Console.WriteLine($"Error saving file: {ex.Message}"); } } } @@ -253,20 +278,71 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. {% endhighlight %} {% endtabs %} -![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) +N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif) + + +## Memory stream -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system. + +### Code Example + +This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} + +@using Syncfusion.Blazor.Inputs +@using System.IO -Private void onRemove(RemovingEventArgs args) + + + + +@if (!string.IsNullOrEmpty(base64Image)) { - foreach(var removeFile in args.FilesData) +

    Uploaded Image Preview (Base64)

    + +} + +@code { + private string base64Image; + + private async Task OnValueChangeMemoryStream(UploadChangeEventArgs args) { - if (File.Exists(Path.Combine(@"rootPath", removeFile.Name))) + base64Image = string.Empty; // Clear previous image + + foreach (var fileEntry in args.Files) { - File.Delete(Path.Combine(@"rootPath", removeFile.Name)) + if (fileEntry.FileInfo.Type.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) + { + // Create a MemoryStream to hold the file content. + using var memoryStream = new MemoryStream(); + + // Copy the file's content from the upload stream to the MemoryStream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream); + + // Convert the MemoryStream content to a byte array. + byte[] imageBytes = memoryStream.ToArray(); + + // Convert byte array to Base64 string for display or further processing. + base64Image = Convert.ToBase64String(imageBytes); + Console.WriteLine($"Image '{fileEntry.FileInfo.Name}' loaded into MemoryStream and converted to Base64."); + } + else + { + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' is not an image and won't be processed for Base64 preview."); + // For non-image files, you could read their content as text or handle differently. + // Example for text file: + // memoryStream.Position = 0; // Reset stream position + // using var reader = new StreamReader(memoryStream); + // var content = await reader.ReadToEndAsync(); + // Console.WriteLine($"Content of {fileEntry.FileInfo.Name}: {content}"); + } } } } @@ -274,114 +350,145 @@ Private void onRemove(RemovingEventArgs args) {% endhighlight %} {% endtabs %} -## With server-side API endpoint +N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif) -The upload process requires save and remove action URL to manage the upload process in the server. -N> * The save action is necessary to handle the upload operation. -
    * The remove action is optional, one can handle the removed files from server. +## Created Event -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +### Code Example -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} -[Route("api/[controller]")] -public class SampleDataController : Controller -{ - public string uploads = ".\\Uploaded Files"; // replace with your directory path +@using Syncfusion.Blazor.Inputs - [HttpPost("[action]")] - public async Task Save(IFormFile UploadFiles) // Save the uploaded file here - { - if (UploadFiles.Length > 0) - { - //Create directory if not exists - if (!Directory.Exists(uploads)) - { - Directory.CreateDirectory(uploads); - } + + + - var filePath = Path.Combine(uploads, UploadFiles.FileName); - if (System.IO.File.Exists(filePath)) - { - //Return conflict status code - return new StatusCodeResult(StatusCodes.Status409Conflict); - } - using (var fileStream = new FileStream(filePath, FileMode.Create)) - { - //Save the uploaded file to server - await UploadFiles.CopyToAsync(fileStream); - } - } - return Ok(); - } +

    @statusMessage

    +@code { + private string statusMessage = "Uploader not yet created."; - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here + private void OnUploaderCreated() { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) - { - //Delete the file from server - System.IO.File.Delete(filePath); - } - } + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } } {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Created Example](images/blazor-fileupload-created.gif) + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} {% highlight razor %} - - - +@using Syncfusion.Blazor.Inputs +@using System.Linq + + + +

    @validationMessage

    + @code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB + + private void OnFileSelected(SelectedEventArgs args) { - // Here, you can customize your code. + validationMessage = ""; + foreach (var file in args.FilesData) + { + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); + } } } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif) + + +## OnFileListRender -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. + +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor.Inputs + + + + + + +@code { + SfUploader fileobj; + private void OnFileListRenderHandler(FileListRenderingEventArgs args) + { + + } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) \ No newline at end of file +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) +5. [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload) diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md index 53db73bd22..e40b214485 100644 --- a/blazor/file-upload/getting-started-with-web-app.md +++ b/blazor/file-upload/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor File Upload Component in Web App -This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code, and .NET CLI. {% tabcontents %} @@ -17,7 +17,7 @@ This section briefly explains about how to include [Blazor File Upload](https:// ## 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 @@ -25,13 +25,11 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp 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. -![Create Blazor Web App](images/blazor-create-web-app.png) - ## Install Syncfusion® Blazor Inputs and Themes NuGet in the Blazor Web App -To add **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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 utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -52,7 +50,7 @@ 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 @@ -63,7 +61,7 @@ Configure the appropriate interactive render mode and interactivity location whe For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight C# tabtitle="Blazor Web App" %} dotnet new blazor -o BlazorWebApp -int Auto cd BlazorWebApp @@ -72,17 +70,19 @@ 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 Inputs 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 utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Press Ctrl+` to open the integrated terminal in Visual Studio Code. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) 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" %} +{% highlight C# tabtitle="Package Manager" %} dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} @@ -103,14 +103,14 @@ N> Syncfusion® Blazor components are availa 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). {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle=".NET CLI" %} dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +## Create a Blazor Web project 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). 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. @@ -119,7 +119,7 @@ Configure the appropriate interactive render mode and interactivity location whe For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle=".NET CLI" %} dotnet new blazor -o BlazorApp -int Auto cd BlazorApp @@ -128,16 +128,16 @@ 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 project 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 Inputs and Themes NuGet in the App -Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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 the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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 you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle=".NET CLI" %} dotnet add package Syncfusion.Blazor.Inputs --version {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} @@ -154,7 +154,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -165,14 +165,14 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor Service +

    Register Syncfusion® Blazor Service

    Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your 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. {% tabs %} -{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} +{% highlight C# tabtitle="Server (~/Program.cs)" hl_lines="3 11" %} ... ... @@ -190,7 +190,7 @@ var app = builder.Build(); .... {% endhighlight %} -{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} +{% highlight C# tabtitle="Client (~/Program.cs)" hl_lines="2 5" %} ... using Syncfusion.Blazor; @@ -203,7 +203,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: @@ -217,16 +217,20 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A .... - //Blazor File Upload 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. -## Add Syncfusion® Blazor File Upload component +## Add Syncfusion® Blazor File Upload component -Add the Syncfusion® Blazor File Upload component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application. + +### Simple Code to render a Usable File Upload Component + +The most basic way to render the File Upload component is by adding the `` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally. | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -253,41 +257,60 @@ 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 File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} +![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif) -## Without server-side API endpoint +## Use ValueChange Event -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +The [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event fires when files are selected or removed from the uploader. This event is crucial for client-side processing of selected files, allowing you to access file details and their content, which is useful for previewing files or handling uploads without a server-side endpoint. -### Save and Remove actions +### Code Example -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +This example demonstrates how to use the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to save uploaded files directly to a local directory when the [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property is set to `true`. This is useful for scenarios where you want to process files immediately after selection without an explicit upload button. {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.Inputs +@using System.IO + + @code { private async Task OnChange(UploadChangeEventArgs args) { try { - foreach (var file in args.Files) + foreach (var fileEntry in args.Files) { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); + // Define a path where you want to save the file. + // For a Blazor Server app, this path will be on the server. + var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads"); + if (!Directory.Exists(uploadsFolder)) + { + Directory.CreateDirectory(uploadsFolder); + } + + // Construct the full file path. + var filePath = Path.Combine(uploadsFolder, fileEntry.FileInfo.Name); + + // Use a FileStream to write the uploaded file's content to the server. + await using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write)) + { + // OpenReadStream with long.MaxValue allows reading the entire stream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream); + } + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' saved successfully to '{filePath}'"); } } catch (Exception ex) { - Console.WriteLine(ex.Message); + Console.WriteLine($"Error saving file: {ex.Message}"); } } } @@ -295,20 +318,71 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. {% endhighlight %} {% endtabs %} -![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) +N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif) + -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +## Memory stream + +When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system. + +### Code Example + +This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} + +@using Syncfusion.Blazor.Inputs +@using System.IO -Private void onRemove(RemovingEventArgs args) + + + + +@if (!string.IsNullOrEmpty(base64Image)) { - foreach(var removeFile in args.FilesData) +

    Uploaded Image Preview (Base64)

    + +} + +@code { + private string base64Image; + + private async Task OnValueChangeMemoryStream(UploadChangeEventArgs args) { - if (File.Exists(Path.Combine(@"rootPath", removeFile.Name))) + base64Image = string.Empty; // Clear previous image + + foreach (var fileEntry in args.Files) { - File.Delete(Path.Combine(@"rootPath", removeFile.Name)) + if (fileEntry.FileInfo.Type.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) + { + // Create a MemoryStream to hold the file content. + using var memoryStream = new MemoryStream(); + + // Copy the file's content from the upload stream to the MemoryStream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream); + + // Convert the MemoryStream content to a byte array. + byte[] imageBytes = memoryStream.ToArray(); + + // Convert byte array to Base64 string for display or further processing. + base64Image = Convert.ToBase64String(imageBytes); + Console.WriteLine($"Image '{fileEntry.FileInfo.Name}' loaded into MemoryStream and converted to Base64."); + } + else + { + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' is not an image and won't be processed for Base64 preview."); + // For non-image files, you could read their content as text or handle differently. + // Example for text file: + // memoryStream.Position = 0; // Reset stream position + // using var reader = new StreamReader(memoryStream); + // var content = await reader.ReadToEndAsync(); + // Console.WriteLine($"Content of {fileEntry.FileInfo.Name}: {content}"); + } } } } @@ -316,108 +390,138 @@ Private void onRemove(RemovingEventArgs args) {% endhighlight %} {% endtabs %} -## With server-side API endpoint +N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif) -The upload process requires save and remove action URL to manage the upload process in the server. -N> * The save action is necessary to handle the upload operation. -
    * The remove action is optional, one can handle the removed files from server. +## Created Event -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +### Code Example -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} -[Route("api/[controller]")] -public class SampleDataController : Controller -{ - public string uploads = ".\\Uploaded Files"; // replace with your directory path +@using Syncfusion.Blazor.Inputs - [HttpPost("[action]")] - public async Task Save(IFormFile UploadFiles) // Save the uploaded file here - { - if (UploadFiles.Length > 0) - { - //Create directory if not exists - if (!Directory.Exists(uploads)) - { - Directory.CreateDirectory(uploads); - } + + + - var filePath = Path.Combine(uploads, UploadFiles.FileName); - if (System.IO.File.Exists(filePath)) - { - //Return conflict status code - return new StatusCodeResult(StatusCodes.Status409Conflict); - } - using (var fileStream = new FileStream(filePath, FileMode.Create)) - { - //Save the uploaded file to server - await UploadFiles.CopyToAsync(fileStream); - } - } - return Ok(); - } +

    @statusMessage

    +@code { + private string statusMessage = "Uploader not yet created."; - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here + private void OnUploaderCreated() { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) - { - //Delete the file from server - System.IO.File.Delete(filePath); - } - } + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } } {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Created Example](images/blazor-fileupload-created.gif) + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} {% highlight razor %} - - - +@using Syncfusion.Blazor.Inputs +@using System.Linq + + + +

    @validationMessage

    + @code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB + + private void OnFileSelected(SelectedEventArgs args) { - // Here, you can customize your code. + validationMessage = ""; + foreach (var file in args.FilesData) + { + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); + } } } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif) + + +## OnFileListRender + +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor.Inputs + + + + + + +@code { + SfUploader fileobj; + private void OnFileListRenderHandler(FileListRenderingEventArgs args) + { + + } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). @@ -427,4 +531,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 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) 4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) - +5. [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload) diff --git a/blazor/file-upload/getting-started.md b/blazor/file-upload/getting-started.md index 2a500c5009..4b2ec2aca6 100644 --- a/blazor/file-upload/getting-started.md +++ b/blazor/file-upload/getting-started.md @@ -7,9 +7,9 @@ control: File Upload documentation: ug --- -# Getting Started with Blazor File Upload Component in WASM App +# Getting Started with Blazor File Upload Component -This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. +This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -17,15 +17,15 @@ This section briefly explains about how to include [Blazor File Upload](https:// ## 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-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). +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). -## Install Syncfusion® Blazor Inputs and Themes NuGet in the App +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor File Upload** 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) 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" %} @@ -36,7 +36,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 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. {% endtabcontent %} @@ -44,11 +44,11 @@ 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). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=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 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+`). @@ -63,11 +63,11 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor Inputs and Themes NuGet in the App +## Install Syncfusion® Blazor Inputs 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.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Press Ctrl+` to open the integrated terminal in Visual Studio Code. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -81,7 +81,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 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. {% endtabcontent %} @@ -99,9 +99,9 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +## Create a Blazor WebAssembly project using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly application in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -112,11 +112,11 @@ 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 project 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. -## Install Syncfusion® Blazor Inputs and Themes NuGet in the App +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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 the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) 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. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -128,7 +128,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 list with component details. {% endtabcontent %} @@ -147,9 +147,9 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +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" %} @@ -171,7 +171,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 and script references in the `` section of the **~/index.html** file. @@ -187,9 +187,22 @@ 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 Upload component +## Add Syncfusion® Blazor File Upload component -Add the Syncfusion® Blazor File Upload component in the **~/Pages/Index.razor** file. +The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application. + +## Simple Code to render a Usable File Upload Component + +The most basic way to render the File Upload component is by adding the `` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally. + +Add the Syncfusion® Blazor File Upload 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. + +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. + +``` +@* desired render mode define here *@ +@rendermode InteractiveServer +``` {% tabs %} {% highlight razor %} @@ -199,41 +212,60 @@ Add the Syncfusion® Blazor File Upload comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} +![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif) -## Without server-side API endpoint +## Use ValueChange Event -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +The [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event fires when files are selected or removed from the uploader. This event is crucial for client-side processing of selected files, allowing you to access file details and their content, which is useful for previewing files or handling uploads without a server-side endpoint. -### Save and Remove actions +### Code Example -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +This example demonstrates how to use the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to save uploaded files directly to a local directory when the [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property is set to `true`. This is useful for scenarios where you want to process files immediately after selection without an explicit upload button. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} @using Syncfusion.Blazor.Inputs +@using System.IO + + @code { private async Task OnChange(UploadChangeEventArgs args) { try { - foreach (var file in args.Files) + foreach (var fileEntry in args.Files) { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); + // Define a path where you want to save the file. + // For a Blazor Server app, this path will be on the server. + var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads"); + if (!Directory.Exists(uploadsFolder)) + { + Directory.CreateDirectory(uploadsFolder); + } + + // Construct the full file path. + var filePath = Path.Combine(uploadsFolder, fileEntry.FileInfo.Name); + + // Use a FileStream to write the uploaded file's content to the server. + await using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write)) + { + // OpenReadStream with long.MaxValue allows reading the entire stream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream); + } + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' saved successfully to '{filePath}'"); } } catch (Exception ex) { - Console.WriteLine(ex.Message); + Console.WriteLine($"Error saving file: {ex.Message}"); } } } @@ -241,85 +273,70 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. {% endhighlight %} {% endtabs %} -![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) +N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files. -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% tabs %} -{% highlight cshtml %} +![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif) -Private void onRemove(RemovingEventArgs args) -{ - foreach(var removeFile in args.FilesData) - { - if (File.Exists(Path.Combine(@"rootPath", removeFile.Name))) - { - File.Delete(Path.Combine(@"rootPath", removeFile.Name)) - } - } -} -{% endhighlight %} -{% endtabs %} +## Memory stream -## With server-side API endpoint +When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system. -The upload process requires save and remove action URL to manage the upload process in the server. +### Code Example -N> * The save action is necessary to handle the upload operation. -
    * The remove action is optional, one can handle the removed files from server. +This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O. -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. - -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +{% tabs %} +{% highlight razor %} -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +@using Syncfusion.Blazor.Inputs +@using System.IO -{% tabs %} -{% highlight cshtml %} + + + -[Route("api/[controller]")] -public class SampleDataController : Controller +@if (!string.IsNullOrEmpty(base64Image)) { - public string uploads = ".\\Uploaded Files"; // replace with your directory path +

    Uploaded Image Preview (Base64)

    + +} + +@code { + private string base64Image; - [HttpPost("[action]")] - public async Task Save(IFormFile UploadFiles) // Save the uploaded file here + private async Task OnValueChangeMemoryStream(UploadChangeEventArgs args) { - if (UploadFiles.Length > 0) - { - //Create directory if not exists - if (!Directory.Exists(uploads)) - { - Directory.CreateDirectory(uploads); - } + base64Image = string.Empty; // Clear previous image - var filePath = Path.Combine(uploads, UploadFiles.FileName); - if (System.IO.File.Exists(filePath)) - { - //Return conflict status code - return new StatusCodeResult(StatusCodes.Status409Conflict); - } - using (var fileStream = new FileStream(filePath, FileMode.Create)) + foreach (var fileEntry in args.Files) + { + if (fileEntry.FileInfo.Type.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) { - //Save the uploaded file to server - await UploadFiles.CopyToAsync(fileStream); + // Create a MemoryStream to hold the file content. + using var memoryStream = new MemoryStream(); + + // Copy the file's content from the upload stream to the MemoryStream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream); + + // Convert the MemoryStream content to a byte array. + byte[] imageBytes = memoryStream.ToArray(); + + // Convert byte array to Base64 string for display or further processing. + base64Image = Convert.ToBase64String(imageBytes); + Console.WriteLine($"Image '{fileEntry.FileInfo.Name}' loaded into MemoryStream and converted to Base64."); } - } - return Ok(); - } - - - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here - { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) + else { - //Delete the file from server - System.IO.File.Delete(filePath); + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' is not an image and won't be processed for Base64 preview."); + // For non-image files, you could read their content as text or handle differently. + // Example for text file: + // memoryStream.Position = 0; // Reset stream position + // using var reader = new StreamReader(memoryStream); + // var content = await reader.ReadToEndAsync(); + // Console.WriteLine($"Content of {fileEntry.FileInfo.Name}: {content}"); } } } @@ -328,181 +345,146 @@ public class SampleDataController : Controller {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server. -{% tabs %} -{% highlight razor %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - - - -@code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) - { - // Here, you can customize your code. - } -} +![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif) -{% endhighlight %} -{% endtabs %} - -### Server-side configuration for saving and returning responses -The following example demonstrates the server-side action for saving files on the server and returning responses in JSON, String, and File formats. +## Created Event -{% tabs %} -{% highlight cshtml %} +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. -[Route("api/[controller]")] +### Code Example -private IHostingEnvironment hostingEnv; +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. -public SampleDataController(IHostingEnvironment env) -{ - this.hostingEnv = env; -} - -[HttpPost("[action]")] -public IActionResult Save() -{ - // for JSON Data - try - { - // Process uploaded files - var responseData = new - { - Success = true, - Message = "Files uploaded successfully", - // Additional data can be added here - }; +{% tabs %} +{% highlight razor %} - return Ok(responseData); - } - catch (Exception e) - { - var errorResponse = new - { - Success = false, - Message = "File upload failed: " + e.Message - }; +@using Syncfusion.Blazor.Inputs - return BadRequest(errorResponse); - } + + + - // for String Data - try - { - // Process string data - var data = "success"; - // Return the string data - return Content(data); - } - catch (Exception) - { - var data = "failed"; - return Content(data); - } +

    @statusMessage

    - // for File Data - try - { - // Example: Retrieve file path for stream.txt - var filePath = "stream.txt"; // Example file path - - var fullPath = Path.GetFullPath(filePath); +@code { + private string statusMessage = "Uploader not yet created."; - // Return the file - return PhysicalFile(fullPath, "text/plain"); - } - catch (Exception e) + private void OnUploaderCreated() { - return Content("Failed to retrieve file response: " + e.Message, "text/plain"); + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } - } {% endhighlight %} {% endtabs %} -### Client-side configuration for saving and returning responses +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. -The following example demonstrates the client-side action for saving files on the server and returning responses in JSON, String, and File formats. +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Created Example](images/blazor-fileupload-created.gif) + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} @using Syncfusion.Blazor.Inputs -@using System.Text.Json +@using System.Linq - - - - + + +

    @validationMessage

    @code { + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB - private void OnSuccessHandler(SuccessEventArgs args) + private void OnFileSelected(SelectedEventArgs args) { - if (args.Response is not null) // Check if the event argument is not null + validationMessage = ""; + foreach (var file in args.FilesData) { - var responseText = args.Response.ResponseText; - if (!string.IsNullOrWhiteSpace(responseText)) - { - // for JSON and File Datas - using var jsonDoc = JsonDocument.Parse(responseText); - var jsonResponse = jsonDoc.RootElement; - - if (jsonResponse.TryGetProperty("success", out var successProp)) - { - var isSuccess = successProp.GetBoolean(); - - if (isSuccess) - { - // File upload success - var message = jsonResponse.TryGetProperty("message", out var messageProp) ? messageProp.GetString() : "File uploaded successfully"; - - // Additional processing as needed - } - } - - - // for string Data - var message = responseText; - // Additional processing as needed - } + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); } } - } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif) + + +## OnFileListRender + +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. + +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor.Inputs + + + + + + +@code { + SfUploader fileobj; + private void OnFileListRenderHandler(FileListRenderingEventArgs args) + { + + } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). + ## See also * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) * [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) +* [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload) diff --git a/blazor/file-upload/images/AllowMultiple.gif b/blazor/file-upload/images/AllowMultiple.gif new file mode 100644 index 0000000000..103bcb5bca Binary files /dev/null and b/blazor/file-upload/images/AllowMultiple.gif differ diff --git a/blazor/file-upload/images/AllowedExtension.gif b/blazor/file-upload/images/AllowedExtension.gif new file mode 100644 index 0000000000..89e3996ecf Binary files /dev/null and b/blazor/file-upload/images/AllowedExtension.gif differ diff --git a/blazor/file-upload/images/AutoUpload.gif b/blazor/file-upload/images/AutoUpload.gif new file mode 100644 index 0000000000..b5a5a5a44d Binary files /dev/null and b/blazor/file-upload/images/AutoUpload.gif differ diff --git a/blazor/file-upload/images/blazor-file-upload-browser.png b/blazor/file-upload/images/blazor-file-upload-browser.png new file mode 100644 index 0000000000..a294438247 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-browser.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-container.png b/blazor/file-upload/images/blazor-file-upload-container.png new file mode 100644 index 0000000000..cd52e6a7db Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-container.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-content.png b/blazor/file-upload/images/blazor-file-upload-content.png new file mode 100644 index 0000000000..2eb9452a45 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-content.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-cssclass.png b/blazor/file-upload/images/blazor-file-upload-cssclass.png new file mode 100644 index 0000000000..1ceabe3c81 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-cssclass.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-file-list.gif b/blazor/file-upload/images/blazor-file-upload-file-list.gif new file mode 100644 index 0000000000..522d59e56e Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-file-list.gif differ diff --git a/blazor/file-upload/images/blazor-file-upload-progress.gif b/blazor/file-upload/images/blazor-file-upload-progress.gif new file mode 100644 index 0000000000..894bf61fa9 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-progress.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-basic.gif b/blazor/file-upload/images/blazor-fileupload-basic.gif new file mode 100644 index 0000000000..68ffe86d17 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-basic.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-cancelasync.gif b/blazor/file-upload/images/blazor-fileupload-cancelasync.gif new file mode 100644 index 0000000000..9a2be6fb47 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-cancelasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-clearallasync.gif b/blazor/file-upload/images/blazor-fileupload-clearallasync.gif new file mode 100644 index 0000000000..4d95090840 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-clearallasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-clipboard-paste.gif b/blazor/file-upload/images/blazor-fileupload-clipboard-paste.gif new file mode 100644 index 0000000000..c624727cb2 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-clipboard-paste.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-created.gif b/blazor/file-upload/images/blazor-fileupload-created.gif new file mode 100644 index 0000000000..11759f373a Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-created.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drag-and-drop-copy.gif b/blazor/file-upload/images/blazor-fileupload-drag-and-drop-copy.gif new file mode 100644 index 0000000000..75af61547c Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drag-and-drop-copy.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drop-area-customization.gif b/blazor/file-upload/images/blazor-fileupload-drop-area-customization.gif new file mode 100644 index 0000000000..ce41052662 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drop-area-customization.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drop-area-link.gif b/blazor/file-upload/images/blazor-fileupload-drop-area-link.gif new file mode 100644 index 0000000000..a9f67392f5 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drop-area-link.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drop-area-move.gif b/blazor/file-upload/images/blazor-fileupload-drop-area-move.gif new file mode 100644 index 0000000000..d06141df70 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drop-area-move.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drop-area-none.gif b/blazor/file-upload/images/blazor-fileupload-drop-area-none.gif new file mode 100644 index 0000000000..c477045b95 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drop-area-none.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-fileselected.gif b/blazor/file-upload/images/blazor-fileupload-fileselected.gif new file mode 100644 index 0000000000..8617f4b867 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-fileselected.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-getfiledetails.gif b/blazor/file-upload/images/blazor-fileupload-getfiledetails.gif new file mode 100644 index 0000000000..ff9364144e Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-getfiledetails.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-getfilesdataasync.gif b/blazor/file-upload/images/blazor-fileupload-getfilesdataasync.gif new file mode 100644 index 0000000000..ff2b997c97 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-getfilesdataasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-memorystream.gif b/blazor/file-upload/images/blazor-fileupload-memorystream.gif new file mode 100644 index 0000000000..f2146ef200 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-memorystream.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-removeasync.gif b/blazor/file-upload/images/blazor-fileupload-removeasync.gif new file mode 100644 index 0000000000..889395d97b Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-removeasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-uploadasync.gif b/blazor/file-upload/images/blazor-fileupload-uploadasync.gif new file mode 100644 index 0000000000..bf9c7e1ecc Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-uploadasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-valuechange.gif b/blazor/file-upload/images/blazor-fileupload-valuechange.gif new file mode 100644 index 0000000000..afd16653d8 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-valuechange.gif differ diff --git a/blazor/file-upload/localization.md b/blazor/file-upload/localization.md index e7c6883315..bd91e668f1 100644 --- a/blazor/file-upload/localization.md +++ b/blazor/file-upload/localization.md @@ -1,7 +1,7 @@ --- layout: post title: Localization in Blazor File Upload Component | Syncfusion -description: Checkout and learn here all about Localization in Syncfusion Blazor File Upload component and much more. +description: Learn how to translate labels and tooltips in the Syncfusion Blazor File Upload component to different cultures. platform: Blazor control: File Upload documentation: ug @@ -9,4 +9,13 @@ documentation: ug # Localization in Blazor File Upload Component -[Blazor FileUpload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. \ No newline at end of file +The Syncfusion Blazor File Upload component can be localized to display static text, such as button labels and tooltips, in different languages. This is achieved by adding a resource file (`.resx`) for each culture and referencing it in your application. + +The following UI elements of the File Upload component can be localized: + +* **Browse button text:** The label for the file selection button. +* **Drop area hint:** The "Or drop files here" message. +* **File status messages:** Text indicating success, failure, or upload progress. +* **Action button tooltips:** Tooltips for buttons like "Clear" and "Upload." + +To learn more about localizing Syncfusion Blazor components, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation topic. \ No newline at end of file diff --git a/blazor/file-upload/style-appearance.md b/blazor/file-upload/style-appearance.md index 8704c9c106..4bca884a09 100644 --- a/blazor/file-upload/style-appearance.md +++ b/blazor/file-upload/style-appearance.md @@ -1,61 +1,137 @@ --- layout: post -title: Style and appearance in Blazor File Upload Component | Syncfusion -description: Checkout and learn here all about Style and appearance in Syncfusion Blazor File Upload component and more. +title: File Upload Customization in Blazor File Upload Component | Syncfusion +description: Learn how to style the Syncfusion Blazor File Upload component using CSS to customize its container, buttons, file list, content area, and progress bar. platform: Blazor control: File Upload documentation: ug --- -# Style and appearance in Blazor File Upload Component +# File Uploader Customization in Blazor -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The visual appearance of the Syncfusion Blazor File Upload component can be extensively customized using CSS to align with your application's theme and style. This document provides a detailed guide to the component's CSS structure, enabling you to tailor its look and feel. By targeting specific CSS classes, you can modify elements such as the container, buttons, drop area, file list, and progress bar. For best results, it is recommended to use the CssClass property to apply a custom class, which helps scope your styles and prevent them from affecting other components. -## Customizing the appearance of File Upload container element +## CssClass Property -Use the following CSS to customize the appearance of File Upload container element. +The File Upload component allows you to add a custom CSS class to its wrapper element using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CssClass) property. This approach helps scope customizations and prevents unintended global style changes. + +```csharp +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void OnChange(UploadChangeEventArgs args) + { + // here you can get uploaded file data + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVeDkrSTBqHOkfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with custom styles applied using CssClass](./images/blazor-file-upload-cssclass.png) + +By using the `e-custom-uploader` class, you can target specific elements within the File Upload component. + +## Customizing the Container + +Customize the main container of the File Upload component to control its overall dimensions and spacing. To scope your changes, target the custom class assigned via the `CssClass` property followed by the component's default class selectors. ```css -/* To specify height */ -.e-upload.e-control-wrapper, .e-bigger.e-small .e-upload.e-control-wrapper { - height: 300px; - width: 300px; +/* To specify a custom height, width and padding */ +.e-upload.e-control-wrapper { + height: 200px; + width: 300px; + padding: 30px; } ``` -## Customizing the File Upload browse button +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSDuVSpLzhuZgm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized container size](./images/blazor-file-upload-container.png) -Use the following CSS to customize the File Upload browse button +## Customizing the Browse Button + +Alter the **Browse** button's appearance by targeting the `.e-file-select-wrap .e-btn` selector within your custom class. This allows you to style properties like `background-color`, `color`, and `font-family` to match your application's design. ```css -/* To specify font size and color */ -.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn, .e-bigger.e-small .e-upload .e-upload-actions .e-btn { - font-family: cursive; - height: 40px; - background-color: aquamarine; - color: coral; +/* To specify font styles, background, and color */ +.e-upload .e-file-select-wrap .e-btn { + font-family: 'cursive'; + height: 40px; + background-color: #ead228; + color: #ca3d09; } ``` -## Customizing the File Upload content +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVItYBoTrJQsbao?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized Browse button](./images/blazor-file-upload-browser.png) + +## Customizing the Content Area -Use the following CSS to customize the File Upload content +Style the drop zone where users drag and drop files to provide better visual feedback. Use the `.e-file-drop` selector scoped with your custom class to adjust properties like `font-size` and `color`. ```css /* To specify font size and color */ -.e-upload .e-file-select-wrap .e-file-drop, .e-bigger.e-small .e-upload .e-file-select-wrap .e-file-drop { - font-size: 20px; - color: aqua; +.e-upload .e-file-select-wrap .e-file-drop { + font-size: 20px; + color: aqua; } ``` -## Customizing the uploaded file container in File Upload +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhetarophoebktx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Use the following CSS to customize the uploaded file container in File Upload +![Blazor File Upload with a customized content area](./images/blazor-file-upload-content.png) + +## Customizing the File List + +Customize the appearance of the file list that displays selected files. Target the `.e-upload-file-list` selector within your custom class to apply styles like `background-color` to the list container. ```css -/* To specify background color */ +/* To specify a background color */ .e-upload .e-upload-files .e-upload-file-list { - background-color: beige; + background-color: beige; +} +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrIjEVIphdshIUl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized file list background](./images/blazor-file-upload-file-list.gif) + +## Customizing the Progress Bar + +Provide a consistent look during file uploads by customizing the progress bar and its text. Use the `.e-upload-progress-bar` and `.e-progress-bar-text` selectors, scoped with your custom class, to control properties like `background-color` and `font-weight`. + +```css +/* To specify the background color of the progress bar */ +.e-upload .e-upload-files .e-upload-progress-wrap .e-upload-progress-bar { + background: green; +} + +/* To specify the color of the progress bar text */ +.e-upload .e-upload-files .e-upload-progress-wrap .e-progress-bar-text { + color: #288928; + font-weight: bold; } ``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVetaVyzLHkRSPG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized progress bar](./images/blazor-file-upload-progress.gif) + +## See Also + +* [How to create a responsive, full-height file uploader](https://support.syncfusion.com/kb/article/21232/how-to-create-a-responsive-full-height-file-uploader-in-blazor) +* [How to customize button text](https://support.syncfusion.com/kb/article/17457/customizing-button-text-in-blazor-file-upload-component) +* [How to center the Clear and Upload buttons](https://support.syncfusion.com/kb/article/17534/how-to-center-the-clear-and-upload-buttons-in-blazor-file-upload) +* [How to customize the tooltip for the browse button](https://support.syncfusion.com/kb/article/16150/how-to-customize-tooltip-for-browse-button-in-blazor-file-upload) \ No newline at end of file diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-schedule-task.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-custom-schedule-task.PNG deleted file mode 100644 index 9e2da0c3e3..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-custom-schedule-task.PNG and /dev/null differ diff --git a/blazor/image-editor/accessibility.md b/blazor/image-editor/accessibility.md index 3d45a2c370..ae79e36b99 100644 --- a/blazor/image-editor/accessibility.md +++ b/blazor/image-editor/accessibility.md @@ -1,15 +1,15 @@ --- layout: post title: Accessibility in Blazor Image Editor component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor Image Editor component and more. +description: Learn about accessibility support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor -control: Progress Button +control: Image Editor documentation: ug --- # Accessibility in Blazor Image Editor component -The Blazor Image Editor component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor Image Editor component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor Image Editor component is outlined below. @@ -39,25 +39,25 @@ The accessibility compliance for the Blazor Image Editor component is outlined b ## Keyboard interaction -The Blazor Image Editor component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Image Editor component. +The Blazor Image Editor component follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Image Editor component. | Windows | Mac | Actions | | --- | --- | --- | -| Ctrl + Z | ⌘ + Z | Undo the last user action. | -| Ctrl + Y | ⌘ + Y | Redo the last user action. | -| Ctrl + S | ⌘ + S | To save the Image. | -| Ctrl + O | ⌘ + O | To open the Image. | -| Delete | Delete | To delete the shape once the shape got selected through mouse click . | -| Enter | Enter | To apply Selection Crop or Image Resize. | -| Escape | Escape | To discard operations performed in the Image Editor, such as annotation drawings, crop selection, and more. | +| Ctrl + Z | ⌘ + Z | Undo the last action. | +| Ctrl + Y | ⌘ + Y | Redo the last action. | +| Ctrl + S | ⌘ + S | Save the image. | +| Ctrl + O | ⌘ + O | Open an image. | +| Delete | Delete | Delete the selected shape. | +| Enter | Enter | Apply selection crop or image resize. | +| Escape | Escape | Discard operations such as annotation drawings and crop selections. | ## Ensuring accessibility -The Blazor Image Editor component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Image Editor component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -The accessibility compliance of the Blazor Image Editor component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/image-editor) in a new window to evaluate the accessibility of the Blazor Image Editor component with accessibility tools. +The accessibility compliance of the Blazor Image Editor component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/image-editor) in a new window to evaluate the Blazor Image Editor component with accessibility tools. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLfZMhEziJhvXKH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrICNDYqKacaGsS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## See also diff --git a/blazor/image-editor/end-user-capabilities.md b/blazor/image-editor/end-user-capabilities.md index 357277c481..567d6e0c30 100644 --- a/blazor/image-editor/end-user-capabilities.md +++ b/blazor/image-editor/end-user-capabilities.md @@ -1,7 +1,7 @@ --- layout: post title: End-user capabilities with Blazor Image Editor Component | Syncfusion -description: Checkout the end-user capabilities available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore end-user capabilities in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,174 +9,177 @@ documentation: ug # End-user capabilities in the Blazor Image Editor component -The following operations are available for end-users and the same is explained briefly in these sections. +The following operations are available for end users and are outlined in the sections below. ## Open an image -To open an image in the image editor, do the following steps. +To open an image in the image editor, follow these steps: -* Click the Open icon from the left side of the toolbar. +* Click the Open icon on the left side of the toolbar. -* The file explorer lists only JPEG, PNG, JPG, WEBP and BMP format files. +* The file explorer lists only JPEG, PNG, JPG, WEBP, and BMP files. -* Select the image from the list of the images from the file explorer window. +* Select an image from the file explorer to load it in the editor. ![Blazor Image Editor with Opening an image showcase](./images/blazor-image-editor-open.gif) ## Zooming -Image zooming can be performed in the following ways. +Image zooming can be performed in the following ways: -* Using toolbar. +* Using the toolbar -* Using pinch zoom in touch enabled devices. +* Using pinch zoom on touch-enabled devices -* Using mouse wheel. +* Using the mouse wheel -* Using keyboard. +* Using the keyboard ![Blazor Image Editor with Zoom In/ Out an image showcase](./images/blazor-image-editor-end-zoom.jpg) ### Using toolbar -To zoom in or out the image in the image editor, do the following steps. +To zoom the image using the toolbar: -* The Zoom In/ Out option only enabled after opening the image. +* Zoom In/Out options are enabled after opening an image. ### Using pinch -To zoom in or out the image in the image editor, do the following steps. +To zoom the image using touch gestures: -* Touch with two fingers to perform zooming. +* Perform a two-finger pinch gesture to zoom in or out. -* Zoom in and out controlled by touch gestures. +* Zoom level is controlled by the pinch distance. ### Using mouse wheel -To zoom in or out the image in the image editor, do the following steps. +To zoom the image using the mouse: -* Press the ctrl key and scroll the mouse wheel to perform zooming. +* Press Ctrl and scroll the mouse wheel to zoom in or out. -* The zoom in and out controlled by the mouse wheel. +* Zoom level is adjusted based on the scroll direction. ### Using keyboard -To zoom in or out the image in the image editor, do the following steps. +To zoom the image using keyboard shortcuts: -* Press the ctrl key with ‘+’ button from the keyboard to zoom in an image. +* Press Ctrl + ‘+’ to zoom in. -* Press the ctrl key with ‘-’ button from the keyboard to zoom out an image. +* Press Ctrl + ‘−’ to zoom out. ## Panning -To pan an image in the image editor, do the following steps. +To pan the image in the editor: -* Click on the image and do dragging to move or pan the image. +* Click and drag on the image to move it within the canvas. -* Panning option will be enabled in the following two cases. +* Panning is enabled in the following cases: - * If the selection is applied for cropping an image. + * When a selection is active for cropping. - * If the image size exceeds the canvas size while zooming an image. + * When the image size exceeds the canvas size due to zooming. ![Blazor Image Editor with Panning an image showcase](./images/blazor-image-editor-pan.gif) ## Cropping and image transformation -To crop an image in the image editor, do the following steps. +To crop and transform an image: -* Cropping can be performed based on the selection in an image editor. +* Cropping is based on a selection within the editor. -* To perform selection, click the crop button in the toolbar which opens the contextual toolbar that shows crop selection options, rotate options, flip options, and straightening options. +* Click the Crop button on the toolbar to open the contextual toolbar with crop selection, rotate, flip, and straighten options. -* Click the crop selection button and select the type of selection such as custom, circle, square, and ratio selection from the popup. +* Click the crop selection button and choose a selection type: custom, circle, square, or ratio. -* Once selection is completed, do panning to move the image to get the cropped region. +* After creating a selection, pan the image to position the desired crop region. -* Utilize the rotate and flip buttons along with the straighten slider to perform image transformations, including any inserted annotations. +* Use rotate and flip buttons and the straighten slider to apply transformations, including to inserted annotations. -* Once the cropping region is finalized in the image click the tick icon at the top right of the toolbar to crop the image. +* When the crop region is finalized, click the tick icon at the top-right of the toolbar to apply the crop. ![Blazor Image Editor with Cropping and Image Transformation showcase](./images/blazor-image-editor-end-crop.jpg) ## Image annotation -To add annotations to an image in the image editor, do the following steps. +To add and modify annotations: -* To add annotation, click the annotation button in the toolbar and select the type of annotations such as Line, Rectangle, Ellipse, Path, Arrow, Text, or Freehand drawing to be inserted to the image editor. +* Click the annotation button on the toolbar and choose an annotation type: Line, Rectangle, Ellipse, Path, Arrow, Text, or Freehand Drawing. -* Once the annotation is added to the image, that can be repositioned by clicking and dragging the annotations using mouse as well as resized by clicking and resizing the selection circle to be placed around the annotations. +* Click and drag on the image to draw the selected annotation. -* To rotate annotations, you can simply grab the circle located at the bottom of the annotation. The rotation can be applicable to all the annotations except text annotation. +* After insertion, annotations can be repositioned by clicking and dragging with the mouse, and resized by interacting with the selection circle placed around the annotation. -* Customize the annotations by changing their color, stroke width, font family, and font size through the contextual toolbar. The contextual toolbar will be enabled whenever the annotations are selected. +* To rotate an annotation, drag the circle at the bottom of the annotation. -* When annotations are selected in the image editor, the quick access toolbar becomes active, providing convenient access to various actions such as duplicating, deleting, or editing text associated with the selected annotation. This toolbar enables users to perform these common operations quickly and efficiently, streamlining their workflow and enhancing the overall editing experience. +* Customize annotations using the contextual toolbar: color, stroke width, font family, and font size. The contextual toolbar appears when an annotation is selected. + +* When annotations are selected, the quick access toolbar enables common actions such as duplicate, delete, and edit text to streamline editing. ![Blazor Image Editor with annotation showcase](./images/blazor-image-editor-end-annotation.jpg) -## Filtering and fine-tune +## Fine-tune -To perform fine-tuning on an image in the image editor, do the following steps. +To apply fine-tuning adjustments: -* Click the fine-tune button which displays the list of fine-tuning available in the image editor. +* Click the Fine-tune button to display available adjustments. -* Click one of the fine-tune options from the list of options which shows a slider to adjust the corresponding filter. +* Choose an adjustment to display a slider for control. -* Click on the canvas or tick icon at the right corner of the toolbar in the image editor to apply the modifications. +* Click on the canvas or the tick icon at the right corner of the toolbar to apply changes. ![Blazor Image Editor with Filtering and finetune showcase](./images/blazor-image-editor-end-finetune.jpg) -To apply filters on an image in the image editor, do the following steps. +## Filter + +To apply filters: -* Click the filter button which displays the list of filters available in the image editor. +* Click the Filter button to display available filters. -* Click the filter from list of options to apply the corresponding filter to an image. +* Select a filter to apply it to the image. -* Click on the canvas or tick icon at the right corner of the toolbar in the image editor to apply the modifications. +* Click on the canvas or the tick icon at the right corner of the toolbar to apply changes. ![Blazor Image Editor with Filtering and finetune showcase](./images/blazor-image-editor-end-filter.jpg) ## Undo and redo the operations -To undo and redo the actions performed in an image editor, do the following steps. +To undo and redo actions in the editor: -* The undo button will be enabled once the action is performed in an image editor. +* The Undo button is enabled after an action is performed. -* The redo button will be enabled once the undo action is performed in an image editor. +* The Redo button is enabled after an undo action is performed. -* Click the undo or redo button at the left side of the toolbar to perform undo and redo operation. +* Click the Undo or Redo button on the left side of the toolbar. -* Ctrl + Z and Ctrl + Y facilitates this process by allowing users to undo and redo actions, respectively. +* Keyboard shortcuts: Ctrl + Z (undo) and Ctrl + Y (redo). ![Blazor Image Editor with Undo and redo showcase](./images/blazor-image-editor-undo-redo.gif) ## Reset an image -To revert all the changes done in an image editor, do the following steps. +To revert all changes in the editor: -* Click the reset button which is located on the right side of the toolbar. +* Click the Reset button on the right side of the toolbar. -* This will revert all the changes performed in the image editor. +* This action reverts all modifications applied in the editor. ## Export an image To save the modified image in the Image Editor, follow these steps: -* Click the Save Button - * Locate the Save button on the right side of the toolbar and click it. +* Click the Save button + * Locate the Save button on the right side of the toolbar and click it. -* Select the File Format - * In the export popup, choose your preferred file format (PNG, JPEG, SVG, or WEBP) to save the image with all -applied modifications. +* Select the file format + * In the export popup, choose the preferred file format (PNG, JPEG, SVG, or WEBP) to save the image with all applied modifications. -* Adjust Image Quality (JPEG Format Only) - * If saving in JPEG, use the Image Quality slider to set the desired quality level (0-100). A higher value retains more detail but increases file size. +* Adjust image quality (JPEG only) + * If saving as JPEG, use predefined settings (Good, Great, Highest) or use the Image Quality slider (0–100). Higher values retain more detail and increase file size. -* Download the Image - * Click Download to save the modified image to your device. +* Download the image + * Click Download to save the modified image. -* Use Keyboard Shortcut (Ctrl + S) - * Press Ctrl + S to download the image in the same format as the loaded image without opening the Save dialog. For example, if the loaded image is PNG, it will be saved as PNG. +* Use keyboard shortcut (Ctrl + S) + * Press Ctrl + S to download the image in the same format as the loaded image without opening the Save dialog. For example, if the loaded image is PNG, it will be saved as PNG. ![Blazor Image Editor with Export an image showcase](./images/blazor-image-editor-end-save.jpg) \ No newline at end of file diff --git a/blazor/image-editor/filter.md b/blazor/image-editor/filter.md index 654ce0e94d..58002d84e5 100644 --- a/blazor/image-editor/filter.md +++ b/blazor/image-editor/filter.md @@ -1,7 +1,7 @@ --- layout: post title: Filter with Blazor Image Editor Component | Syncfusion -description: Checkout the Filter available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore image filter options in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,13 +9,11 @@ documentation: ug # Filters in the Blazor Image Editor component -Filters are pre-defined effects that can be applied to an image to alter its appearance or mood. Image filters can be used to add visual interest or to enhance certain features of the image. Some common types of image filters include cold, warm, chrome, sepia, and invert. +Filters are predefined effects that modify an image’s appearance or mood. They can add visual emphasis or enhance specific elements of an image. Common filters include cold, warm, chrome, sepia, and invert. ## Apply filter effect -The [`ApplyImageFilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ApplyImageFilterAsync_Syncfusion_Blazor_ImageEditor_ImageFilterOption_) method is utilized to apply filters to an image. By passing the desired filter type as the first parameter of the method, specified as [`ImageFilterOption`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterOption.html) the method applies the corresponding filter to the image. This allows for easy and convenient application of various filters to enhance or modify the image based on the chosen filter type. - -The `ApplyImageFilterAsync` method is used to perform filtering by specifying the type of filter as `ImageFilterOption` and send it a first parameter of the method. +The [ApplyImageFilterAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ApplyImageFilterAsync_Syncfusion_Blazor_ImageEditor_ImageFilterOption_) method applies a filter to the image. Provide the desired filter as the first parameter using the [ImageFilterOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterOption.html) enumeration. Here is an example of filtering using the `ApplyImageFilterAsync` method. @@ -77,14 +75,14 @@ Here is an example of filtering using the `ApplyImageFilterAsync` method. } ``` -![Blazor Image Editor with Filter an image](./images/blazor-image-editor-filter.jpg) +![Blazor Image Editor showing a filter applied to an image](./images/blazor-image-editor-filter.jpg) -### Image filtering event +## Image filtering event -The [`ImageFiltering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageFiltering) event is triggered when applying filtering on the image. This event is passed an object that contains information about the filtering event, such as the type of filtering. +The [ImageFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageFiltering) event is triggered when a filter is applied to the image. The event provides details about the action. -The parameter available in the [`ImageFilterEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterEventArgs.html) event is, +Parameters available in [ImageFilterEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterEventArgs.html): -ImageFilterEventArgs.Filter - The type of filtering as ImageFilterOption to be applied in the image editor. +- [ImageFilterEventArgs.Filter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageFilterEventArgs_Filter) - The filter type, as an `ImageFilterOption`, to be applied. -ImageFilterEventArgs.Cancel – Specifies to cancel the filtering action. +- [ImageFilterEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageFilterEventArgs_Cancel) - Indicates whether the filtering action should be canceled. \ No newline at end of file diff --git a/blazor/image-editor/finetune.md b/blazor/image-editor/finetune.md index 77b00542e3..40a55b5698 100644 --- a/blazor/image-editor/finetune.md +++ b/blazor/image-editor/finetune.md @@ -1,7 +1,7 @@ --- layout: post -title: Finetune with Blazor Image Editor Component | Syncfusion -description: Checkout the Finetune available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +title: Fine-tune with Blazor Image Editor Component | Syncfusion +description: Discover the Finetune feature available in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,20 +9,13 @@ documentation: ug # Fine-tune in the Blazor Image Editor component -Fine-tuning involves making precise adjustments to the settings of an image filter in order to achieve a specific desired effect. It provides control over the intensity and specific aspects of the filter's impact on the image. For example, fine-tuning allows you to modify parameters like brightness, saturation, or other relevant properties to fine-tune the level or quality of the filter's effect. This level of control enables you to achieve the exact look or outcome you want for your image. +Fine-tuning provides precise control over image filter settings to achieve a specific visual result. It adjusts the intensity and key attributes of a filter’s effect, such as brightness or saturation, to refine the final output. -## Adjust the brightness, contrast, and saturation +## Adjust brightness, contrast, and saturation -The [`FinetuneImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_) method is designed to facilitate fine-tuning operations on an image. It accepts two parameters: the first parameter is [`ImageFinetuneOption`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFinetuneOption.html) which determines the type of fine-tuning to be applied (brightness, contrast, and saturation), and the second parameter represents the fine-tuning value, indicating the degree or intensity of the adjustment. This method allows for convenient adjustment of brightness, contrast, and saturation by specifying the desired type and corresponding value. - -Here is an example of brightness, contrast, and saturation fine-tuning using the `FinetuneImageAsync` method. - -## Adjust the hue, exposure, blur, and opacity - -The [`FinetuneImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_) method is designed to facilitate fine-tuning operations on an image. It accepts two parameters: the first parameter is [`ImageFinetuneOption`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFinetuneOption.html) which determines the type of fine-tuning to be applied (hue, exposure, blur, and opacity), and the second parameter represents the fine-tuning value, indicating the degree or intensity of the adjustment. This method allows for convenient adjustment of hue, exposure, blur, and opacity by specifying the desired type and corresponding value. - -Here is an example of hue, exposure, blur, and opacity fine-tuning using the `FinetuneImageAsync` method. +The [FinetuneImageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_) method performs fine-tuning on an image. It accepts two parameters: the first is [ImageFinetuneOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFinetuneOption.html), which specifies the type of fine-tuning (brightness, contrast, and saturation), and the second is an integer value indicating the degree or intensity of the adjustment. This method enables convenient adjustments to brightness, contrast, and saturation by specifying the desired type and corresponding value. +The following example demonstrates brightness, contrast, and saturation fine-tuning using the `FinetuneImageAsync` method. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -30,12 +23,8 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi
    Brightness - Blur Contrast Contrast - Exposure - Hue - Opacity
    @@ -56,11 +45,6 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Brightness, 10); } - private async void BlurClick() - { - await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Blur, 10); - } - private async void ContrastClick() { await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Contrast, 10); @@ -70,10 +54,39 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi { await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Saturation, 100); } +} +``` - private async void ExposureClick() +![Blazor Image Editor with fine-tuning applied](./images/blazor-image-editor-finetune-saturation.jpg) + +## Adjust hue, exposure, blur, and opacity + +The [FinetuneImageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_) method also supports fine-tuning for hue, exposure, blur, and opacity. The first parameter is [ImageFinetuneOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFinetuneOption.html), which specifies the type of fine-tuning to apply (hue, exposure, blur, and opacity), and the second parameter is an integer value representing the intensity of the adjustment. This method allows straightforward adjustment of these properties by specifying the type and value. + +The following example demonstrates hue, exposure, blur, and opacity fine-tuning using the `FinetuneImageAsync` method. + +```cshtml +@using Syncfusion.Blazor.ImageEditor +@using Syncfusion.Blazor.Buttons + +
    + Hue + Exposure + Blur + Opacity +
    + + + + + +@code { + SfImageEditor ImageEditor; + private List customToolbarItem = new List() { }; + + private async void OpenAsync() { - await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Exposure, 10); + await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); } private async void HueClick() @@ -81,6 +94,16 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Hue, 10); } + private async void ExposureClick() + { + await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Exposure, 10); + } + + private async void BlurClick() + { + await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Blur, 10); + } + private async void OpacityClick() { await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Opacity, 70); @@ -88,16 +111,16 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi } ``` -![Blazor Image Editor with Finetune an image](./images/blazor-image-editor-finetune.jpg) +![Blazor Image Editor with fine-tuning applied](./images/blazor-image-editor-finetune-blur.jpg) ## Finetune value changing event -The [`FinetuneValueChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FinetuneValueChanging) event is triggered when performing fine-tuning on the image. This event is passed an object that contains information about the fine-tuning event, such as the type of fine-tuning and the value of fine-tuning performed. +The [FinetuneValueChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FinetuneValueChanging) event is triggered during fine-tuning. It provides details such as the fine-tune type and the applied value. -The parameter available in the `FinetuneValueChanging` event is, +Parameters available in [FinetuneEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FinetuneEventArgs.html): -FinetuneEventArgs.Finetune - The type of fine-tuning as ImageFinetuneOption to be applied in the image editor. +- [FinetuneEventArgs.Finetune](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FinetuneEventArgs.html#Syncfusion_Blazor_ImageEditor_FinetuneEventArgs_Finetune) - The type of fine-tuning as `ImageFinetuneOption` to be applied in the image editor. -FinetuneEventArgs.Value - The fine-tuning value to be applied in the image editor. +- [FinetuneEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FinetuneEventArgs.html#Syncfusion_Blazor_ImageEditor_FinetuneEventArgs_Value) - The fine-tuning value to be applied in the image editor. -FinetuneEventArgs.Cancel – Specifies a boolean value to cancel the fine-tuning action. +- [FinetuneEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FinetuneEventArgs.html#Syncfusion_Blazor_ImageEditor_FinetuneEventArgs_Cancel) - A boolean value that cancels the fine-tuning action. \ No newline at end of file diff --git a/blazor/image-editor/frame.md b/blazor/image-editor/frame.md index 044c396dc5..8f3c7c2254 100644 --- a/blazor/image-editor/frame.md +++ b/blazor/image-editor/frame.md @@ -1,7 +1,7 @@ --- layout: post title: Frame with Blazor Image Editor Component | Syncfusion -description: Checkout the Frame available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Frame feature in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,35 +9,35 @@ documentation: ug # Frames in the Blazor Image Editor component -The frame feature in an Image Editor provides users with the capability to add decorative borders or frames around their images. Frames are a visual design element that can enhance the overall appearance and appeal of an image. +The frame feature in the Image Editor enables adding decorative borders around images. Frames enhance visual appeal and can be styled to match the image context or design requirements. ## Apply frame to the Image -The [`DrawFrameAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawFrameAsync_Syncfusion_Blazor_ImageEditor_FrameType_System_String_System_String_System_Int32_System_Int32_System_Int32_System_Int32_Syncfusion_Blazor_ImageEditor_FrameLineStyle_System_Int32_) method is a function designed to enable the application of various frame options to an image. This method simplifies the process of adding decorative frames, such as mat, bevel, line, hook, and inset, to an image by allowing users to specify their desired frame type. +The [DrawFrameAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawFrameAsync_Syncfusion_Blazor_ImageEditor_FrameType_System_String_System_String_System_Int32_System_Int32_System_Int32_System_Int32_Syncfusion_Blazor_ImageEditor_FrameLineStyle_System_Int32_) method applies a frame to an image with options such as mat, bevel, line, hook, and inset. -Depending on the frame type selected, users may have additional customization options, such as adjusting the frame's thickness, color, texture, or other attributes. This allows for fine-tuning the appearance of the frame to match the image's theme or the user's preferences +Depending on the selected frame type, additional customization options may be available, such as thickness, color, gradient, and other styling attributes. -The `DrawFrameAsync` method in the Image Editor control takes nine parameters to define the properties of the frame to the image: +The `DrawFrameAsync` method accepts nine parameters that define the frame properties: -* frameType - Specified the image data or url of the image to be inserted. +- `frameType` - Specifies the type of frame to apply. -* color - Specifies the color for the frame. +- `color` - Specifies the frame color. -* gradientColor - Specifies the gradient color for the frame. +- `gradientColor` - Specifies the gradient color for the frame. -* size - Specifies the size of the frame. +- `size` - Specifies the frame size. -* inset - Specifies the inset value for line, hook, and inset type frames. +- `inset` - Specifies the inset value for line, hook, and inset frame types. -* offset - Specifies the offset value for line and inset type frames. +- `offset` - Specifies the offset value for line and inset frame types. -* borderRadius - Specifies the border radius for line type frame. +- `borderRadius` - Specifies the border radius for the line frame type. -* frameLineStyle - Specifies the frame line style for line type frame. +- `frameLineStyle` - Specifies the frame line style for the line frame type. -* lineCount - Specifies the line count for the line type frame. +- `lineCount` - Specifies the line count for the line frame type. -Here is an example of Frame using the `DrawFrameAsync` method. +Here is an example of applying frames using the `DrawFrameAsync` method. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -91,20 +91,20 @@ Here is an example of Frame using the `DrawFrameAsync` method. } ``` -![Blazor Image Editor with Frame an image](./images/blazor-image-editor-frame.png) +![Blazor Image Editor with a frame applied](./images/blazor-image-editor-frame.jpg) ## Frame changing event -The [`FrameChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FrameChanging) event is triggered when applying frame on the image. This event provides information encapsulated within an object, which includes details about the frame applied in an image. This information encompasses: +The [FrameChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FrameChanging) event is triggered while applying a frame. The event object provides details about the frame settings involved in the change. -Frame Type: This indicates the specific type of frame being applied, whether it's a mat, bevel, line, or hook. +- Frame type: Specifies the type of frame applied, such as mat, bevel, line, hook, or inset. -Customization Values: These values contain information about any adjustments or modifications made to the frame. For instance, if the frame can be customized with attributes like color, size, or style, these details are conveyed within the event object. +- Customization values: Includes attributes such as color, size, style, inset, offset, gradient color, and related settings. -The parameter available in the [`FrameChangeEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html) is +Parameters available in [FrameChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html): -* [`FrameChangeEventArgs.PreviousFrameSetting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_PreviousFrameSetting) - The frame settings including size, color, inset, offset, gradient color which is applied before changing the frame. +- [FrameChangeEventArgs.PreviousFrameSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_PreviousFrameSetting) - Frame settings (size, color, inset, offset, gradient color) applied before the change. -* [`FrameChangeEventArgs.CurrentFrameSetting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_CurrentFrameSetting) - The frame settings including size, color, inset, offset, gradient color which is going to apply after changing the frame. +- [FrameChangeEventArgs.CurrentFrameSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_CurrentFrameSetting) - Frame settings (size, color, inset, offset, gradient color) to be applied after the change. -* [`FrameChangeEventArgs.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_Cancel) - Specifies a boolean value to cancel the frame changing action. \ No newline at end of file +- [FrameChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_Cancel) - Indicates whether to cancel the frame-changing action. \ No newline at end of file diff --git a/blazor/image-editor/how-to/clear-image.md b/blazor/image-editor/how-to/clear-image.md index 1fe69261e8..bf4a911539 100644 --- a/blazor/image-editor/how-to/clear-image.md +++ b/blazor/image-editor/how-to/clear-image.md @@ -1,7 +1,7 @@ --- layout: post title: Clear an Image with Blazor Image Editor Component | Syncfusion -description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Learn how to clear an image in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Clear an Image in the Blazor Image Editor component -The [`ClearImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ClearImageAsync) method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using `ClearImageAsync` before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection. +The [ClearImageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ClearImageAsync) method clears the current image from the editor. This is useful when the component is rendered in a dialog: calling `ClearImageAsync` before closing the dialog prevents the previously loaded image from persisting when the dialog is reopened, ensuring a fresh state for a new selection. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -37,4 +37,4 @@ The [`ClearImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -![Blazor Image Editor with Resize the custom selection](../images/blazor-image-editor-clear-image.jpg) \ No newline at end of file +![Blazor Image Editor clearing the image](../images/blazor-image-editor-clear-image.jpg) \ No newline at end of file diff --git a/blazor/image-editor/how-to/reset.md b/blazor/image-editor/how-to/reset.md index d8b385126c..5891d76c55 100644 --- a/blazor/image-editor/how-to/reset.md +++ b/blazor/image-editor/how-to/reset.md @@ -1,7 +1,7 @@ --- layout: post -title: Reset an Image with Blazor Image Editor Component | Syncfusion -description: Learn here all about Reset an image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +title: Reset an image in the Blazor Image Editor | Syncfusion +description: Learn how to reset an image in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,6 +9,6 @@ documentation: ug # Reset an image in the Blazor Image Editor component -The [`ResetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image. +The [ResetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method in the Image Editor control provides the capability to undo all changes made to an image and revert it to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and a return to the original, unmodified version is required. -By invoking the `ResetAsync` method, any modifications or edits made to the image will be undone, and the image will be restored to its initial state. This allows you to easily discard any changes and begin again with the fresh, unaltered image. \ No newline at end of file +Invoking the `ResetAsync` method discards all modifications and restores the image to its initial state, enabling a clean restart of the editing process. \ No newline at end of file diff --git a/blazor/image-editor/image-restrictions.md b/blazor/image-editor/image-restrictions.md index 37adfee207..efe53d636f 100644 --- a/blazor/image-editor/image-restrictions.md +++ b/blazor/image-editor/image-restrictions.md @@ -1,7 +1,7 @@ --- layout: post title: Image Restrictions with Blazor Image Editor Component | Syncfusion -description: Checkout the Image Restrictions available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore image extension and file size restrictions in the Blazor Image Editor for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,15 +9,15 @@ documentation: ug # Image Restrictions in the Blazor Image Editor component -The Image Editor allows users to specify image extensions, as well as the minimum and maximum image sizes for uploaded or loaded images using the [`ImageEditorUploadSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. End users will receive a clear alert message if an uploaded image does not meet the defined criteria, ensuring a seamless and user-friendly upload experience. +The Image Editor supports restricting image uploads by file extension and by minimum and maximum file size using the [ImageEditorUploadSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. When an uploaded image does not meet the configured criteria, the component displays an alert to guide the end user and maintain a smooth workflow. -`Note:` File restrictions apply when uploading images to the Image Editor, whether through the open method or the built-in uploader. If uploadSettings is not defined in the sample, the Image Editor, by default, allows files with .jpg, .png, .svg, .webp and .bmp extensions, without any file size restrictions. +Note: File restrictions apply when opening images via the open method or the built-in uploader. If upload settings are not defined, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions, with no file size restrictions. ## Allowed image extensions -The Image Editor allows users to specify acceptable file extensions for uploaded images using the [`ImageEditorUploadSettings.AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property, ensuring that only supported formats, such as `.jpg`, `.png`, `.svg`, `.webp` and `.bmp` are allowed. This helps maintain compatibility and prevents errors caused by unsupported file types. By default, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions. +Configure allowed file extensions for uploaded images using the [ImageEditorUploadSettings.AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property. This ensures that only supported formats—such as .jpg, .png, .svg, .webp, and .bmp—are processed, improving compatibility and preventing errors caused by unsupported file types. By default, the Image Editor allows .jpg, .png, .svg, .webp, and .bmp. -`Note:` To specify allowed extensions in the upload settings, use the format '.png, .svg', listing the permitted file types as a comma-separated string. +Note: Specify allowed extensions as a comma-separated string, for example: '.jpg, .svg'. Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property. @@ -46,9 +46,9 @@ Here is an example of configuring image restrictions using the `ImageEditorUploa ## Minimum and maximum image size -The Image Editor allows users to specify the minimum and maximum size limits for uploaded image files by using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. This ensures that images meet specific requirements, maintaining consistency and preventing oversized or undersized files from being processed. +Set minimum and maximum upload size limits using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. These constraints enforce consistent input and prevent oversized or undersized files from being processed. -`Note:` Users can also upload images as base64 strings, in which case file extension validation is bypassed, but file size restrictions still apply. +Note: When images are uploaded as base64 strings, file extension validation is bypassed; file size restrictions still apply. Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property. diff --git a/blazor/image-editor/images/blazor-image-editor-clear-image.jpg b/blazor/image-editor/images/blazor-image-editor-clear-image.jpg index d3fac69d34..89e0e753a6 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-clear-image.jpg and b/blazor/image-editor/images/blazor-image-editor-clear-image.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg b/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg index a4c7054275..7f9547315e 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg and b/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg b/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg index 0551f2a81c..95a1173f43 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg and b/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-filter.jpg b/blazor/image-editor/images/blazor-image-editor-filter.jpg index 95ce80ddd8..c060cc35e4 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-filter.jpg and b/blazor/image-editor/images/blazor-image-editor-filter.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-finetune-blur.jpg b/blazor/image-editor/images/blazor-image-editor-finetune-blur.jpg new file mode 100644 index 0000000000..db32269942 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-finetune-blur.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-finetune-saturation.jpg b/blazor/image-editor/images/blazor-image-editor-finetune-saturation.jpg new file mode 100644 index 0000000000..2c6925dc90 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-finetune-saturation.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-finetune.jpg b/blazor/image-editor/images/blazor-image-editor-finetune.jpg deleted file mode 100644 index 0b43d5c60f..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-finetune.jpg and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-frame.jpg b/blazor/image-editor/images/blazor-image-editor-frame.jpg new file mode 100644 index 0000000000..a3fc817954 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-frame.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-frame.png b/blazor/image-editor/images/blazor-image-editor-frame.png deleted file mode 100644 index 557e1cafa4..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-frame.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg new file mode 100644 index 0000000000..cb227691e9 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png deleted file mode 100644 index 3bccbdb8bc..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-redact.jpg b/blazor/image-editor/images/blazor-image-editor-redact.jpg new file mode 100644 index 0000000000..64de0991ec Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-redact.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-redact.png b/blazor/image-editor/images/blazor-image-editor-redact.png deleted file mode 100644 index e2b20c0982..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-redact.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-resize.jpg b/blazor/image-editor/images/blazor-image-editor-resize.jpg new file mode 100644 index 0000000000..7ae9df6a9c Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-resize.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-resize.png b/blazor/image-editor/images/blazor-image-editor-resize.png deleted file mode 100644 index cc0ea39490..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-resize.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg b/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg new file mode 100644 index 0000000000..315d29b056 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-undo-redo.png b/blazor/image-editor/images/blazor-image-editor-undo-redo.png deleted file mode 100644 index 61da88b7f6..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-undo-redo.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-z-order.jpg b/blazor/image-editor/images/blazor-image-editor-z-order.jpg index dc79249e53..c5942a8d6c 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-z-order.jpg and b/blazor/image-editor/images/blazor-image-editor-z-order.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/quick-access.md b/blazor/image-editor/quick-access.md index 6c5c662e81..4b9773ce5a 100644 --- a/blazor/image-editor/quick-access.md +++ b/blazor/image-editor/quick-access.md @@ -1,41 +1,34 @@ --- layout: post title: Quick Access Toolbar with Blazor Image Editor Component | Syncfusion -description: Checkout the Quick Access Toolbar available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Quick Access Toolbar in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug --- -# Quick access toolbar in the Blazor Image Editor Component +# Quick Access Toolbar in the Blazor Image Editor Component -The quick access toolbars in the Image Editor play a vital role in facilitating interactions with annotations like Rectangle, Ellipse, Line, Arrow, and Path. These toolbars offer a diverse array of tools and options that can be tailored to match the specific requirements and preferences associated with each annotation type. The toolbar is only displayed when an annotation is selected, ensuring a focused and contextual user experience. +The quick access toolbars in the Image Editor facilitate interactions with annotations such as Rectangle, Ellipse, Line, Arrow, and Path. These toolbars provide a configurable set of tools and options tailored to each annotation type. The toolbar appears only when an annotation is selected, ensuring a focused and contextual editing experience. -The [`ShowQuickAccessToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls the visibility of the quick access toolbar. Users have the flexibility to enable or disable this toolbar, add or remove items, and create a personalized set of tools. +The [ShowQuickAccessToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls quick access toolbar visibility. The toolbar can be enabled or disabled, items can be added or removed, and a customized toolset can be configured. ## Add a custom toolbar item -The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [`QuickAccessToolbarOpening`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar is opened, allowing you to modify its contents. To add additional toolbar items to the quick access toolbar, you can access the ToolbarItems property of the [`QuickAccessToolbarEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from the ToolbarItems property based on the Item property, you can customize the options available in the quick access toolbar according to your needs. This gives you the ability to extend the functionality of the quick access toolbar and provide additional tools and options for working with inserted annotations. +The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [QuickAccessToolbarOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar opens, allowing modification of its contents. Additional toolbar items can be included by accessing the `ToolbarItems` property of the [QuickAccessToolbarEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from `ToolbarItems` based on the `Item` property, the quick access toolbar options can be customized to match specific requirements for working with inserted annotations. -Here is an example of adding the custom toolbar item to the quick access toolbar. +Here is an example of adding a custom toolbar item to the quick access toolbar. ```cshtml @using Syncfusion.Blazor.ImageEditor @using Syncfusion.Blazor.Navigations - + @code { SfImageEditor ImageEditor; - private List customToolbarItem = new List() - { - new ImageEditorToolbarItemModel { Name = "Annotation" }, - new ImageEditorToolbarItemModel { Name = "Confirm" }, - new ImageEditorToolbarItemModel { Name = "Reset" } - }; - private async void OpenAsync() { await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); @@ -48,4 +41,4 @@ Here is an example of adding the custom toolbar item to the quick access toolbar } ``` -![Blazor Image Editor with Quick Access Toolbar](./images/blazor-image-editor-quick-access-toolbar.png) \ No newline at end of file +![Blazor Image Editor with Quick Access Toolbar](./images/blazor-image-editor-quick-access-toolbar.jpg) \ No newline at end of file diff --git a/blazor/image-editor/redact.md b/blazor/image-editor/redact.md index 44004c3334..7533632d49 100644 --- a/blazor/image-editor/redact.md +++ b/blazor/image-editor/redact.md @@ -1,7 +1,7 @@ --- layout: post title: Redact with Blazor Image Editor Component | Syncfusion -description: Checkout the Redact available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Redact support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,49 +9,49 @@ documentation: ug # Redact in the Blazor Image Editor component -The redact feature in an Image Editor is a valuable tool that empowers users to conceal sensitive information by applying blur or pixel effects to specific areas of an image. This feature is particularly valuable for protecting privacy and complying with data protection regulations, making it easier to securely share images without compromising sensitive information. +The redact feature conceals sensitive content by applying blur or pixel effects to selected regions of an image. It supports privacy protection and regulatory compliance, enabling secure image sharing without exposing confidential information. ## Apply redact to the image -The Image Editor control includes a [`DrawRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRedactAsync_Syncfusion_Blazor_ImageEditor_RedactType_System_Double_System_Double_System_Double_System_Double_System_Int32_) method, which allows you to draw redaction on an image. This method takes six parameters that define how the redact should be carried out: +The Image Editor control provides the [DrawRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRedactAsync_Syncfusion_Blazor_ImageEditor_RedactType_System_Double_System_Double_System_Double_System_Double_System_Int32_) method to draw a redaction on an image. This method accepts six parameters that define how the redaction is applied: -* redactType: Specifies the type of redaction to be drawn on the image such as blur or pixelate. If not specified, the redaction drawing is initiated with the default blur value. +* redactType: Defines the redaction type to draw on the image, such as blur or pixelate. If not specified, redaction uses the default blur type. -* startX: Specifies x-coordinate of redaction. If not specified, the redaction drawing is initiated with the first parameter. +* startX: Defines the x-coordinate of the redaction. If not specified, redaction starts from the image center. -* startY: Specifies y-coordinate of redaction. If not specified it draws redaction from the center point of the image. +* startY: Defines the y-coordinate of the redaction. If not specified, redaction starts from the image center. -* width: Specifies the width of redaction. The default value is 100. +* width: Defines the redaction width. The default value is 100. -* height: Specifies the height of redaction. The default value is 50. +* height: Defines the redaction height. The default value is 50. -* value: Specifies the blur value for blur-type redaction or the pixel size for pixelate-type redaction. Defaults to 20 since the default redaction is blur. +* value: Defines the blur intensity for blur-type redaction or the pixel size for pixelate-type redaction. The default is 20 because the default redaction type is blur. ## Selecting a redact -The Image Editor control includes a [`SelectRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectRedactAsync_System_String_) method, which allows you to select a redaction based on the given redaction id. Use [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to get the redaction id which is then passed to perform selection. This method takes one parameter that define how the redact should be carried out: +The Image Editor control provides the [SelectRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectRedactAsync_System_String_) method to select a redaction by its identifier. Use the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to obtain the redaction identifier and pass it to perform selection. This method accepts one parameter: -* id: Specifies the redact id to select a redact on an image. +* id: Defines the redaction identifier to select a redaction on an image. ## Deleting a redact -The Image Editor control includes a [`DeleteRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_String_) method, which allows you to delete a redaction based on the given redaction id. Use [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to get the redaction id which is then passed to perform selection. This method takes one parameter that define how the redact should be carried out: +The Image Editor control provides the [DeleteRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_String_) method to delete a redaction by its identifier. Use the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to obtain the redaction identifier and pass it to delete the corresponding redaction. This method accepts one parameter: -* id: Specifies the redact id to delete a redact on an image. +* id: Defines the redaction identifier to delete a redaction on an image. ## Updating a redact -The Image Editor control includes a [`UpdateRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_Syncfusion_Blazor_ImageEditor_RedactSettings_System_Boolean_) method, which allows you to update the existing redacts by changing its height, width, blur, and pixel size in the component. Use [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to get the redacts which is then passed to change the options of a redacts. This method takes two parameters that define how the redact should be carried out: +The Image Editor control provides the [UpdateRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_Syncfusion_Blazor_ImageEditor_RedactSettings_System_Boolean_) method to update existing redactions by modifying height, width, blur intensity, or pixel size. Use the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to obtain the redactions and pass them to update the desired options. This method accepts two parameters: -* setting: Specifies the redact settings to be updated for the shape on an image. +* setting: Defines the redact settings to update for the redaction on an image. -* isSelected: Specifies to show the redacts in the selected state. +* isSelected: Defines whether to show the redactions in the selected state. ## Getting redacts -The Image Editor control includes a [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method, which allows you to get all the redact details which is drawn on an image editor. +The Image Editor control provides the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to retrieve all redaction details drawn in the Image Editor. -Here's an example demonstrating how to draw, select, delete, update, and get redacts on an image using the [`DrawRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRedactAsync_System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__), [`SelectRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectRedactAsync_System_String_), [`DeleteRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_String_), [`UpdateRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_Syncfusion_Blazor_ImageEditor_RedactSettings_System_Boolean_) and [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) methods. +The following example demonstrates how to draw, select, delete, update, and get redactions using the `DrawRedactAsync`, `SelectRedactAsync`, `DeleteRedactAsync`, `UpdateRedactAsync` and `GetRedactsAsync` methods. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -77,7 +77,7 @@ Here's an example demonstrating how to draw, select, delete, update, and get red private async void addRedact() { ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync(); - await ImageEditor.DrawRedactAsync(RedactType.Blur, Dimension.X.Value + 100, Dimension.Y.Value + 100, 200, 300); + await ImageEditor.DrawRedactAsync(RedactType.Blur, Dimension.X.Value + 10, Dimension.Y.Value + 10, 200, 300); } private async void updateRedact() { @@ -104,4 +104,4 @@ Here's an example demonstrating how to draw, select, delete, update, and get red } ``` -![Blazor Image Editor with Redaction](./images/blazor-image-editor-redact.png) \ No newline at end of file +![Blazor Image Editor with Redaction](./images/blazor-image-editor-redact.jpg) \ No newline at end of file diff --git a/blazor/image-editor/resize.md b/blazor/image-editor/resize.md index 12775e7c19..03d237bb02 100644 --- a/blazor/image-editor/resize.md +++ b/blazor/image-editor/resize.md @@ -1,7 +1,7 @@ --- layout: post title: Resizing with Blazor Image Editor Component | Syncfusion -description: Checkout the Resizing available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the resizing support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,22 +9,22 @@ documentation: ug # Resize in the Blazor Image Editor component -The resize feature in an Image Editor is a valuable tool that empowers users to modify the size or dimensions of an image to meet their specific requirements. Whether it's for printing, web display, or any other purpose, this feature allows users to tailor images to their desired specifications. +The resize feature adjusts the size or dimensions of an image to match specific requirements for printing, web display, or other use cases. ## Apply resize to the image -The Image Editor control includes a [`ImageResizeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ImageResizeAsync_System_Int32_System_Int32_System_Boolean_) method, which allows you to adjust the size of an image. This method takes three parameters that define how the resizing should be carried out: +The Image Editor control provides the [`ImageResizeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ImageResizeAsync_System_Int32_System_Int32_System_Boolean_) method to change image size. This method accepts three parameters that define the resizing behavior: -* width: Specifies the resizing width of the image. +- width: Sets the target width of the image. -* height: Specifies the resizing height of the image. +- height: Sets the target height of the image. -* isAspectRatio: Specifies a boolean value indicating whether the image should maintain its original aspect ratio during resizing. - * When set to `true`, the image maintains its original aspect ratio. The width is applied as specified, and the height is automatically adjusted to maintain the aspect ratio. - * When set to `false`, the image is resized according to the specified width and height, without maintaining the aspect ratio. - * The default value is `false`. +- isAspectRatio: Indicates whether to preserve the original aspect ratio. + - When `true`, the image maintains its original aspect ratio. The specified width is applied, and the height adjusts automatically. + - When `false`, the image resizes to the specified width and height without preserving the aspect ratio. + - The default value is `false`. -Here is an example of resizing the image using the `ImageResizeAsync` method. +Here is an example of resizing the image using the `ImageResizeAsync` method. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -60,22 +60,22 @@ Here is an example of resizing the image using the `ImageResizeAsync` method. } ``` -![Blazor Image Editor with Resize an image](./images/blazor-image-editor-resize.png) +![Blazor Image Editor with a resized image](./images/blazor-image-editor-resize.jpg) ## Resizing event -The [`ImageResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageResizing) event is triggered when resizing the image. This event provides information encapsulated within an object, which includes details about the previous and current height and width of an image. +The [`ImageResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageResizing) event triggers while an image is being resized and provides details about the previous and current dimensions. -The parameter available in ResizeEventArgs is, +Parameters available in [ImageResizeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html): -* [`ImageResizeEventArgs.PreviousWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousWidth) - The width of the image before resizing is performed. +- [`ImageResizeEventArgs.PreviousWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousWidth) – The width of the image before resizing. -* [`ImageResizeEventArgs.PreviousHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousHeight) - The height of the image before resizing is performed. +- [`ImageResizeEventArgs.PreviousHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousHeight) – The height of the image before resizing. -* [`ImageResizeEventArgs.Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Width) - The width of the image after resizing is performed. +- [`ImageResizeEventArgs.Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Width) – The width of the image after resizing. -* [`ImageResizeEventArgs.Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Height) - The width of the image after resizing is performed. +- [`ImageResizeEventArgs.Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Height) – The height of the image after resizing. -* [`ImageResizeEventArgs.IsAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_IsAspectRatio) - The type of resizing performed such as aspect ratio or non-aspect ratio. +- [`ImageResizeEventArgs.IsAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_IsAspectRatio) – Indicates whether the resizing preserved the aspect ratio. -* [`ImageResizeEventArgs.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Cancel) - Specifies a boolean value to cancel the resizing action. \ No newline at end of file +- [`ImageResizeEventArgs.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Cancel) – A boolean value that cancels the resizing action when set to true. \ No newline at end of file diff --git a/blazor/image-editor/undo-redo.md b/blazor/image-editor/undo-redo.md index 275543a034..d00b1f8534 100644 --- a/blazor/image-editor/undo-redo.md +++ b/blazor/image-editor/undo-redo.md @@ -1,27 +1,27 @@ --- layout: post -title: Undo Redo with Blazor Image Editor Component | Syncfusion -description: Checkout the Undo Redo available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +title: Undo and Redo with Blazor Image Editor Component | Syncfusion +description: Explore undo and redo features in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug --- -# Undo Redo in the Blazor Image Editor component +# Undo and redo in the Blazor Image Editor component -The undo and redo functionalities provide a way to reverse and repeat editing actions performed on an image. These features are essential for maintaining control and flexibility during the editing process. +The undo and redo functionalities enable reversing and reapplying editing actions performed on an image. These capabilities are essential for maintaining control and flexibility during the editing process. -In Blazor Image Editor component, the undo and redo history typically have a limited capacity, and the number of steps that can be stored is 16 steps, meaning that the editor keeps track of the most recent 16 actions performed on the image. Once the history reaches its maximum capacity, any new actions beyond the 16th step will result in the removal of the oldest action from the history. +In the Blazor Image Editor component, the undo and redo history has a fixed capacity of 16 steps. The editor tracks the most recent 16 actions performed on the image. When the history reaches its maximum capacity, any new action removes the oldest action from the history. -## Undo the action +## Undo the action -The undo action in an image editor allows users to revert the most recent editing action or a series of actions back to their previous state. When the undo command is triggered, the image editor undoes the last applied modification, effectively restoring the image to its state before the action was performed. The undo action is useful for correcting mistakes, removing unwanted changes, or exploring different editing options without permanently altering the image. +The undo action reverts the most recent editing action or a series of actions to their previous state. When the undo command is triggered, the image editor undoes the last applied modification, restoring the image to its prior state. The undo action is useful for correcting mistakes, removing unwanted changes, or testing different editing options without permanently altering the image. ## Redo the action -The redo action in an image editor allows users to reapply previously undone actions or modifications to the image. When the redo command is triggered, the image editor reapplies the last action that was undone, bringing the image back to the state it was in after the action was initially applied. The redo is useful when users want to repeat an action that was previously undone or restore changes that were temporarily reversed. +The redo action reapplies previously undone actions or modifications to the image. When the redo command is triggered, the image editor reapplies the last action that was undone, returning the image to the state it was in after the action was initially applied. The redo action is useful for repeating an action that was previously undone or restoring changes that were temporarily reversed. -Here is an example of undoing and redoing the action using the [`UndoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UndoAsync) and [`RedoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_RedoAsync) method. +Here is an example of undoing and redoing the action using the [UndoAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UndoAsync) and [RedoAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_RedoAsync) method. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -64,4 +64,4 @@ Here is an example of undoing and redoing the action using the [`UndoAsync`](htt } ``` -![Blazor Image Editor with Undo Redo an image](./images/blazor-image-editor-undo-redo.png) +![Blazor Image Editor showing undo and redo actions](./images/blazor-image-editor-undo-redo.jpg) diff --git a/blazor/image-editor/z-order.md b/blazor/image-editor/z-order.md index 5e55aae56f..55db766b69 100644 --- a/blazor/image-editor/z-order.md +++ b/blazor/image-editor/z-order.md @@ -1,7 +1,7 @@ --- layout: post title: Z-order with Blazor Image Editor Component | Syncfusion -description: Checkout the Z-order in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Z-order support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,20 +9,16 @@ documentation: ug # Z-order in the Blazor Image Editor Component -We are excited to introduce `z-order` support in the Image Editor. It's a powerful tool that allows users to adjust the positioning of annotations. This feature is particularly useful for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product. +The Image Editor supports z-order control to manage the stacking order of annotations. This capability is useful when designing templates such as greeting cards or posters, where arranging multiple annotations in the correct order is essential. -Types of adjustment in the Image Editor `z-order` support. +The following z-order actions are available: -* [Bring forward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringForwardAsync_System_String_) - Switch the selected annotation with the annotation one layer ahead of it. +- [Bring forward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringForwardAsync_System_String_) – Swap the selected annotation with the one directly above it. +- [Send backward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendBackwardAsync_System_String_) – Swap the selected annotation with the one directly below it. +- [Bring to front](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringToFrontAsync_System_String_) – Move the selected annotation in front of all other annotations. +- [Send to back](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendToBackAsync_System_String_) – Move the selected annotation behind all other annotations. -* [Sent Backward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendBackwardAsync_System_String_) - Switch the selected annotation with the annotation one layer behind it. - -* [Bring to Front](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringToFrontAsync_System_String_) - Move the selected annotation to ahead of all other annotations. - -* [Send to Back](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendToBackAsync_System_String_) - Move the selected annotation to behind all other annotations. - - -In the following example, you can use the `z-order` support. +The following example demonstrates z-order support: ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -79,4 +75,4 @@ In the following example, you can use the `z-order` support. } ``` -![Blazor Image Editor with Opening an image](./images/blazor-image-editor-z-order.jpg) +![Blazor Image Editor z-order example](./images/blazor-image-editor-z-order.jpg) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai-samples/pivot-table/smart-pivot.md b/blazor/smart-ai-solutions/ai-samples/pivot-table/smart-pivot.md index d2db103885..88076e2204 100644 --- a/blazor/smart-ai-solutions/ai-samples/pivot-table/smart-pivot.md +++ b/blazor/smart-ai-solutions/ai-samples/pivot-table/smart-pivot.md @@ -277,7 +277,7 @@ The following example shows how to set up these features in your Blazor applicat

    - +
    @@ -867,4 +867,4 @@ A complete working example is available in the [Syncfusion Blazor AI Samples Git Explore the AI-powered Smart Pivot Table in action by visiting the live demo: -👉 [Try the Live Demo](https://blazor.syncfusion.com/demos/pivot-table/ai-smart-pivot?theme=fluent2) \ No newline at end of file +👉 [Try the Live Demo](https://blazor.syncfusion.com/demos/pivot-table/ai-smart-pivot?theme=fluent2)