From 4de826747d86a26191d38ee3a678cb5bc3677b70 Mon Sep 17 00:00:00 2001 From: BalaVigneshRaviChandran Date: Thu, 27 Jun 2024 18:02:54 +0530 Subject: [PATCH] 890869: UG documentation for remote data using various data adapters --- blazor/diagram/data-binding.md | 376 +++++++++++++++++++++++++++------ 1 file changed, 317 insertions(+), 59 deletions(-) diff --git a/blazor/diagram/data-binding.md b/blazor/diagram/data-binding.md index d673de7288..3aad1fbd1b 100644 --- a/blazor/diagram/data-binding.md +++ b/blazor/diagram/data-binding.md @@ -654,6 +654,95 @@ To bind remote data to [Diagram component](https://help.syncfusion.com/cr/blazor When using SfDataManager for data binding then the TValue must be provided explicitly in the diagram component. By default, SfDataManager uses ODataAdaptor for remote data-binding. +### Binding with OData services + +OData (Open Data Protocol) is a standardized protocol for building and consuming RESTful APIs. It enables the creation and consumption of queryable and interoperable REST APIs in a simple and standard way. OData services expose data as resources that are addressable by URLs and can be queried using standard HTTP methods (GET, POST, PUT, DELETE). For more details on OData services, refer to the [OData documentation](https://www.odata.org/documentation/odata-version-3-0/odata-version-3-0-core-protocol/). To bind an OData service, use the ODataAdaptor. + +```cshtml +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data +@inject HttpClient Http + + +
+ + + + + + + +
+ +@code { + SfDiagramComponent Diagrams; + private float x = 100; + private float y = 100; + + public class Employee { + public int? EmployeeID { get; set; } + public string FirstName { get; set; } + public int? ReportsTo { get; set; } + } + + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + + private void OnNodeCreating(IDiagramObject obj) { + Node node = obj as Node; + node.OffsetX = x; + node.OffsetY = y; + node.Width = 80; + node.Height = 40; + node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; + node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; + x += 100; + + Dictionary data = node.Data as Dictionary; + node.Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { + Content = data["FirstName"].ToString(), + Style = new TextStyle() { Color = "white" } + } + }; + + switch (data["FirstName"].ToString()) { + case "Andrew": + node.Style.Fill = "#3A4857"; + break; + case "Nancy": + node.Style.Fill = "#2B8C68"; + break; + case "Janet": + node.Style.Fill = "#488CC1"; + break; + case "Margaret": + node.Style.Fill = "#4C888F"; + break; + case "Steven": + node.Style.Fill = "#8E4DB4"; + break; + case "Laura": + node.Style.Fill = "#CD6A32"; + break; + default: + node.Style.Fill = "#8E4DB4"; + break; + } + } + + private void OnConnectorCreating(IDiagramObject obj) { + Connector connector = obj as Connector; + connector.Style.StrokeColor = "#048785"; + connector.Type = ConnectorSegmentType.Orthogonal; + connector.TargetDecorator.Shape = DecoratorShape.None; + connector.SourceDecorator.Shape = DecoratorShape.None; + connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; + } + +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData) + ### Binding with 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 OData v4 service, use the ODataV4Adaptor. @@ -661,87 +750,169 @@ The ODataV4 is an improved version of OData protocols, and the SfDataManager can ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Data +@inject HttpClient Http -
-
- - - - - - - -
+ +
+ + + + + + +
-@code -{ - SfDiagramComponent Diagram; +@code { + SfDiagramComponent Diagrams; private float x = 100; private float y = 100; - public class Employee - { + + public class Employee { public int? EmployeeID { get; set; } public string FirstName { get; set; } public int? ReportsTo { get; set; } } + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); - private void OnNodeCreating(IDiagramObject obj) - { + + private void OnNodeCreating(IDiagramObject obj) { Node node = obj as Node; node.OffsetX = x; node.OffsetY = y; node.Width = 80; - node.Height = 40; + node.Height = 40; node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; x += 100; Dictionary data = node.Data as Dictionary; - node.Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { + node.Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { Content = data["FirstName"].ToString(), - Style = new TextStyle(){ Color = "white"} + Style = new TextStyle() { Color = "white" } } }; - if (data["FirstName"].ToString() == "Andrew") - { - node.Style.Fill = "#3A4857"; - } - else if (data["FirstName"].ToString() == "Nancy") - { - node.Style.Fill = "#2B8C68"; - } - else if (data["FirstName"].ToString() == "Janet") - { - node.Style.Fill = "#488CC1"; - } - else if (data["FirstName"].ToString() == "Janet") - { - node.Style.Fill = "#488CC1"; - } - else if (data["FirstName"].ToString() == "Margaret") - { - node.Style.Fill = "#4C888F"; - } - else if (data["FirstName"].ToString() == "Steven") - { - node.Style.Fill = "#8E4DB4"; - } - else if (data["FirstName"].ToString() == "Laura") - { - node.Style.Fill = "#CD6A32"; + + switch (data["FirstName"].ToString()) { + case "Andrew": + node.Style.Fill = "#3A4857"; + break; + case "Nancy": + node.Style.Fill = "#2B8C68"; + break; + case "Janet": + node.Style.Fill = "#488CC1"; + break; + case "Margaret": + node.Style.Fill = "#4C888F"; + break; + case "Steven": + node.Style.Fill = "#8E4DB4"; + break; + case "Laura": + node.Style.Fill = "#CD6A32"; + break; + default: + node.Style.Fill = "#8E4DB4"; + break; } - else - { - node.Style.Fill = "#8E4DB4"; + } + + private void OnConnectorCreating(IDiagramObject obj) { + Connector connector = obj as Connector; + connector.Style.StrokeColor = "#048785"; + connector.Type = ConnectorSegmentType.Orthogonal; + connector.TargetDecorator.Shape = DecoratorShape.None; + connector.SourceDecorator.Shape = DecoratorShape.None; + connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; + } + +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData) + +### Binding with WebAPI services + +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. + +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, + +```cshtml +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data +@inject HttpClient Http + + +
+ + + + + + + +
+ +@code { + SfDiagramComponent Diagrams; + private float x = 100; + private float y = 100; + + public class Employee { + public int? EmployeeID { get; set; } + public string FirstName { get; set; } + public int? ReportsTo { get; set; } + } + + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + + private void OnNodeCreating(IDiagramObject obj) { + Node node = obj as Node; + node.OffsetX = x; + node.OffsetY = y; + node.Width = 80; + node.Height = 40; + node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; + node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; + x += 100; + + Dictionary data = node.Data as Dictionary; + node.Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { + Content = data["FirstName"].ToString(), + Style = new TextStyle() { Color = "white" } + } + }; + + switch (data["FirstName"].ToString()) { + case "Andrew": + node.Style.Fill = "#3A4857"; + break; + case "Nancy": + node.Style.Fill = "#2B8C68"; + break; + case "Janet": + node.Style.Fill = "#488CC1"; + break; + case "Margaret": + node.Style.Fill = "#4C888F"; + break; + case "Steven": + node.Style.Fill = "#8E4DB4"; + break; + case "Laura": + node.Style.Fill = "#CD6A32"; + break; + default: + node.Style.Fill = "#8E4DB4"; + break; } } - private void OnConnectorCreating(IDiagramObject obj) - { + + private void OnConnectorCreating(IDiagramObject obj) { Connector connector = obj as Connector; connector.Style.StrokeColor = "#048785"; connector.Type = ConnectorSegmentType.Orthogonal; @@ -749,10 +920,97 @@ The ODataV4 is an improved version of OData protocols, and the SfDataManager can connector.SourceDecorator.Shape = DecoratorShape.None; connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; } - private CommonElement SetTemplate(IDiagramObject node) - { - return null; + +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData) + +### Binding with URL services +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](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) serves as the base adaptor for interacting with remote data services. Most built-in adaptors are derived from the `UrlAdaptor`. + +The following sample code demonstrates how to bind data to the Diagram component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using the `UrlAdaptor`, + +```cshtml +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data +@inject HttpClient Http + + +
+ + + + + + + +
+ +@code { + SfDiagramComponent Diagrams; + private float x = 100; + private float y = 100; + + public class Employee { + public int? EmployeeID { get; set; } + public string FirstName { get; set; } + public int? ReportsTo { get; set; } + } + + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + + private void OnNodeCreating(IDiagramObject obj) { + Node node = obj as Node; + node.OffsetX = x; + node.OffsetY = y; + node.Width = 80; + node.Height = 40; + node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; + node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; + x += 100; + + Dictionary data = node.Data as Dictionary; + node.Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { + Content = data["FirstName"].ToString(), + Style = new TextStyle() { Color = "white" } + } + }; + + switch (data["FirstName"].ToString()) { + case "Andrew": + node.Style.Fill = "#3A4857"; + break; + case "Nancy": + node.Style.Fill = "#2B8C68"; + break; + case "Janet": + node.Style.Fill = "#488CC1"; + break; + case "Margaret": + node.Style.Fill = "#4C888F"; + break; + case "Steven": + node.Style.Fill = "#8E4DB4"; + break; + case "Laura": + node.Style.Fill = "#CD6A32"; + break; + default: + node.Style.Fill = "#8E4DB4"; + break; + } } + + private void OnConnectorCreating(IDiagramObject obj) { + Connector connector = obj as Connector; + connector.Style.StrokeColor = "#048785"; + connector.Type = ConnectorSegmentType.Orthogonal; + connector.TargetDecorator.Shape = DecoratorShape.None; + connector.SourceDecorator.Shape = DecoratorShape.None; + connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; + } + } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData)