How to update AddInfo property for the dropped node in Blazor Diagram?
You can use the AddInfo property of DiagramNode to store custom information for nodes. This AddInfo property is an object type, so you can store any type of information such as string, integer, float, arrays, etc. Please refer to the following code example to learn how to define the AddInfo property for a 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 is triggered with IBlazorDropEventArgs as an argument. In this argument, you can access the dropped node from the Element property. Using the dropped node, you can deserialize the node’s AddInfo dictionary object and retrieve its values using the DeserializeObject method. After serialization of the node’s AddInfo, you can modify its values. Please refer to the following code sample to learn how to change a node's AddInfo values 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.EndUpdateAsync();
}
}
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Palette-Addinfo-kb1571644298
