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

Diagram tree layout for large amounts of children nodes

4 Answers 13 Views
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 12 Jun 2019, 07:36 PM

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?

 

4 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 14 Jun 2019, 12:54 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Michael
Top achievements
Rank 1
answered on 17 Jun 2019, 02:54 PM

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!

0
Alex Hajigeorgieva
Telerik team
answered on 19 Jun 2019, 12:27 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Michael
Top achievements
Rank 1
answered on 19 Jun 2019, 01:26 PM

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

Asked by
Michael
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Michael
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or