Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blazor/diagram/annotations/appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@ You can change the font style of the annotations with the font specific properti
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();
Diagram.EndUpdateAsync();
}
}
```
Expand Down
12 changes: 6 additions & 6 deletions blazor/diagram/connectors/connectors.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
connector.ID = RandomId();
connector.SourcePoint = new DiagramPoint { X = 100, Y = 100 };
connector.TargetPoint = new DiagramPoint { X = 200, Y = 100 };
await diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { connector });
await diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { connector });

}
internal string RandomId()
Expand All @@ -152,9 +152,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
![Clonning Node](../images/CloneConnector.gif)
## How to add connector with annotations at runtime

You can add connector with annotation at runtime in the diagram component by using the [AddDiagramElements](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElements_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method.
You can add connector with annotation at runtime in the diagram component 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.

The following code explains how to add an connector with annotation at runtime by using `AddDiagramElements` method.
The following code explains how to add an connector with annotation at runtime by using `AddDiagramElementsAsync` method.

```cshtml
@using Syncfusion.Blazor.Diagram
Expand Down Expand Up @@ -200,7 +200,7 @@ The following code explains how to add an connector with annotation at runtime
},
};
NodeCollection.Add(NewConnector);
await Diagram.AddDiagramElements(NodeCollection);
await Diagram.AddDiagramElementsAsync(NodeCollection);
}
}
```
Expand Down Expand Up @@ -393,13 +393,13 @@ The following code example explains how to change the connector properties.
Diagram.BeginUpdate();
Diagram.Connectors[0].SourcePoint.X = 50;
Diagram.Connectors[0].SourcePoint.Y = 50;
Diagram.EndUpdate();
Diagram.EndUpdateAsync();
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/ActionofConnectors/UpdateConnectorAtRunTime)

N> BeginUpdate and EndUpdate methods allow you to stop the continuous update of control and resume it finally.
N> BeginUpdate and EndUpdateAsync methods allow you to stop the continuous update of control and resume it finally.

## Connections

Expand Down
6 changes: 3 additions & 3 deletions blazor/diagram/group.md
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
(node4 as NodeGroup).Children = array;
node4.OffsetX += 25;
node4.OffsetY += 25;
await diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { node2, node3, node4 });
await diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { node2, node3, node4 });
}

internal string RandomId()
Expand Down Expand Up @@ -384,7 +384,7 @@ The following code illustrates how a node group is added at runtime.
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/AddGroupAtRunTime)
* Also, you can add the child to the node group through [AddChild](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddChild_Syncfusion_Blazor_Diagram_NodeGroup_Syncfusion_Blazor_Diagram_NodeBase_) method. The following code illustrates how to add child to the existing node group through AddChild method.
* Also, you can add the child to the node group through [AddChildAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddChildAsync_Syncfusion_Blazor_Diagram_NodeGroup_Syncfusion_Blazor_Diagram_NodeBase_) method. The following code illustrates how to add child to the existing node group through AddChildAsync method.

```cshtml
@using Syncfusion.Blazor.Diagram
Expand Down Expand Up @@ -466,7 +466,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
}
}
};
await diagram.AddChild(group as NodeGroup, node);
await diagram.AddChildAsync(group as NodeGroup, node);
}
}
```
Expand Down
20 changes: 10 additions & 10 deletions blazor/diagram/how-to.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,11 @@ To create a node, define the Node object and add it to the nodes collection of t
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddMethod)

## How to add nodes through AddDiagramElements
## How to add nodes through AddDiagramElementsAsync

Unlike the Add() method, the [AddDiagramElements](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElements_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method will measure the passed elements before re-rendering the complete diagram component at once. When using the Add() method to add multiple nodes and connectors simultaneously, the connectors will be rendered before the nodes. As a result, connectors may be misplaced due to the synchronous behavior of the Add method. To overcome this, use the asynchronous AddDiagramElements() method.
Unlike the Add() method, 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 will measure the passed elements before re-rendering the complete diagram component at once. When using the Add() method to add multiple nodes and connectors simultaneously, the connectors will be rendered before the nodes. As a result, connectors may be misplaced due to the synchronous behavior of the Add method. To overcome this, use the asynchronous AddDiagramElementsAsync() method.

* AddDiagramElements() method is a preferred way to add a collection of items to the diagram to get better performance compared to Add() method.
* AddDiagramElementsAsync() method is a preferred way to add a collection of items to the diagram to get better performance compared to Add() method.

```cshtml
@using Syncfusion.Blazor.Diagram
Expand Down Expand Up @@ -147,7 +147,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
NodeCollection.Add(node1);
NodeCollection.Add(node2);
NodeCollection.Add(Connector);
await Diagram.AddDiagramElements(NodeCollection);
await Diagram.AddDiagramElementsAsync(NodeCollection);
}
}
```
Expand Down Expand Up @@ -958,8 +958,8 @@ 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/GetCustomCursor)

## How to use the BeginUpdate and EndUpdate
[BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) prevents visual updates to the diagram until the EndUpdate() method is called. [EndUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdate) means that the diagram is unlocked following a call to the BeginUpdate(Boolean) method, resulting in an immediate visual update.
## How to use the BeginUpdate and EndUpdateAsync
[BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) prevents visual updates to the diagram until the EndUpdateAsync() method is called. [EndUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdateAsync) means that the diagram is unlocked following a call to the BeginUpdate(Boolean) method, resulting in an immediate visual update.

```cshtml
@using Syncfusion.Blazor.Diagram
Expand Down Expand Up @@ -1032,7 +1032,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
diagram.BeginUpdate();
diagram.Nodes[0].Height = 150;
diagram.Nodes[0].Width = 150;
diagram.EndUpdate();
diagram.EndUpdateAsync();

}
}
Expand Down Expand Up @@ -1305,7 +1305,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
{
sfDiagram.EndGroupAction();
}
_ = sfDiagram.EndUpdate();
_ = sfDiagram.EndUpdateAsync();
base.OnMouseUp(args);
this.InAction = true;
}
Expand Down Expand Up @@ -1525,7 +1525,7 @@ 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/ZoomAndPan)

