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

raddiagram spacing

9 Answers 11 Views
Diagram, DiagramRibbonBar, DiagramToolBox
This is a migrated thread and some comments may be shown as answers.
Moe
Top achievements
Rank 1
Veteran
Moe asked on 24 Aug 2020, 10:14 AM

Hi Admin,

 

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

9 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 25 Aug 2020, 04:38 AM

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

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
Moe
Top achievements
Rank 1
Veteran
answered on 25 Aug 2020, 05:33 AM

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

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 25 Aug 2020, 12:01 PM
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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Moe
Top achievements
Rank 1
Veteran
answered on 26 Aug 2020, 02:08 AM

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 26 Aug 2020, 06:56 AM

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

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
Moe
Top achievements
Rank 1
Veteran
answered on 27 Aug 2020, 01:31 AM

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 Aug 2020, 09:42 AM
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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Moe
Top achievements
Rank 1
Veteran
answered on 28 Aug 2020, 03:04 AM

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 28 Aug 2020, 10:11 AM

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

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/.

Tags
Diagram, DiagramRibbonBar, DiagramToolBox
Asked by
Moe
Top achievements
Rank 1
Veteran
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Moe
Top achievements
Rank 1
Veteran
Share this question
or