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

2 posts, 0 answers
  1. Malky
    Malky avatar
    1 posts
    Member since:
    Oct 2011

    Posted 21 Jun 2012 Link to this post

    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.
  2.
  3. Petar Mladenov
    Admin
    Petar Mladenov avatar
    3162 posts

    Posted 26 Jun 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top