Multiple node connection points?

4 posts, 0 answers
  1. Kristoffer
    Kristoffer avatar
    30 posts
    Member since:
    Oct 2012

    Posted 05 Dec 2012 Link to this post

    Currently evaluating your Diagram component. Looking through your samples, it's still a bit unclear if some features are supported or not.

    Does your Diagram component support the following?
    1) Multiple connection points on any side of the node. Preferably, distributed in such way that arrows from other nodes can be aligned horizontally. See connections.png.
    2) Dynamic number of connection points. You start with one connection point. Once connected, a second one appears. Then a third one, and so on.
    3) Building shapes programmatically? We have a plugin based framework where each plugin should be able to define its own customized shape, with its own number of connection points. and color. I imagine using one single node class for this, where some smart binding is used to produce the different shapes.

  2. Francois Vanderseypen
    Francois Vanderseypen avatar
    46 posts
    Member since:
    Oct 2009

    Posted 05 Dec 2012 Link to this post


    1. connection points are called connectors and, yes, you can define your own custom connectors besides the predefined ones. We also have a so-called gliding connector which allows the connection point where a connection is attached to a shape to glide freely around the edge of a shape. In any case, the situation in your attached picture is possible.
    2. The API allows you to define connectors via code. The situation your describe would require some custom shape and logic but is possible (not explicitly checked or have a ready-made example for you though).
    3. You can use XAML control templates, the diagramming API, custom (path) geometry which you can copy from Expression Blend (or even SVG) define and add shapes. Creating shape geometry and logic on the fly is somewhat unusual however, most business situations dictate in advance the shape's geometry (look 'n feel) and behavior but your pluggable system is an interesting angle. 

    I can guess from your short description that customizing RadDiagram will take time and possibly some deep changes, likely not within the boundaries of Telerik's source code agreements (section 5.3.4). You can contact Telerik Consulting if you wish to go beyond the box.

    Hope this helps, Fr.
  3. Sammy
    Sammy avatar
    15 posts
    Member since:
    Aug 2008

    Posted 14 Apr 2014 Link to this post


    I have quite same requirements. What I need is, I would like the diagram component to handle the multiple connection points it self, but taking into consideration that 1 connector has only 1 connection (1 to 1). e.g. the nearest connector is already attached to for another connection, attach the next nearest connector.

    How can i implement this?

    Thanks in advance,
  4. Zarko
    Zarko avatar
    755 posts

    Posted 17 Apr 2014 Link to this post

    Hello Sammy,
    Could you please elaborate a little bit more on your scenario ? Also could you explain what exactly do you mean by "diagram component to handle the multiple connection points it self" ?  
    At the moment the easies way to customize the connection manipulation is to handle the ConnectionManipulationStarted and ConnectionManipulationCompleted events and add some custom logic there e.g.:
    private void OnConnectionManipulationCompleted(object sender, Telerik.Windows.Controls.Diagrams.ManipulationRoutedEventArgs e)
        e.Handled = true;
        // Change the currently manipulated connection with a new one with different target connector.
        var newConnection = new RadDiagramConnection();
        newConnection.Source = e.Connection.Source;
        newConnection.SourceConnectorPosition = e.Connection.SourceConnectorPosition;
        newConnection.Target = e.Shape;
        if (e.Shape != null)
            newConnection.TargetConnectorPosition = e.Shape.Connectors[1].Name;
    We're looking forward to hearing from you.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top