Draw connections behind shapes

4 posts, 0 answers
  1. Itai
    Itai avatar
    34 posts
    Member since:
    Feb 2016

    Posted 08 May 2016 Link to this post

    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. 

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    633 posts

    Posted 10 May 2016 Link to this post

    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!
  3. Alan
    Alan avatar
    8 posts
    Member since:
    Aug 2016

    Posted 15 Mar Link to this post

    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?

     

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    633 posts

    Posted 17 Mar Link to this post

    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.
Back to Top