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

Draw connections behind shapes

3 Answers 78 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Itai
Top achievements
Rank 1
Itai asked on 09 May 2016, 04:29 AM

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. 

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 10 May 2016, 03:26 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alan
Top achievements
Rank 1
answered on 15 Mar 2017, 05:11 PM

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?

 

0
Dimiter Topalov
Telerik team
answered on 17 Mar 2017, 11:48 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Lakhataria
Top achievements
Rank 1
commented on 02 Jun 2021, 09:39 AM

Hello,
can u just give information about shape and connections
Georgi Denchev
Telerik team
commented on 04 Jun 2021, 07:51 AM

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
Top achievements
Rank 1
commented on 04 Jun 2021, 08:05 AM

I want to add tooltip in connectors and want to change connection shape like bazier that its
Georgi Denchev
Telerik team
commented on 08 Jun 2021, 07:51 AM

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.

Tags
Diagram
Asked by
Itai
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Alan
Top achievements
Rank 1
Share this question
or