This is a migrated thread and some comments may be shown as answers.

Connection lines rendered over shapes

5 Answers 269 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Oscar
Top achievements
Rank 1
Oscar asked on 04 Sep 2014, 05:56 PM
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

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 08 Sep 2014, 08:41 AM
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!
 
0
Oscar
Top achievements
Rank 1
answered on 10 Sep 2014, 08:36 AM
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).
0
T. Tsonev
Telerik team
answered on 12 Sep 2014, 07:28 AM
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!
 
0
Aaron
Top achievements
Rank 1
answered on 15 Nov 2014, 12:06 AM
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.}
0
Aaron
Top achievements
Rank 1
answered on 18 Nov 2014, 12:49 AM
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
});
Tags
Diagram
Asked by
Oscar
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Oscar
Top achievements
Rank 1
Aaron
Top achievements
Rank 1
Share this question
or