RadTreeview to RadDiagram

[George C.]

Greetings,

Is it possible to populate a RadDiagram with a RadTreeView node's collection?

I tried saving an xml copy of my RadTreeView's nodes using SaveXml(), and then load it in a RadDiagram using RadDiagram1.DiagramElement.Load(), but it didn't work and I guess because xml structures of these two are poles a part!

[Dess | Tech Support Engineer, Principal]

Hello, George,

RadTreeView and RadDiagram are semantically different controls and their save/load layout functionalities are not expected to be compatible. Hence, when you save the layout of one RadTreeView to xml, you can load it to another RadTreeView control as it has identical internal elements structure. But you can't load the treeview layout to RadDiagram.   

The possible solution that I can suggest is to use the already stored treeview xml and load it to a dummy RadTreeView. Then, you can traverse the Nodes collection recursively and add the RadDiagramShapes programmatically:
https://docs.telerik.com/devtools/winforms/controls/diagram/populating-with-data 
 
I hope this information helps. 

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

[George C.]

OK then.

Surly if there isn't an easy XML solution to that, the only way would be iterating through a RadTreeView nodes collection in order to populate a RadDiagram.

But what is your suggestion on arranging the shapes (their positions) in a RadDiagram, corresponding to the hierarchy and structure of the nodes in RadTreeView? My main goal is to represent a RadTreeView nodes in form of a RadDiagram shapes and connections, in a logical visual manner.

 

[George C.]

At the moment, I'm thinking of this solution :

ForEach n In RadTreeView1.Nodes

        Dim shape1 AsNew RadDiagramShape() With {
        .Text = n.Text,
        .ElementShape = New RoundRectShape(4),
        .BackColor = Color.LimeGreen
    }
            shape1.Position = New Telerik.Windows.Diagrams.Core.Point(n.Index * 100, 100)
            shape1.Padding = New Padding(20, 20, 20, 20)
            RadDiagram1.Items.Add(shape1)

Next
 
  

For Each n In RadTreeView1.Nodes

            For x As Integer = 0 To n.Nodes.Count - 1
            Dim shape2 As New RadDiagramShape() With {
            .Text = n.Nodes(x).Text,
            .ElementShape = New RoundRectShape(50),
            .BackColor = Color.DarkRed
        }
                shape2.Position = New Telerik.Windows.Diagrams.Core.Point(n.Nodes(x).Index * 100, 300)
                shape2.Padding = New Padding(20, 20, 20, 20)
                RadDiagram1.Items.Add(shape2)
            Next
Next

 

[Dess | Tech Support Engineer, Principal]

Hi, George,

The RadDiagramShape.Position property allows you to define the X,Y coordinates of the shapes. Thus, considering the RadTreeNode.Level, you can adjust the Y coordinate of the diagram shape and place the root nodes as top most located shapes and the nested nodes - as below located. 
However, the exact implementation of this custom requirement is up to the developer.

You can refer to our Demo application >> Diagram >> Organization Chart example which may be suitable for your scenario. The demo application is usually located in the installation folder of the suite:
C:\Program Files (x86)\Progress\Telerik UI for WinForms R2 2021\Examples\QuickStart\Bin
 
I hope this information helps.

[George C.]

I tired using "RadTreeNode.Level" this time and below is my code.

       For Each n In RadTreeView1.Nodes

            Dim shape1 As New RadDiagramShape()
            Dim shape2 As New RadDiagramShape()
            shape1.Text = n.Text
            shape1.ElementShape = New RoundRectShape(4)
            shape1.BackColor = Color.Orange
            shape1.Position = New Point(n.Index * 10, shape1.TreeLevel)
            RadDiagram1.Items.Add(shape1)


            For x As Integer = 0 To n.Nodes.Count - 1

                shape2.Text = n.Nodes(x).Text
                shape2.ElementShape = New RoundRectShape(50)
                shape2.BackColor = Color.DarkRed
                RadDiagram1.Items.Add(shape2)

                Dim connection2 As New RadDiagramConnection() With {.Name = n.Nodes(x).Text}
                connection2.Source = shape1
                connection2.Target = shape2
                RadDiagram1.Items.Add(connection2)


            Next




        Next




        Dim settings As New Telerik.Windows.Diagrams.Core.TreeLayoutSettings() With {
     .TreeLayoutType = Telerik.Windows.Diagrams.Core.TreeLayoutType.TreeDown,
     .VerticalDistance = 20
 }
        settings.Roots.Add(Me.RadDiagram1.Shapes(0))
        Me.RadDiagram1.SetLayout(Telerik.Windows.Diagrams.Core.LayoutType.Tree, settings)

I used "TreeLayoutType.TreeDown" to make the layout look like an organizational diagram.

The problem is that I have no idea how to iterate through all the sub nodes of a node which is also a sub node itself in the entire RadTreeView. I attached a pic that illustrates the issue. As you can see, my code doesn't cover nodes 5 and 6. Surely if there are other sub nodes to the nodes 5 or 6, they won't be covered either. Note that there might be any number of sub nodes in an entire RadTreeView, so I need to code it in such a way that all the nodes get covered.  I appreciate your help to get me to a solution

 

 

 

[Dess | Tech Support Engineer, Principal]

Hello, George,

You need to traverse the RadTreeView.Nodes collection recursively. You can refer to the following forum post which is quite useful on this topic:
https://www.telerik.com/forums/how-to-get-access-all-nodes-in-a-treeview 

I believe that it would fit your needs.