Connection lines rendered over shapes

6 posts, 0 answers
  1. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 04 Sep 2014 Link to this post

    Hello,

    Is there any way to get the connection lines rendered correctly?
    I mean, for example in this dojo: http://dojo.telerik.com/eJiTU

    You can see that the connection line between Antonio Moreno and the first Elizabeth Brown is rendered on the background (the second Elizabeth Brown shape is over it), giving the impression that it is like a sibling of the second Elizabeth Brown instead of a child of Antonio Moreno. Could that connection line be drawn on the x axis from Antonio Moreno, and then when it reaches the x position of the first Elizabeth Brown get down on the y axis?

    The same goes for the connection line between Antonio Moreno and Felipe Izquiedro, the line is rendered over the shape of Diego Roel.

    These issues makes the diagram control (for me at least) not qualified to use them as part of my product. These are minimal issues, but uglifies the whole diagram.
    And of course if there are many other children in any level it gets worse.

    So is there already any way to fix this?

    Thank you
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 08 Sep 2014 Link to this post

    Hello,

    I'm afraid this is a limitation of the layered layout. Other layout types such as mindmap don't have this problem.

    That said, connection routing is something that we'd like to improve in future versions. We appreciate your feedback.

    Apologies for the caused inconvenience.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 10 Sep 2014 in reply to T. Tsonev Link to this post

    Had to fix it on my own:

    http://dojo.telerik.com/eJiTU/3

    As you can see adding the part between the comments renders the lines as it is expected (at least for me).
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 12 Sep 2014 Link to this post

    Hi,

    Thank you for sharing your solution with us. We'll try to update the built-in implementation to match.

    I've updated our Telerik points as a token of gratitude for your involvement.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Aaron
    Aaron avatar
    7 posts
    Member since:
    Oct 2014

    Posted 14 Nov 2014 Link to this post

    Very grateful to Oscar for his solution. I've done the similar for the "tipover" scheme.

                    
    01.var diagram = $("#diagram").data("kendoDiagram");
    02.diagram.bringIntoView(diagram.shapes);
    03. 
    04./* RENDER LINES CORRECTLY */
    05.var numConnections = diagram.connections.length;
    06.for (var i = 0; i < numConnections; i++) {
    07.    var shape1 = diagram.connections[i].from;
    08.    var shape2 = diagram.connections[i].to;
    09. 
    10.    var posShape1 = shape1.getPosition("bottom");
    11.    var posShape2 = shape2.getPosition("left");
    12. 
    13.    var points = [];
    14.    var connector2 = shape2.connectors[3];
    15. 
    16.    /* dataItem.isRoot is specific to my model to connect from root to top of 1st-lvl children
    17.      instead of to the left. I'm sure somebody can find a more generic way to detect root.*/
    18.    if (shape1.dataItem.isRoot) {
    19.        posShape2 = shape2.getPosition("top");
    20.        connector2 = shape2.connectors[0];
    21.        points.push({
    22.            x: posShape1.x,
    23.            y: posShape1.y + ((posShape2.y - posShape1.y) / 2)
    24.        });
    25. 
    26.        points.push({
    27.            x: posShape2.x,
    28.            y: posShape1.y + ((posShape2.y - posShape1.y) / 2)
    29.        });
    30.    } else {
    31.        points.push({
    32.            x: posShape1.x,
    33.            y: posShape2.y
    34.        });
    35.    }
    36. 
    37.    diagram.connect(shape1.connectors[2], connector2, {
    38.        stroke: {
    39.            width: 1
    40.        },
    41.        points: points
    42.    });
    43.}
  7. Aaron
    Aaron avatar
    7 posts
    Member since:
    Oct 2014

    Posted 17 Nov 2014 in reply to Aaron Link to this post

    I modified the last bit to reroute the existing lines instead of adding new ones. Use it instead of the part where it says "diagram.connect".

    diagram.connections[i].source(shape1.connectors[2]);
    diagram.connections[i].target(connector2);
    diagram.connections[i].redraw({
        stroke: {
            width: 1,
            color: "#979797"
        },
        points: points
    });
Back to Top
Kendo UI is VS 2017 Ready