Diagram tree layout for large amounts of children nodes

[Michael]

I am using the Diagram component in my Vue application to display a network of nodes that best resembles a tree.

The problem is that in certain cases one parent node might have 100+ children nodes on the first level. This displays in a undesired long horizontal line of all the children node similar to diagram-bad.png.

What I would need to be displayed instead is more like diagram-good.png that limits how horizontally the children are displayed.

Note: I don't need exactly whats displayed in diagram-good.png, but just something that doesn't span the children out horizontally so much.

Can anyone help me achieve this?

 

[Tsvetina]

Hi Michael,

You can decrease the horizontal space taken up by the Diagram shapes if you use a different layout sub-type. There are eight sub-types of the "tree" layout and I expect the "tipOver" one will work best for you. You can see it in the example here:
Built-in Layouts

Additionally, you can control the distance between items using the layout configuration options listed in this article: Layout API.

Regards,
Tsvetina
Progress Telerik

[Michael]

Hello Tsvetina,

I have used the tipOver layout (also tried all other types and subtypes) and they dont quite solve my issue. The tipOver layout was definitely the best but it simply just had all nodes vertically. So now we have 100+ child nodes going vertically which doesn't really solve the issue. I have been playing around the connector settings, but it seems to cause a mess of things with a lot of overlapping and confusing node connectors. Do you think it would be feasible to try to create my own layout by manually setting x,y coordinates of the nodes and connectors after they have rendered since none of the preset layouts seem to fit my criteria? Or is there a better way?

Thanks for the help!

[Alex Hajigeorgieva]

Hello, Michael,

The Kendo UI Diagram tipOver layout can be customised by specifying distance between levels by using these properties:

- underneathHorizontalOffset - Defines the horizontal offset from a child with respect to its parent. 
- underneathVerticalSeparation - Defines the vertical separation between siblings and sub-branches.
- underneathVericalTopOffset - Defines the horizontal offset from a child with respect to its parent.

In addition to that you can organize the diagram components:



If however none of these options bring you the desired results, you could switch off the automatic layout and position the shapes with x,y.

$("#diagram").kendoDiagram({
    layout: null,

One way would be to do it programmatically or move the shapes where you want them and use the diagram save() method which will provide you with the coordinates as JSON.

Let us know if we may assist you further.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Michael]

Hello Alex,

 

Thank you for the reply I will look further into these documents.

Setting layout to "null" will definitely be of use if I end up needing to manually do it.

 

Michael