How to update AddInfo property for the dropped node in Blazor Diagram?
You can use AddInfo property of the DiagramNode to store the custom information for the node. This AddInfo property is an object type so, you can store any type of informations such as string, integer, float, array etc… Please refer to the following code example for how to define the AddInfo property for the node.
public ObservableCollection<Object> basicShapes { get; set; } = new ObservableCollection<Object>();
public ObservableCollection<SymbolPalettePalette> Palettes;
//Initialize the dictionary object for the node’s addinfo.
public Dictionary<string, object> data = new Dictionary<string, object>();
protected override void OnInitialized()
{
Palettes = new ObservableCollection<SymbolPalettePalette>();
//Adding AddInfo properties.
data.Add("Mass", 15);
data.Add("Pressure", 50);
data.Add("Velocity", 30);
}
basicShapes = new ObservableCollection<Object>()
{
new DiagramNode()
{
Id = "Rectangle",
Shape = new DiagramShape() { Type = Shapes.Basic, BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle },
//Assign data to the node AddInfo property.
AddInfo = data
},
};
Palettes.Add(new SymbolPalettePalette() { Id = "BasicShapes", Expanded = true, Symbols = basicShapes, Title = "Basicshapes" });
When you drag and drop a node from the symbol palette to the diagram, the OnDrop event will get fired with IBlazorDropEventArgs as argument. In that argument, you can get the dropped node from Element property. By using the dropped node, you can deserialize the node’s AddInfo dictionary object and get the AddInfo values from the node using the Newtonsoft DeserializeObject. After serialization of the node’s AddInfo, you can change the node’s AddInfo values. Please refer to the following code sample for how to change node AddInfo value using the onDrop event.
<SfDiagram Width="1000px" Height="@Height" @ref="@diagram" Nodes="nodes">
<DiagramEvents OnDrop="@OnDrop" SelectionChanged="@SelectionChange" ></DiagramEvents>
</SfDiagram>
public void OnDrop(IBlazorDragEnterEventArgs args)
{
if (args.Element.Node.AddInfo != null)
{
Dictionary<string, object> addInfoData = Newtonsoft.Json.JsonConvert.DeserializeObject<Dictionary<string, object>>(args.Element.Node.AddInfo.ToString());
//After deserialize change the node addInfo value.
diagram.EndUpdate();
}
}
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Palette-Addinfo-kb1571644298
