1. Home
  2. Forum
  3. Blazor
  4. How to get node information on Click?

How to get node information on Click?

Good Morning,

I have been working with the Diagram nodes but the lack of Event information in the documentation has gotten me stumped. 

I am needing to get the selected node information on mouse click and then i am adding other information and assigning methods to the node (think workflow but is irrelivent)

This is what i have:
SfDiagram
            <SfDiagram Height="700px"
                       @ref="@Diagram"
                       Nodes="@NodeCollection"
                       Connectors="@ConnectorCollection"
                       NodeDefaults="@NodeDefaults"
                       
                       ConnectorDefaults="@ConnectorDefaults">
                <DiagramPageSettings>
                    <DiagramFitOptions CanFit="true" Mode="FitModes.Width"></DiagramFitOptions>
                </DiagramPageSettings>
                <DiagramEvents  SelectionChanged="@SelectionChanged" ></DiagramEvents>
                <DiagramSnapSettings>
                    <HorizontalGridlines LineColor="#e0e0e0 " LineIntervals="@GridLineIntervals">
                    </HorizontalGridlines>
                    <VerticalGridlines LineColor="#e0e0e0" LineIntervals="@GridLineIntervals">
                    </VerticalGridlines>
                </DiagramSnapSettings>
            </SfDiagram>

    public void NodeInfo()
    {
        nodeid = Diagram.Nodes[0].Id;
        IsVisible = true;
    }

Another issue that i am having is that it is taking the ID from the pallet nodes and not the diagram. I have the nodes ID auto named.
Here is my createnode method
  private void CreateNode(string id, double x, double y, FlowShapes shape, string label, bool positionLabel = false)
    {
        ObservableCollection<DiagramPort> defaultsPorts = new ObservableCollection<DiagramPort>();
        defaultsPorts.Add(CreatePort(0, 0.5));
        defaultsPorts.Add(CreatePort(0.5, 1));
        defaultsPorts.Add(CreatePort(1, 0.5));
        defaultsPorts.Add(CreatePort(0.5, 0));
        DiagramNodeAnnotation annotation = new DiagramNodeAnnotation()
        {
            Content = label,
            Style = new AnnotationStyle()
            {
                Color = "white",
                Fill = "transparent"
            }
        };
        if (positionLabel)
        {
            annotation.Margin = new NodeAnnotationMargin() { Left = 25, Right = 25 };
        };
        DiagramNode diagramNode = new DiagramNode()
        {
            Id = string.Format("node{0}", ++nodeCount),
            OffsetX = x,
            OffsetY = y,
            Ports = defaultsPorts,
            Shape = new DiagramShape() { Type = DiagramShapes.Flow, FlowShape = shape },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() { annotation }
        };
        NodeCollection.Add(diagramNode);
    }

Please help!

Kind Regards, 
Trevor Lynn

3 Replies 1 reply marked as answer
AR Aravind Ravi Syncfusion Team November 3, 2020 12:08 PM UTC

Hi Trevor, 
 
Please find the response for queries in below table 
 
I am needing to get the selected node information on mouse click and then i am adding other information and assigning methods to the node (think workflow but is irrelivent) 
When we click on any nodes, connector or  in the diagram, Clicked event gets triggered. Through clicked event args we can identify whether we click on node or other element. In the args through selector nodes we can find in which node we have clicked. After get the node, you can change the node property. 
 
<SfDiagram @ref="Diagram" 
                           Height="700px" 
                           Nodes="@NodeCollection" 
                           Connectors="@ConnectorCollection" 
                           ConnectorDefaults="@ConnectorDefaults"> 
                    <DiagramEvents Clicked="@Clicked"></DiagramEvents> 
</SfDiagram> 
 
public void Clicked(IBlazorClickEventArgs args) 
    { 
        if(args.Element.Selector != null && args.Element.Selector.Nodes != null) 
        { 
            //Change the node’s information 
        } 
    } 
 
 
  
