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

Moving the sub-diagrams in the diagram(TreeLayout) to another row

7 Answers 35 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Andrei
Top achievements
Rank 1
Andrei asked on 16 Mar 2021, 01:19 PM

Good afternoon.
We have a diagram (Tree Layout). Our diagram consists of separate sub-diagrams with no connection between them. Why does the last item automatically go to the second row (in the attach file, it is highlighted in red)? Could you tell me how this can be avoided? We need all the sub-diagrams to be placed in one line.

 

 

7 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 17 Mar 2021, 09:16 AM

Hello Andrei,

I guess, your sub-diagrams are connected components (there are no single shapes in them). Diagram layouts components in a virtual grid with default width of 1024 pixels, and if there is no enough space, the component is moved to the next row. You can increase this virtual size to double.MaxValue. The name of the property is ComponentsGridWidth in TreeLayoutSettings.

Regards,
Petar Mladenov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Andrei
Top achievements
Rank 1
answered on 17 Mar 2021, 09:27 AM

Hallo Petar,

this is exactly what is needed. You've been very helpful, thank you very much.

Regards, Andrei Silich

0
Andrei
Top achievements
Rank 1
answered on 17 Mar 2021, 10:16 AM

Hello Petar,

One more short question, is it possible to implement the diagram as in the picture?
This is similar to a combination of two chart options(Tree-down and Tree-up).

0
Petar Mladenov
Telerik team
answered on 18 Mar 2021, 08:25 AM

Hi Andrei,

RadDiagram does not provide an API for layout processing over individual independent connected components with different settings (in your picture there are 3 independent components of shapes). However, I can list some helpful methods you can use, if you want to implement such requirement as an application logic:

           -   to get all components you can use the following code:

     Graph<TreeLayoutData, object> g = new Graph<TreeLayoutData, object>(this.diagram);
            var components = g.GetConnectedComponents();
          - in a single method, you can hide all components except the current one you want to layout. You can then layout the diagram with the specific settings and the single left component will be positioned on the top-left corner of your diagram. So this step can be repeated with different settings over different components left visible on the diagram

         - last but maybe the hardest one is to manually shift all independent components (once they are all visible) in a way that they do not overlap each other. Good news is that diagram provides helpful method which can give you the enclosing bounds of a list of shapes:

components.First().GetBoundingRectangle();

extension method:
new List<RadDiagramShape>() { new RadDiagramShape(), new RadDiagramShape()}.GetEnclosingBounds()

Regards,
Petar Mladenov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Andrei
Top achievements
Rank 1
answered on 19 Mar 2021, 02:47 PM

Hello Petar,

Thank you for your answer, I will try to implement your solution.

One more short question,

when I add a new child element to the diagram(see attach file), the diagram automatically optimizes their layout. After the chart is updated, the new element and its parent are automatically moved to the left side. Is it possible to make them stay in their places?

0
Petar Mladenov
Telerik team
answered on 22 Mar 2021, 08:28 AM

Hello Andrei,

I guess the scenario you describe is not exactly when you add a node but when the Layout function is invoked. The default value of the AutoLayout property is False, any chance you use it with True ?

On the specific layout you describe in the picture - yes, the tree layout first sorts the connected components first by decreasing number of their nodes which means subdiagrams with more items will be on the left of subdiagrams with less items. Then the second sort is decreasing by the width of the subdiagrams - wider diagrams are on the left. I am afraid there is no parameter of APi to control this behavior. However, you can submit a feature request in our portal where we will eventually approve it.

Regards,
Petar Mladenov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Andrei
Top achievements
Rank 1
answered on 22 Mar 2021, 09:22 AM
everything is clear, thank you for your help.
Tags
Diagram
Asked by
Andrei
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Andrei
Top achievements
Rank 1
Share this question
or