1. Home
  2. Forum
  3. Blazor
  4. Change node AddInfo on drop

Change node AddInfo on drop

How do we catch the OnDrop from the pallete to the diagram for a node so we can set the AddInfo data? 

The OnDrop seems to use the System.EventArgs type which does not seem to fire after a drop.

BTW, the above is a work around as there may be a bug with AddInfo json conversion when the node comes from the pallete. You see, I set the AddInfo to a node on the pallete via code. Then in runtime when dropping the node on the diagram, the AddInfo throws a not able to convert json error.

However,

If the same AddInfo data is put on a node and addred via code to the diagram, there is no json error. 

7 Replies 1 reply marked as answer
AR Aravind Ravi Syncfusion Team September 7, 2020 12:36 PM UTC

Hi Scott, 
 
When we drag and drop a node from symbol palette to diagram, onDrop event gets fired. In that event through args.element.Node you can get the dropped node. By using the node, you can able to deserialize the node’s addInfo dictionary object and get the addInfo values from the node using Newtonsoft DeSerializeobject. After serialization change the node’s addInfo values. Please refer below code snippet for how to use the onDrop event 
 
<SfDiagram Width="1000px" Height="@Height" @ref="@diagram" Nodes="nodes"> 
            <DiagramEvents DragEnter="@OnDrop"></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(); 
        } 
    } 
 
 
Regards 
Aravind Ravi 


SP Scott Peal September 7, 2020 02:28 PM UTC

Hi Aravind,

That worked. Please consider adding this to the events documentation page.


Thanks!

SP Scott Peal September 7, 2020 04:19 PM UTC

Actually, this didn't work. I get the data, change it's GUID, save the data back to the arg; however, the GUID is not changed after it is dropped on the diagram. 


        public void OnDrop(IBlazorDragEnterEventArgs args)
        {
            if (args.Element.Node.AddInfo != null)
            {
                NodeData addInfoData = Newtonsoft.Json.JsonConvert.DeserializeObject<NodeData>(args.Element.Node.AddInfo.ToString());
                addInfoData.WorkflowStepId = Guid.NewGuid();
                args.Element.Node.AddInfo = Newtonsoft.Json.JsonConvert.SerializeObject(addInfoData);
                Diagram.EndUpdate();
            }
        }

AR Aravind Ravi Syncfusion Team September 8, 2020 02:07 PM UTC

Hi Scott, 

We are validating your requirements and update you with more details on September 10th 2020. 

Regards 
Aravind Ravi 


NG Naganathan Ganesh Babu Syncfusion Team September 11, 2020 10:03 AM UTC

Hi Scott, 
 
We have created a simple sample to achieve your requirement by using OnDrop and SelectionChange. Please refer to the below code example and sample. 
 
Code example: 
 
NodeData addinfo = null; 
    public void SelectionChange(IBlazorSelectionChangeEventArgs args) 
    { 
        if (args.State == EventState.Changed && addinfo != null) 
        { 
            DiagramNode node = diagram.GetNode((args.NewValue.Nodes[0] as DiagramNode).Id); 
            node.AddInfo = addinfo; 
        } 
    } 
 
    public void OnDrop(IBlazorDropEventArgs args) 
    { 
        if(args.Target.Connector != null) 
        { 
            string targetId = args.Element.Node.Id; 
            string oldsourceId = args.Target.Connector.SourceID; 
 
            DiagramConnector conn = diagram.GetConnector(args.Target.Connector.Id); 
            conn.TargetID = targetId; 
 
            DiagramConnector connector = new DiagramConnector() 
            { 
                Id = "connector" + diagram.Connectors.Count, 
                SourceID = targetId, 
                TargetID = oldsourceId, 
            }; 
            diagram.Connectors.Add(connector); 
        } 
    } 
 
 
Regards, 
Naganathan K G 


TL Torben Laursen June 8, 2021 07:59 PM UTC

Hi,

I this still the best way to update addinfo on drop from the palette?

The reason I ask was that it would be nice to handle it inside one event

GG Gowtham Gunashekar Syncfusion Team June 9, 2021 01:14 PM UTC

Hi Torben, 
 
Please refer to the following sample for how to update the AddInfo property of the node using onDrop event. We suggest you to set the cancel argument of the OnDrop event as true and add the new node with updated AddInfo, in the sample we have canceled the adding dropped node and added the same node with updated AddInfo property at run time. It’s the only to handle the AddInfo update in a single event, 
 
Code snippet: 
 
  public void OnDrop(IBlazorDropEventArgs args) 
    { 
        args.Cancel = true; 
        var NewNode = args.Element.Node; 
        var addNode = new DiagramNode() 
        { 
            Id = Guid.NewGuid().ToString(), 
            OffsetX = NewNode.OffsetX, 
            OffsetY = NewNode.OffsetY, 
            Width = NewNode.Width, 
            Height = NewNode.Height, 
            AddInfo = new NodeData() { WorkflowStepId = Guid.NewGuid() } 
        }; 
 
        diagram.Nodes.Add(addNode); 
    } 
 
 
    
Regards, 
Gowtham 


Marked as answer
Loader.
Up arrow icon