Load Nodes on Demand

[David]

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.

[Petar Mladenov]

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.AddNode((Node)child);
            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.

Regards,
Petar Mladenov
the Telerik team

[Konstantin]

Hello!

I tried to insert this code in WPF Diagram OrgChart example from xaml-sdk examples.
Unfortunately, when I expand the Node, routing is corrupted.
But when I click Refresh button, all routings drawn correctly.

How to avoid corrupted routings?

Thanks.

[Petar Mladenov]

Hello Konstantin,

From the provided snapshots I am not completely sure whether the layout (position of shapes) or the routing (connections middle/control points positions) is the problematic behavior.
If you mean Layout, there could be several reasons for unwanted:
- calling diagram.Layout() function will use Sugiyama layout but you might need Tree Layout. Please check out the help article for better explanation of the difference.
        - calling tree layout with wrong roots might lead to unexpected results. You need to ensure the proper root shapes of the trees are set in the roots collection of TreeLayourSettings.
If roots are set too early, RadDiagramShapes might not be generated already, so might need a call in Dispatcher.BeginInvoke()

Can you send us the modifications you have made the Diagram SDK demo, or send us a runnable isolated sample ? This way we will better able to help you if the suggestions above are not the root cause of the strange behavior. Thank you in advance for your cooperation.

Regards,
Petar Mladenov
Progress Telerik

[Konstantin]

Petar, thank you for answer.

I send link to project:

https://yadi.sk/d/pliXwBHujd-Haw

[Petar Mladenov]

Hi Konstantin,

When you press expand button, XML file is read and GraphSource of the Diagram is populated with viewmodels. This invokes WPF container generation mechanism to prepare containers (RadDiagramShapes and RadDiagramConnections) for the models. When LayoutOrgChart is invoked in OnViewModelChildrenExpandedOrCollapsed method, shapes are positioned in (0, 0) of the Diagram but they still do not have size (they are not measured). Here is a output from the 3rd shape after expand:

this.diagram.Shapes[2].ActualBounds
{0,0,0,0}
    Bottom: 0
    BottomLeft: {0,0}
    BottomRight: {0,0}
    Height: 0
    IsEmpty: false
    Left: 0
    Location: {0,0}
    Right: 0
    Size: {0,0}
    Top: 0
    TopLeft: {0,0}
    TopRight: {0,0}
    Width: 0
    X: 0
    Y: 0

However, Layout of the diagram needs correct positions and sizes, so to make it work, you can dispatch its invocation later in time:

private void OnViewModelChildrenExpandedOrCollapsed(object sender, EventArgs e)
        {
            if (this.viewModel.ShouldLayoutAfterExpandCollapse == true)
            {
                this.InvokeDispatchedLayout(false);

               // this.LayoutOrgChart(false);
            }
            this.navigationPane.RefreshThumbnail();
        }

Regards,
Petar Mladenov
Progress Telerik

[Konstantin]

Thank you very much, Petar! It's working