Another issue that i am having is that it is taking the ID from the pallet nodes and not the diagram. I have the nodes ID auto named. 
Could you please confirm us, whether you want the same ID when drag and drop the node from palette to diagram. If yes, then by default, while drop the node in diagram we have add randomID at last to the node ID. Because in the diagram nodes and connectors should be unique. We do not set same ID for the nodes and connectors.  
 
If we misunderstood your requirements, please share us more details of your requirement or pictorial representation of your requirement. This would help us to serve you better. 
 
Regards 
Aravind Ravi 


Marked as answer
TR Trevor November 3, 2020 05:17 PM UTC

Thank you Aravind Ravi 

My first issue is fixed. 

For my second issue, i am needing the nodes to be named in sequential order (Start1, Message2, Message3, End4) I did notice the component adds a 4 random characters to the ID but for my code it is parsing out the integer portion of the ID to correlate with a "Step" Number in a separate class.


How do i achieve this? here is my add node method
 private void CreateNode(double x, double y, BpmnShapes shape, string label, bool positionLabel = false)
    {
        ObservableCollection defaultsPorts = new ObservableCollection();
        defaultsPorts.Add(CreatePort(0, 0.5));
        defaultsPorts.Add(CreatePort(0.5, 1));
        defaultsPorts.Add(CreatePort(1, 0.5));
        defaultsPorts.Add(CreatePort(0.5, 0));
        DiagramNodeAnnotation annotation = new DiagramNodeAnnotation()
        {
            Content = label,
            Style = new AnnotationStyle()
            {
                Color = "white",
                Fill = "transparent"
            }
        };
        if (positionLabel)
        {
            annotation.Margin = new NodeAnnotationMargin() { Left = 25, Right = 25 };
        };
        DiagramNode diagramNode = new DiagramNode()
        {
            Id = string.Format("node{0} ", ++nodeCount),
            OffsetX = x,
            OffsetY = y,
            Ports = defaultsPorts,
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.Bpmn,
                BpmnShape = shape
            },
            Annotations = new ObservableCollection() { annotation }
        };
        NodeCollection.Add(diagramNode);
    }


Also when going through the Json construct of the diagram i noticed information on Datasource

Is there any documentation on setting the datasource, data manager, connectionDataSource, and Crud Actions?

ALSO 
I noticed the OnDrop Event Restarts the the application
 
 public void OnDropped(IBlazorDropEventArgs args)
    {
        if (args.Element.Node != null )
        {
            nodeid = args.Element.Node.Id;
            nTrigger = args.Element.Node.Shape.Event.Trigger.ToString();
            nType = args.Element.Node.Shape.Event.Event.ToString();
            nType1 = args.Element.Node.Shape.Activity.Activity.ToString();
            nTrigger = args.Element.Node.Shape.Type.Value.ToString();
            nodeid1 = args.Element.Node.Shape.Data;
        }
        //Action to be performed
    }

Kind Regards,

Trevor 

AR Aravind Ravi Syncfusion Team November 4, 2020 11:32 AM UTC

Hi Trevor, 

Please find the response for queries in below table 

i am needing the nodes to be named in sequential order 
Could you please confirm us,  whether you want to same ID for node when drag and drop node from palette to diagram. If yes, then as we said earlier, we cannot able to add node with given ID when drag and drop node from palette. When drag and drop the node from palette to node, we add four randomId() charcters at last of the node id. 

If you want to render the node directly in diagram means then you can able to add node Id as below code snippet 

DiagramNode diagramNode = new DiagramNode() 
        { 
            Id = string.Format("node{0}", ++nodeCount), 
            OffsetY = y, 
            Shape = new DiagramShape() { Type = DiagramShapes.Flow, FlowShape = shape }, 
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() { annotation } 
        }; 
        NodeCollection.Add(diagramNode); 


 

Documentation for Datasource settings 
Please refer below UG documentation link for the diagram data source settings property 



Regards 
Aravind Ravi 


Loader.
Up arrow icon