## How to refresh the datasource
[RefreshDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RefreshDataSource) will refresh the layout based on the changes in the data source.
[RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RefreshDataSourceAsync) will refresh the layout based on the changes in the data source.

```cshtml
@using Syncfusion.Blazor.Diagram
Expand Down Expand Up @@ -1599,7 +1599,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="2", Branch = "subRight" },
new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="2", Branch = "subRight" },
};
await Diagram.RefreshDataSource();
await Diagram.RefreshDataSourceAsync();
}
}
```
Expand Down
6 changes: 3 additions & 3 deletions blazor/diagram/interaction.md
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ Clone is a virtual method of the node that is used to create a copy of a diagram
groupNode.OffsetX += 25;
groupNode.OffsetY += 25;
}
diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { groupNode });
diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { groupNode });
return groupNode.ID;
}
public string CloneNode(Node node, bool isChild)
Expand All @@ -264,7 +264,7 @@ Clone is a virtual method of the node that is used to create a copy of a diagram
nodeChild.OffsetX += 25;
nodeChild.OffsetY += 25;
}
diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { nodeChild });
diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { nodeChild });
diagram.EndGroupAction();
return nodeChild.ID;
}
Expand All @@ -278,7 +278,7 @@ Clone is a virtual method of the node that is used to create a copy of a diagram
connectorChild.SourcePoint = new DiagramPoint() { X = connectorChild.SourcePoint.X + 25, Y = connectorChild.SourcePoint.Y + 25 };
connectorChild.TargetPoint = new DiagramPoint() { X = connectorChild.TargetPoint.X + 25, Y = connectorChild.TargetPoint.Y + 25 };
}
diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { connectorChild });
diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { connectorChild });
diagram.EndGroupAction();
return connectorChild.ID;
}
Expand Down
4 changes: 2 additions & 2 deletions blazor/diagram/layout/hierarchical-layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ public void UpdateSpacing()
Diagram.BeginUpdate();
HorizontalSpacing += 10;
VerticalSpacing += 10;
Diagram.EndUpdate();
Diagram.EndUpdateAsync();
}
```

Expand All @@ -221,7 +221,7 @@ public void UpdateMargin()
Diagram.BeginUpdate();
left += 10;
top += 10;
Diagram.EndUpdate();
Diagram.EndUpdateAsync();
}
```

Expand Down
4 changes: 2 additions & 2 deletions blazor/diagram/layout/organizational-chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -370,11 +370,11 @@ The following code example illustrates how to add assistants to the layout.

## How to refresh the layout

Diagram allows to refresh the layout at runtime by using the [DoLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DoLayout) method. Use the following code example to refresh the layout.
Diagram allows to refresh the layout at runtime by using the [DoLayoutAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DoLayoutAsync) method. Use the following code example to refresh the layout.

