Load Nodes on Demand

2 posts, 1 answers
  1. David
    David avatar
    1 posts
    Member since:
    Feb 2008

    Posted 30 Nov 2012 Link to this post

    Do you have any examples of loading nodes on demand with the Diagram OrgChart example?  What I would like to do is only show the first level on initial load of the XML data source and be able to expand nodes to show their children.  Thanks.
  2. Answer
    Petar Mladenov
    Petar Mladenov avatar
    2991 posts

    Posted 05 Dec 2012 Link to this post

    Hello David,

     Currently we do not have a proper example demonstrating LoadOnDemand with RadDaigram.
    However, we have modified our OrgChart example a bit a and we are attaching it for you. Please keep in mind that our OrgChart sample is not designed to be a real LoadOnDemand app so we hope this is just a good starting point, not a complete solution. The example shows only how to load the data we need when we expand a node. Data Validation, remove nodes on collapsing and so on are not completed.

    Basically, you can have an event handler / method which fires on expansion of a node and Load the data you need. In our OrgChart sample this is ToggleChildrenVisibility event handler:

    private void ToggleChildrenVisibility(Node node, bool areChildrenVisible)
        this.ShouldLayoutAfterExpandCollapse = true;
        if (!areChildrenVisible)
            var stream = Application.GetResourceStream(new Uri("XmlSource/Organization.xml", UriKind.RelativeOrAbsolute));
            XElement dataXml = XElement.Load(stream.Stream);
            //XContainer element = dataXml.Elements("Node").Where(n => n.Attribute("Email").Value == node.Email).FirstOrDefault();
            XContainer element = FindXMLNodeByPath(dataXml, node.Path.Split(new char[]{'|'}));
            if (element == null) return;
            node.Children.AddRange(this.GetSubNodes(element, node));
            foreach(var child in node.Children)
                this.GraphSource.AddLink(new Link(node, (Node)child));                 
            node.AreChildrenCollapsed = false;
            areChildrenVisible = true;
    The FindXMLNodeByPath receives a path to an item and returns the right XContainer from our XML:
    private XContainer FindXMLNodeByPath(XElement dataXML, string[] pathLevelParts)
                IEnumerable<XElement> currNodes = dataXML.Elements("Node");
                XContainer currElement = null;
                foreach (var item in pathLevelParts)
                    currElement = currNodes.Where(n => n.Attribute("FirstName").Value +" " + n.Attribute("LastName").Value == item).FirstOrDefault();
                    currNodes = currElement.Elements("Node");
                return currElement;
    Once again, this is just a modification of our OrgChart sample. In a real-world scenario the idea can be shortened in the following steps:
    1) Load some root notes initially.
    2) Catch an event when expand button is fired.
            3) Find the child data from your source (XML, DB, not already loaded ViewModels).
    4) Add the children ViewModels to the collection ViewModel of the Expanded item.

    Hope this helps you proceed. If not, you can let us know more from your specific application requirements.
    This way we would be better able to advice you and/or create a more-isolated sample.

    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top