Merge branch 'development' of https://github.com/syncfusion-content/blazor-docs into 902038-BlazDoc

Author: GopalakrishnanVeeraragavan

blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md

@@ -109,7 +109,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 While resizing or dragging the child element, if the child element bounds are within the ExpandedSubProcess bounds, the ExpandedSubProcess size will be updated along with that.
 
-The following image shows how to add BPMNNode into the BPMN ExpandedSubProcess at runtime.
+The following image shows how to add BPMN node into the BPMN ExpandedSubProcess at runtime.
 
 ![BPMN Expanded Sub-Process](../images/Bpmn-ExpandedSubProcess.gif)
 
@@ -292,14 +292,14 @@ 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)
 
-![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png)
+![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png)
 
 The following table contains various types of BPMN SubProcess.
 
 | SubProcessType | Image | Description|
 | -------- | -------- | -------- |
-| Call | ![Call Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Call.png) |It is a global sub-process that is reused at various points in the business flow.|
-| Event | ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) |The event sub-process is a sub-process that is triggered by an event. An event sub-process can be added at the process level or at any sub-process level.|
-| Transaction | ![Default Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Transaction.png) |It is a specialized sub-process that involves payment.|
-| Default | ![Default Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Default.png) |The task that is performed in a business process. It is represented by a rounded rectangle.|
+| Call | ![Call Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Call.png) |It is a global sub-process that is reused at various points in the business flow.|
+| Event | ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) |The event sub-process is a sub-process that is triggered by an event. An event sub-process can be added at the process level or at any sub-process level.|
+| Transaction | ![Default Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Transaction.png) |It is a specialized sub-process that involves payment.|
+| Default | ![Default Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-None.png) |The task that is performed in a business process. It is represented by a rounded rectangle.|
 

blazor/diagram/connectors/connectors.md

@@ -183,7 +183,7 @@ The following code explains how to add an connector with annotation  at runtime
         connectors.Add(Connector);
     }
 
-    public void AddConnector()
+    public async void AddConnector()
     {
         Connector NewConnector = new Connector()
         { 

blazor/diagram/connectors/customization.md

@@ -623,7 +623,7 @@ The following code illustrates how to set the HitPadding for the connector.
             SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
             TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
             // Type of the connector segments.
-            Type = ConnectorSegmentType.Straight
+            Type = ConnectorSegmentType.Straight,
             //Define the HitPadding property.
             HitPadding = 20,
         };

blazor/diagram/connectors/interactions.md

@@ -518,9 +518,11 @@ The [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di
     {
         nodes = new DiagramObjectCollection<Node>()
         {
-            new Node() { ID = "node1", OffsetX = 100, OffsetY = 300, Width = 100, Height =100 },
-            new Node() { ID = "node2", OffsetX = 600, OffsetY = 100, Width = 100, Height = 100 },
-            new Node() { ID = "node3", OffsetX = 400, OffsetY = 250, Width = 100, Height = 100 }
+             new Node() { ID = "node1", OffsetX = 100, OffsetY = 300, Width = 100, Height =100, Annotations= new DiagramObjectCollection<ShapeAnnotation>(){ new ShapeAnnotation() { Content="Source" } } },
+             new Node() { ID = "node2", OffsetX = 430, OffsetY = 130, Width = 100, Height = 100, Annotations= new DiagramObjectCollection<ShapeAnnotation>(){ new ShapeAnnotation() { Content="Target" } } },
+             new Node() { ID = "node3", OffsetX = 430, OffsetY = 250, Width = 100, Height = 100, Annotations= new DiagramObjectCollection<ShapeAnnotation>(){ new ShapeAnnotation() { Content="Obstacle 1" } } },
+             new Node() { ID = "node4", OffsetX = 150, OffsetY = 90, Width = 100, Height = 100, Annotations= new DiagramObjectCollection<ShapeAnnotation>(){ new ShapeAnnotation() { Content="Obstacle 2" } } }
+      
         };
         connectors = new DiagramObjectCollection<Connector>(){
             new Connector()

blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md

@@ -81,7 +81,7 @@ The following code illustrates how to interact with Bezier efficiently by using
                     //Define the smoothness for a bezier connector.
                     Smoothness = BezierSmoothness.SymmetricAngle,
                     //Define the orientation of the segment editing controls.
-                    SegmentEditOrientation = BezierSegmentEditOrientation.Freeform
+                    SegmentEditOrientation = BezierSegmentEditOrientation.FreeForm
                 },
                 Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
             };

blazor/diagram/connectors/segments/orthogonal.md

@@ -55,7 +55,7 @@ Orthogonal segments are used to create segments that are perpendicular to each o
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Orthogonal)
 
-The [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.OrthogonalSegment.html#Syncfusion_Blazor_Diagram_OrthogonalSegment_Length) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.OrthogonalSegment.html#Syncfusion_Blazor_Diagram_OrthogonalSegment_Direction)properties allow defining the flow and length of the segment. The following code example illustrates how to create customized orthogonal segments.
+The [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.OrthogonalSegment.html#Syncfusion_Blazor_Diagram_OrthogonalSegment_Length) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.OrthogonalSegment.html#Syncfusion_Blazor_Diagram_OrthogonalSegment_Direction) properties allow defining the flow and length of the segment. The following code example illustrates how to create customized orthogonal segments.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -112,7 +112,7 @@ The [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Ort
     }
 }
 ```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/MultipleSegments)
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Orthogonal)
 
 ![Connector with Orthogonal Segment in Blazor Diagram](../../images/blazor-diagram-connector-with-orthogonal.png)
 

blazor/diagram/getting-started.md

@@ -51,7 +51,7 @@ N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.o
 * Register the Syncfusion Blazor Service in the **~/Program.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/Program.cs" hl_lines="3 9 12" %}
+{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10 12" %}
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;