```csharp
//Update the layout at runtime.
diagram.DoLayout();
diagram.DoLayoutAsync();

//Here, diagram is instance of SfDiagramComponent.
```
Expand Down
12 changes: 6 additions & 6 deletions blazor/diagram/nodes/nodes.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

## How to add node with annotations at runtime

You can add node with annotation at runtime in the diagram component by using the [AddDiagramElements](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElements_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method.
You can add node with annotation at runtime in the diagram component 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.

The following code explains how to add an node with annotation at runtime by using `AddDiagramElements` method.
The following code explains how to add an node with annotation at runtime by using `AddDiagramElementsAsync` method.

```cshtml
@using Syncfusion.Blazor.Diagram
Expand Down Expand Up @@ -175,7 +175,7 @@ The following code explains how to add an node with annotation at runtime by us
},
};
NodeCollection.Add(NewNode);
await diagram.AddDiagramElements(NodeCollection);
await diagram.AddDiagramElementsAsync(NodeCollection);
}
}
```
Expand Down Expand Up @@ -300,7 +300,7 @@ public void RemoveNodes()
node.ID = RandomId();
node.OffsetX += 25;
node.OffsetY += 25;
await diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { node });
await diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { node });
}

internal string RandomId()
Expand Down Expand Up @@ -358,13 +358,13 @@ The following code example explains how to change the node properties.
Diagram.BeginUpdate();
Diagram.Nodes[0].Width = 50;
Diagram.Nodes[0].Height = 50;
await Diagram.EndUpdate();
await Diagram.EndUpdateAsync();
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/UpdateNode)

N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) and [EndUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdate) methods allow you to stop the continuous update of control and resume it finally.
N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) and [EndUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdateAsync) methods allow you to stop the continuous update of control and resume it finally.

## See Also

Expand Down
2 changes: 1 addition & 1 deletion blazor/diagram/ports/ports.md
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@ protected override void OnInitialized()
diagram.BeginUpdate();
nodes[0].Ports[0].Offset.X = 1;
nodes[0].Ports[0].Offset.Y = 1;
await diagram.EndUpdate();
await diagram.EndUpdateAsync();
}
}
```
Expand Down
10 changes: 5 additions & 5 deletions blazor/diagram/serialization.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,19 @@ string data = Diagram.SaveDiagram();

## Load the diagram from string

The [diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) is loaded from the serialized string data by the [LoadDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_LoadDiagram_System_String_System_Boolean_) method. The following code illustrates how to load the diagram from serialized string data.
The [diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) is loaded from the serialized string data by the [LoadDiagramAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_LoadDiagramAsync_System_String_System_Boolean_) method. The following code illustrates how to load the diagram from serialized string data.

```cshtml
SfDiagramComponent Diagram;
//returns the serialized string of the Diagram
string data = Diagram.SaveDiagram();
//Loads the Diagram from saved data
await Diagram.LoadDiagram(data);
await Diagram.LoadDiagramAsync(data);
```

## Load the SfDiagram JSON data string using SfDiagramComponent

You can load the [SfDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html) serialized JSON data string into [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) using [LoadDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_LoadDiagram_System_String_System_Boolean_) method. When you load SfDiagram serialized string, then the isClassicData parameter should be set to true. The default value of the isClassicData is false.
You can load the [SfDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html) serialized JSON data string into [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) using [LoadDiagramAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_LoadDiagramAsync_System_String_System_Boolean_) method. When you load SfDiagram serialized string, then the isClassicData parameter should be set to true. The default value of the isClassicData is false.

The following code illustrates how to load the SfDiagramComponent from SfDiagram serialized string data.

Expand All @@ -54,7 +54,7 @@ string data = ClassicDiagram.SaveDiagram();

SfDiagramComponent Diagram;
//Loads the SfDiagramComponent from saved data of the SfDiagram
await Diagram.LoadDiagram(data, true);
await Diagram.LoadDiagramAsync(data, true);
```

## How to save and load the diagram using file stream
Expand Down Expand Up @@ -86,7 +86,7 @@ The diagram provides support to save and load the diagram using file stream. The
diagram.BeginUpdate();
ExtensionType = ".json";
await FileUtil.Click(jsRuntime);
await diagram.EndUpdate();
await diagram.EndUpdateAsync();
}

public async static Task SaveAs(IJSRuntime js, string data, string fileName)
Expand Down
Loading