I am trying to represent a Yes/No decision tree using the Diagram control. When rendered using the TreeDown, OrgChart layout/router, it seems that some nodes are rendered with minimal offset, while others are rendered so that there is no vertical alignment, yet I add the connectors in the same fashion.
See attached for an example. The result is that a significant amount of scrolling is needed to follow the connectors to the nodes.
Is there a way I can indicate that it is ok to draw nodes with vertical overlap (similar to how the "yes" path is drawn in the example), instead of the layout engine leaving room under shapes and causing the diagram to appear abnormally wide?
4 Answers, 1 is accepted
The TreeLayout has a HorizontalSeparation value which you might change in order to achieve more compact view. The layout takes in mind that the trees should never overlap. This said, even if you set your HorizontalSeparation to its minimum, it might not tight enough the tree. You can take a look at our online demo example and play with the separations to get a better idea of how they work. The SDK Layout demo is also e good example where the layout capabilities are demonstrated.
I would also suggest you to try our the TipOverTree layout along with the Horizontal Indents property which in your case will tighten up the tree.
Regards,
Peshito
Telerik
Rank 1
My user requirements specifically call for the top-down and right-facing tree layouts, so the TipOverTree is not an option. Unfortunately, this layout is likely to be seen as a usability problem by my users. I've tried setting the HorizontalSeparation property, but it has no effect in tightening up the layout, even though there appears to be room to draw the tree in a much more compact fashion.
Thoughts on why the layout isn't balanced and compact like in the demos?
Rank 1
I've attached another screenshot with nodes under different shapes to demonstrate the algorithm, and the difficulty for users to follow it as a simple decision tree. It's clear that the algorithm attempts to keep sibling nodes away from vertically being above **the entire width** of the subtree of another sibling. I cannot get horizontal separation to take precedence. There are no hidden or collapsed subtrees, so there is nothing overlapping or potentially overlapping.
The online demos are too simplistic to replicate this scenario.
I was able to reproduce the same behavior like the one shown on the picture using our online demos. The reason for this is because the tree layout logic follows a rule that the bounding rectangles of two children should not overlap with each other. This means that when a node has two children(let say A and B) and one of them has two more children(C and D), the bounding rectangle of the first one(A) will be bigger than the bounding rectangle for B and not only that but it will get bigger if C and D had children as well. Please take a look at the attached picture.
What you could do however as a possible workaround is to attach to diagram's DiagramLayoutComplete event and check whether a child has children and if not to set it's position manually.
There is also a feature request logged in our feedback portal for extending the layout mechanism to allow control over the layouted elements. You can vote for it and track its progress using the link below:
http://feedback.telerik.com/Project/143/Feedback/Details/113795-diagrams-extend-the-layout-mechanism-to-allow-control-over-the-layouted-elements
Regards,
Peshito
Telerik