How to read the AddInfo Attribute of a node.

[Andrew]

Hi There, I must be having a blonde moment but I cannot get it right to read the AddInfo attribute of a DiagramNode.

I followed the example to add an AddInfo attribute to a Node as follows:

public class NodeAddInfo {
        public string ParentID;
        public string Content;
    }

 public List<NodeAddInfo> AddInfo = new List<NodeAddInfo>()
    {
        new NodeAddInfo(){ Content = "NodeContent", ParentID = "diagram" }
    };

        DiagramNode node1 = new DiagramNode()
        {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
            AddInfo = AddInfo
        };

But now when I try and read the selected node and read in its AddInfo attribute. Seeing that it is in Object form I do an explicit parse to List<NodeAddInfo>. It then throws an error for some reason.

1.  List<NodeAddInfo> addinfo = (List<NodeAddInfo>) SourceNode.AddInfo;

Please let me know if you guys have any suggestions or sample code. It could be to do with the fact that I load my nodes into the pallet and then drag them from there onto the diagram area. Whereas with the example they load the node directly to the diagram area.

[Aravind Ravi]

Hi Andrew, 

 

We have created a sample to show how to get node AddInfo values in the selectionChange event. Set dictionary object value as a node AddInfo value. In the selection change event by using NewtonSoft DeserializeObject we can deserialize the dictionary object and get the addInfo values from the node. Please find the below code snippet for how to get the AddInfo values using deserialize object. 

 

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

        data.Add("Mass", 15); 

        data.Add("Pressure", 50); 

        data.Add("Velocity", 30); 

 

new DiagramNode(){ 

                Id="node1", 

                Height = 100, 

                Width = 100, 

                OffsetX = 500, 

                AddInfo = data, 

                OffsetY = 100 

            }, 

 

 

public void SelectionChanged(IBlazorSelectionChangeEventArgs args) 

    { 

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

        { 

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

            { 

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

                 

                StateHasChanged(); 

            } 

        } 

    } 

   

 

 

We have attached a sample for your reference. Please find the sample in below link 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/283340/ze/Selection-Change1768490102 

 

Regards 

Aravind Ravi 

[Scott Peal]

I get this error message for the onselectionchange

InvalidOperationException: Object of type 'Syncfusion.Blazor.Diagrams.SfDiagram' does not have a property matching the name 'onselectionchange'.

[Scott Peal]

I had to do a work around for some reason the data type in AddInfo is different when added to a pallete node verses a diagram node via code.

        public void OnClickDiagram(MouseEventArgs args)

        {

            if (Diagram.SelectedItems.Nodes.Count > 0)

            {

                var node = Diagram.SelectedItems.Nodes[0];

                var type = node.AddInfo.GetType();

                if (type.Name == "JObject")

                {

                    Dictionary<string, object> nodeData = Newtonsoft.Json.JsonConvert.DeserializeObject<Dictionary<string, object>>(node.AddInfo.ToString());

                }

                else

                {

                    Dictionary<string, object> nodeData = (Dictionary<string, object>)node.AddInfo;

                }

            }

        }

[Aravind Ravi]

Hi Scott, 

 

We suspect that the issue occurs due to you have set the OnSelectionChange event in the diagram events. So that only onSelectionChange properly does not exist in Sfdiagram exist. If you want to use the selection change event means then use SelectionChanged event instead of OnSelectionChange event. Please refer below code snippet for how to use SelectionChanged event.  

 

<SfDiagram ID="diagram" Width="1000px" Height="@Height" @ref="@diagram" Nodes="@NodeCollection" Connectors="@ConnectorCollection"> 

            <DiagramEvents SelectionChanged="@SelectionChanged" MouseEnter="@MouseEnter"></DiagramEvents> 

 

        </SfDiagram> 

 

public void SelectionChanged(IBlazorSelectionChangeEventArgs args) 

    { 

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

        { 

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

            { 

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

                 

                StateHasChanged(); 

            } 

        } 

    } 

 

And for both diagram node and palette node you can able to deserialize the node’s addInfo dictionary object and get the addInfo values from the node using Newtonsoft DeSerializeobject. 

 

Regards 

Aravind Ravi