Silverlight RadDiagram slow performance when setting graph layout for big data size

[Malky]

I'm having performance issues when setting the layout of an Organization Chart graph/tree using the Telerik RadDiagram control. The control has its collection gathered from a web service which has already been called before populating the tree. In my case, the collection consists of quite a lot of data which is hierarchical up to four levels. The overall `Shape` class generated for the graph exceeds 200 items. I believe you get the point on how many `Collection` classes are generated too.
   

MyGraphSource graph = new MyGraphSource();
//This class implements IGraphSource
//Starts populating the GraphSource with data
//...<br>
//...<br>
//Ends populating the GraphSource with data
MyRadDiagram.GraphSource = graph;

Without setting the layout, although the data was quite a number, the above code was executed quite fast. But when I tried setting the layout, 

TreeLayoutSettings settings = new TreeLayoutSettings()
{
TreeLayoutType = TreeLayoutType.TipOverTree
};
settings.Roots.Add(MyRadDiagram.Shapes[0]);
MyRadDiagram.Layout(LayoutType.Tree, settings);

The execution took forever. I am thinking of making a function when someone clicks on a node then the node expands. Can you help me on how to implement it? Thank you.

[Petar Mladenov]

Hello Malky,

Thank you for your interest in these feature s first.
I created a sample test project which shows an Organization structure of 3 levels:
Level One: 1 item
Level Two: 10 items
Level Three: 200 items
If we use a Straight connections (the default ConnectionType) the TipOverTree Layout takes less than a second. You can check this out in the first project attached.
If we change the connection type to Polyline, indeed, the Layout takes about 12-13 seconds. But this is expected. When the connections are Polyline, then the Diagram's Routing Service starts a Router which routes every connection with a default algorithm that tries to minimize the crossings of connections. (please check out the default routing section here). But when it comes up to a Tree Layout and Polyline Connections we have defined a special Routers for this purpose. For every one from the following five LayoutType types (TreeDown, TreeUp, TreeLeft, TreeRight, TipOverTree) we have defined five routers. They are controlled internally by the OrgTreeRouter class but you have to start it manually:

private void RadButton_Click(object sender, RoutedEventArgs e)
        {
            this.PrepareShapesForTipOverTreeRouting();
            TreeLayoutSettings settings = new TreeLayoutSettings()
            {
                TreeLayoutType = TreeLayoutType.TipOverTree
            };
            settings.Roots.Add(this.diagram.Shapes[0]);
            OrgTreeRouter router = new OrgTreeRouter()
            {
                TreeLayoutType = TreeLayoutType.TipOverTree,
                ConnectionOuterSpacing = 20,
            };
            this.diagram.RoutingService.Router = router;
            this.diagram.Layout(LayoutType.Tree, settings);
        }

        private void PrepareShapesForTipOverTreeRouting()
        {
            foreach (var item in this.diagram.Shapes)
            {
                var connector = new RadDiagramConnector() { Offset = new Point(0.2, 1) };
                item.Connectors.Add(connector);
            }
        }

With these settings , the layout also takes less than a second.
A quick note here. You can see the PrepareShapesForTipOverTreeRouting method. It sets a custom connector in the bottom left part of the OrgChart Shapes. In Q2 2012 Official Release this is mandatory when using the TipOverTree Layout and TipOverTree Router. In the internal build after the Q this is not mandatory - the diagram will use the Bottom Connector instead.
Please also read our Routing and Layout help articles. Do not hesitate to ask if you need further assistance.


Greetings,
Petar Mladenov
the Telerik team