Add data object to connector

[Daniel Koffler]

Hello,

If population a diagram from a data source the node object includes a data property which can be used to style and customize a node if during creation. However a similar property is missing for connectors.

How needs my data source look like so that my parent links (Complex hierarchical diagrams) not just include the parent id but also additional information, e.g relation type, a percentage …

Thank you

Daniel

[Balavignesh RaviChandran]

Hi Daniel,

In Syncfusion Blazor Diagram, connectors are automatically populated based on the relationships defined in the data source. Since nodes represent individual data entities, they include the data property for customization. However, connectors do not have a similar property because they are derived from the parent-child relationships rather than direct data items.

If you need extensive customization of connectors—such as adding a relation type, percentage, or other metadata—you can utilize the AdditionalInfo property of the connector. A good approach is to handle this in the ConnectorCreated event, where you can access the connector’s SourceNode and TargetNode properties to retrieve relevant data from the corresponding nodes and store it in AdditionalInfo for further customization.

Regards,

Bala Vignesh R

[Daniel Koffler]

Hello,

thank you for the fast reply. However I have difficulties following your instructions. I do not see any event "ConnectorCreated" but "ConnectorCreating" only. Also the "IDiagramObject" which I cast to "Connector" in the ConnectorCreating does not include Source Node or Target Node, but just die SourceId and TargetId and those seem not to be my own ids bust some internal ones.

Kindly let me know how to fulfil my requirement.

Thank you
Daniel

[Balavignesh RaviChandran]

Hi Daniel,

The connector object has only SourceID and TargetID properties which holds source and target node's ID only which are internally generated unless explicitly set. When nodes are populated using a data source, they will have randomly generated IDs unless a unique ID is specified in the NodeCreating event.

To address this, we have prepared a simple working sample where:

1. We assign unique IDs to each node in the NodeCreating event.
2. We retrieve the source and target nodes using diagram.GetObject(SourceID) and diagram.GetObject(TargetID).
3. We store their data in the AdditionalInfo dictionary of the connector in ConnectorCreating Event.

Sample Implementation:

    // Creates node with some default values and assigns unique ID.
    private void OnNodeCreating(IDiagramObject obj)
    {
        Node node = obj as Node;
        HierarchicalDetails data = node.Data as HierarchicalDetails;
        node.Height = 40;
        node.Width = 100;
        node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeWidth = 2, StrokeColor = "none" };
        if(data != null)
        {
            node.ID = data.Id; // Assigning a unique ID from the data source
            node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation(){ Content = data.Label, Style = new TextStyle(){ Color="white"} }
            };
        }

    }

    // Creates connectors with some default values and stores source & target data.
    private void OnConnectorCreating(IDiagramObject connector)
    {
        Connector? newConnector = connector as Connector;
        if (newConnector == null)
            return;

        newConnector.Type = ConnectorSegmentType.Orthogonal;
        newConnector.CornerRadius = 7;
        newConnector.Style.StrokeWidth = 1;
        newConnector.TargetDecorator.Height = 7;
        newConnector.TargetDecorator.Width = 7;
        newConnector.Style.Fill = "#6495ED";
        newConnector.Style.StrokeColor = "#6495ED";
        newConnector.TargetDecorator.Style.Fill = "#6BA5D7";
        newConnector.TargetDecorator.Style.StrokeColor = "#6BA5D7";

        // Retrieve source and target nodes
        Node sNode = diagram.GetObject(newConnector.SourceID) as Node;
        HierarchicalDetails? SourceData = sNode?.Data as HierarchicalDetails;

        Node tNode = diagram.GetObject(newConnector.TargetID) as Node;
        HierarchicalDetails? TargetData = tNode?.Data as HierarchicalDetails;

        // Store source and target data in AdditionalInfo
        if (newConnector.AdditionalInfo == null)
        {
            newConnector.AdditionalInfo = new Dictionary<string, object>();
        }
        newConnector.AdditionalInfo["SourceData"] = SourceData;
        newConnector.AdditionalInfo["TargetData"] = TargetData;
    }

Key Takeaways:

• Nodes generated from a data source have random IDs unless explicitly assigned.
• We set unique IDs in the NodeCreating event to ensure correct mapping.
• We retrieve nodes using diagram.GetObject(SourceID/TargetID) and store their data in AdditionalInfo.

Let us know if you need further clarification!

Best regards,

Attachment: SF196233_94fd8f9e.zip