Draw connections behind shapes

[Itai]

It seems by default connections are drawn over shapes, and I couldn't find a way to change this. Is there a way to make it so connections are drawn behind shapes? In general, is there a way to control the z-level of shapes and connections? 

 

Thanks. 

[Dimiter Topalov]

Hello Itai,

You can handle the dragEnd event of the Kendo UI Diagram (or other event of your choice, as required by the specific scenario), and call the widget's toBack() method, passing it the Diagram's connections, e.g.:

function onDragEnd(e) {
  e.sender.toBack(e.sender.connections);
}

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[Alan]

The 'toBack()' mechanism works but is very very expensive. I've got a situation where I have a JSON object obtained from the server's database that I want to render. The problem is that a simple .load() of the object results in a diagram that has the connections on top of the shapes. The load() operation takes milliseconds but adding a quick loop that does 'toBack' on all the lines in the diagram (approx 25 lines) makes the process take seconds.

Is this really the only way to get the lines behind the shapes?

 

[Dimiter Topalov]

Hello Alan,

You can use the toFront() method, passing it the Shapes instead. In general this should be faster, especially if the number of Shapes is much smaller than the number of connections.

Regards,
Dimiter Topalov
Telerik by Progress

[Lakhataria]

Hello,
can u just give information about shape and connections

[Georgi Denchev]

Hello, Lakhataria,

Could you let me know what information are you looking for?

You can check the Shapes section of the documentation as well as the Shapes API and Connections API for the different available options.

[Lakhataria]

I want to add tooltip in connectors and want to change connection shape like bazier that its

[Georgi Denchev]

Hello, Lakhataria,

You can add a tooltip to the content of the connections as mentioned in this answer:

https://www.telerik.com/forums/tooltip-for-connections#4813381 

Additionally you can position the content(the green circle) over the connection and make it invisible so it would appear as if the tooltip is a part of it.

Here is an example in dojo:

https://dojo.telerik.com/@gdenchev/ohAfIYOf 

There is currently no option to change the shape of the connection, however you can open a request for it in our feedback portal.