Tabular Layout / Multiple Root Nodes

9 posts, 0 answers
  1. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 11 Feb 2013 Link to this post

    Hi,

    I looking for a kind of tabular layout.
    The idea behind it is that in my data I know Row and Column and I want my diagram to look
    something like in the attached images.

    And I also need Multiple root items like showed on the second image.

    The next thing is that I want to restrict node dragging to the matrix - inclusive position change (like drag drop in a treeview control for an example). But this is "enhanced" - my initial request is to generate the layout from data - just by knowing
    a.) Node Position Row, Column
    b.) Node connected to List of other Nodes

    Is this possible - "out of the box" (or with little effort)?

    Thanks
    Manfred
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 14 Feb 2013 Link to this post

    Hi ManniAT,

    I think our Sugiyama Layout could fit in your scenario. Basically, it arranges the shapes in a Grid-like way.
    You are able to customize it via settings object which has the following properties:

    • HorizontalDistance
    • VerticalDistance
    • ComponentsGridWidth - by changing this width, you can change whether the different components (independent trees) are next to each other or above each other
    • Orientation
    • ShapeMargin
    • TotalMargin
    • Componentsmargin

    Please check out the attached properties where Sugiyama layout is demonstrated. Hope this will help you proceed further.


    Regards,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 15 Feb 2013 Link to this post

    Hi Petar,

    the results look almost like what I was thinking of.
    I'll give it a close look.

    As always - telerik support at it's best :)

    -- Follow up - looked good - but after increasing the horizontal distance it show up like in Erg.png

    For the desired result (that's why I was asking for a "tabular" layout)  Multiroot.png.
    It's some kind of "Swim Lane Diagram".
    By the way with Sugiyama I was not able to produce "straight lines with 90° corners".


    Thank you
    Manfred
  5. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 28 Feb 2013 Link to this post

    Hi,

    no updates on this?
    Is it simply not possible - or is there a least a way to write my own methods to "auto layout" the diagram?

    Manfred
  6. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 05 Mar 2013 Link to this post

    Hi ManniAT,

     There is no "out-of the-box" way to achieve the exact layout like in MultiRoots picture.
     However, why not making your own Layout - you have to create method that sets the Positions of the Shapes. As for the connections, to achieve a 90 degrees corners you have to set RouteConnections of the RadDiagram to True. This will turn on the routing of Polyline RadDiagramConnections. But if you don't like the result, you can create "corner" points of the Connection by adding a Points in its ConnectionPoints collection. This is actually demonstrated in this help article.
    On a side note, this queue we will be working on a Swim Lanes example in our QSF. 

    Greetings,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Hassan
    Hassan avatar
    13 posts
    Member since:
    Jan 2015

    Posted 23 Feb 2015 in reply to Petar Mladenov Link to this post

    Hi Petar,

     what about if the trees are not independent as shown in the attachment?


    Thanks in advance,
  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 24 Feb 2015 Link to this post

    Hello Hassan,

    I am not exactly sure what is your requirement.
    Is it related to this feature request ? If yes, you can vote for it (Like Button) and this way you will increase its development priority.

    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Hassan
    Hassan avatar
    13 posts
    Member since:
    Jan 2015

    Posted 25 Feb 2015 in reply to Petar Mladenov Link to this post

    Hi Petar,

    Actually I want to use the ComponentsGridWidth to make the graph looks some how like a table (attachment: desired.png). This works fine if the graph has some independent parts but my graph (attachment: current.png) does not have such parts.


    Sincerely,
    Hassan

  10. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 27 Feb 2015 Link to this post

    Hi Hassan,

    I am afraid the Diagram cannot layout the shapes in the way shown in the desired picture out of the box.
    You can do one of the following:
    - use custom Layout written from scratch - you use and set the Position properties of the shapes to layout them in a method
    - use existing Sugiyama or TreeLayout method, use DiagramLayout complete method and postion only some of the shapes in its handler
    - layout the shapes with mouse in the way you like it, then save the diagram configuration and load it in future usages of the same application if this is applicable in your solution

    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready