How to have Custom Nodes that Inherit from DiagramNode

Question

I am very new to Blazor and pretty much any web technology. I would like to know how one would go about creating custom Diagram Nodes that will be displayed in a palette and then can be used in SfDiagram to create some sort of flow chart.

These custom nodes will be custom in how they look but the most important part is that we want to store metadata inside each one that is different.

So let's say We have Trigger Nodes and Logic Nodes (e.g. class TriggerNode : DiagramNode). They will also inherit from Diagram nodes but will have some extra attributes in their class description ( metadata ) :

e.g. class TriggerNode : DiagramNode {

public string metadata1;

public string metadata2;

public string metadata3;

...

}

When Nodes are added to a SfDiagram I notice one specifies an "ObservableCollection<DiagramNode> NodeCollection " in the cs code of the razor file and you specify in the razor UI part :

I want to be able to have my nodes stored in this NodeCollection but without losing their custom data, so without upcasting to parent class "Diagram Node". Is there any way to do so?

Use Case would be:

When someone selects a node on the diagram, depending on what type of node it is the metadata characteristics are shown on a configuration panel.
When we run through from the start node working our way to our end node, we pass along a JSON file and build up a payload depending on the metadata of each node.

I thought maybe when you specify the container "Nodes" in the SfDiagram UI declaration, you could specify containers of different types perhaps, and have mutliple containers. This way it would automatically put them in their associated containers and you just need to find the ID of the node selected and find which container it is in, but I am having no luck in doing so.

Any advice or sample code would be appreciated.

Aravind Ravi · Accepted Answer

Hi Andrew,

We do not have support to define the custom nodes in the nodes collection of the diagram. However, if you want to store the additional information for node means then by using the AddInfo property we can able to store the custom data. Please find the below code snippet for how to use AddInfo property for node.

Dictionary<string, string> data = new Dictionary<string, string>();

data.Add("metadata1", “CustomData1”);

data.Add("metadata2",”CustomData2”);

data.Add("metadata3", “CustomData3”);

DiagramNode node1 = new DiagramNode()

{

Id = "node1",

Width = 50,

Height = 300,

OffsetX = 300,

OffsetY = 250,

AddInfo = data,

}

So you can store your additional information of data from db to the node AddInfo property and while select the node by using this property you can show these properties in the configuration panel and able to update these additional information for selected node in the selection change event.

public async void SelectionChanged(IBlazorSelectionChangeEventArgs args)

{

string id = "";

if (args.Type == ChangeType.Addition && args.State == EventState.Changed && args.NewValue.Nodes.Count > 0)

{

this.visible = "visible";

node = diagram.GetNode(args.NewValue.Nodes[0].Id);

if (args.NewValue.Nodes[0].AddInfo != null)

{

Dictionary<string, string> addInfoData = Newtonsoft.Json.JsonConvert.DeserializeObject<Dictionary<string, string>>(args.NewValue.Nodes[0].AddInfo.ToString());

this.mass = addInfoData["metadata1"].ToString();

this.pressure = addInfoData["metadata2"].ToString();

this.velocity = addInfoData["metadata3"].ToString();

StateHasChanged();

}

Regards

Aravind Ravi

Aravind Ravi · Answer

Hi Andrew, 

We are validating your requirements and update you with more details on June 24th 2020. 

Regards 
Aravind Ravi