raddiagram spacing

[Moe]

Hi Admin,

 

I would like to know same spacing between each diagram in below pic

[Dess | Tech Support Engineer, Principal]

Hi, Moe,

The provided screenshot illustrates an organisation chart. You can refer to our Demo application >> Diagram >> Organisation chart example which simulates an identical layout achieved by using container shapes. 

Alternatively, RadDiagram offers different layouts. Thus, the shapes are arranged on the diagramming surface. Additional information about the diagram layouts is available in the following help article: https://docs.telerik.com/devtools/winforms/controls/diagram/features/layout 

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Moe]

Hi Dess,

 https://docs.telerik.com/devtools/winforms/controls/diagram/features/layout 

I try these method . I want same distance of each other . I use HorizontalDistance method but the raddiagram distance not change. 

Thanks

Moe

 

[Dess | Tech Support Engineer, Principal]

Hello, Moe,

I am not sure which layout exactly you have tried, however, I have prepared a sample project for your reference. Please refer to the attached gif file illustrating the behavior on my end. 

Is the illustrated behavior applicable for your scenario? If not, could you please give us some more details about the exact behavior that you are trying to achieve. Thus, we would be able to get better understanding of the precise case and think about a suitable solution. Thank you in advance. 

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Moe]

Hi Dess,

I did the setting of diagram layout below it.

            radDiagram1.RouteConnections = False

            Dim treeLayoutSettings1 As New Telerik.Windows.Diagrams.Core.TreeLayoutSettings
            treeLayoutSettings1.AnimateTransitions = True
            treeLayoutSettings1.HorizontalSeparation = 30
            treeLayoutSettings1.VerticalSeparation = 100
            treeLayoutSettings1.TreeLayoutType = Telerik.Windows.Diagrams.Core.TreeLayoutType.TreeDown
            treeLayoutSettings1.Roots.Add(radDiagramShapeMainEntity)
            radDiagram1.SetLayout(Telerik.Windows.Diagrams.Core.LayoutType.Tree, treeLayoutSettings1)

            Dim aStarRouter1 As New Telerik.Windows.Diagrams.Core.AStarRouter(radDiagram1.DiagramElement)
            radDiagram1.RoutingService.Router = aStarRouter1

            radDiagram1.RouteConnections = True

 

I add two pic.

I want design of the diagram in pic(I want design of diagram.png).

Current design is not the same horizontal space when children of diagram.

 

Thanks

Moe

[Dess | Tech Support Engineer, Principal]

Hello, Moe,

I have used the provided code snippet in my sample project and simulated a similar shapes organization. Please refer to the below screenshot illustrating better how the HorizontalSeparation is considered in the algorithm used in the LayoutType.Tree:

If it is not applicable for your scenario, you can adjust the shape's position by specifying the X offset: 

        private void radButton3_Click(object sender, EventArgs e)
        {
            RadDiagramShape shape = this.radDiagram1.Shapes[2] as RadDiagramShape;
            shape.X += 10;
        }

Thus, you can place the shape wherever you want. The attached gif file illustrates the achieved result.

I believe that it would fit your requirement.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Moe]

Hi Dess,

When I add that logic in formload but after form load finish , didn't change still remain. But that logic add in button click, the logic is working,

Thanks

Moe

[Dess | Tech Support Engineer, Principal]

Hello, Moe,

According to the provided information, it is not clear where and how the shapes in RadDiagram are added. However, in my sample project I use the property builder at design time to add the shapes. Then, setting the layout seems to work as expected when it is called in the Load event. Even though I clear the serialized data in the Load event, then load it again and apply the layout, the shapes are re-positioned as expected. 

I have attached my sample project for your reference. In case you are still experiencing any further difficulties, it would be greatly appreciated if you can provide more details how to replicate the undesired behavior locally so I can investigate the precise case. Thank you in advance.  

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Moe]

Hi Dess,

 

I mean below logic.

 

 

 Private Sub RadForm1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        AddNewRadDiagram()

        If RadDiagram1.Shapes.Count > 0 Then

            SetLayout()
            Dim shape As RadDiagramShape = CType(radDiagram1.Shapes(2), RadDiagramShape)
            shape.X += 50
        End If
    End Sub

 

I add shape2 location change in form load function but is not working. If these function add in button click event, is working.

 

Thanks

Moe

[Dess | Tech Support Engineer, Principal]

Hello, Moe,

Indeed, if you adjust the Location of the RadDiagramShape right after setting the layout, it wouldn't produce the desired result. This is because the AnimateTransitions property is enabled and the layout is applied with animation which takes some time.

One possible solution is to set the AnimateTransitions property to false in order to get the layout applied immediately after executing the code and thus changing the shape's Location will take effect. An alternative solution is to leave the AnimateTransitions property enabled and adjust the location with a slight delay: 

       System.Windows.Forms.Timer t = new System.Windows.Forms.Timer();
        private void SetLayout()
        {
            radDiagram1.RouteConnections = false;

            Telerik.Windows.Diagrams.Core.TreeLayoutSettings treeLayoutSettings1 = new Telerik.Windows.Diagrams.Core.TreeLayoutSettings();
            treeLayoutSettings1.AnimateTransitions = true;
            treeLayoutSettings1.HorizontalSeparation = 30;
            treeLayoutSettings1.VerticalSeparation = 100;
            treeLayoutSettings1.TreeLayoutType = Telerik.Windows.Diagrams.Core.TreeLayoutType.TreeDown;
            treeLayoutSettings1.Roots.Add(this.radDiagram1.Shapes[0]);
            radDiagram1.SetLayout(Telerik.Windows.Diagrams.Core.LayoutType.Tree, treeLayoutSettings1);

            Telerik.Windows.Diagrams.Core.AStarRouter aStarRouter1 = new Telerik.Windows.Diagrams.Core.AStarRouter(radDiagram1.DiagramElement);
            radDiagram1.RoutingService.Router = aStarRouter1;

            radDiagram1.RouteConnections = true;
            t.Tick += T_Tick;
            t.Interval = 2000;
            t.Start();
        }

        private void T_Tick(object sender, EventArgs e)
        {
            t.Stop();
            RadDiagramShape shape = this.radDiagram1.Shapes[2] as RadDiagramShape;
            shape.X += 50;
        }

Feel free to use this approach which suits your requirements best.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik