In the RadDiagram how do I get auto-layouted items to align horizontally instead of vertically?

1 Answer 21 Views
Top achievements
Rank 1
Lukas asked on 15 Jun 2022, 01:45 PM

I have a RadDiagram to which I bind a IGraphSource that contains some Items and Links. I'm just following the examples from Telerik documentation for everything, I have a default RadDiagram defined in my XAML and I set up some custom styles for the Shape and Connection.

Even if i make sure the ConnectorPositions are set up to connect to the Right and Left of the shapes, I can not figure out how to have items automatically align horizontally instead of vertically.

Here is how they align by default:


Here is how I want them to (automatically) align - left to right, horizontally:

How can I achieve a horizontal layout like this with dynamic data binding?



1 Answer, 1 is accepted

Sort by
Dilyan Traykov
Telerik team
answered on 20 Jun 2022, 09:00 AM

Hello Lukas,

Thank you for the provided image.

I believe you can use the TreeLayout feature of the RadDiagram control to achieve the expected result. For the purpose, you need to set the TreeLayoutType property of the TreeLayoutSettings to TreeRight:

            var settings = new TreeLayoutSettings
                TreeLayoutType = TreeLayoutType.TreeRight
            var layout = new TreeLayout();
            layout.Layout(this.diagram, settings);

You can have a look at the Layout demo from our SDK Samples Browser to test different configurations of the layout. For your convenience, I've attached the source code of the demo to my reply.

Please let me know if you find this helpful.

Dilyan Traykov
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

Asked by
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Share this question