An example of reloading the graphsource and diagram updating correctly

[Jamie]

Hi.   I've been working off of the OrgChart example, which is a great example and is exactly what I need.  However, I'm still having issues when updating the graph source and having that layout correctly.   Now, all the nodes get stacked on top of each other.  Can you provide an example of how to get this working?  Take for example, the OrgChart sample app and provide a new demo where you can click a button and have it reload a completely new data set and have that layout correctly in the diagram?

 

Thanks very much

[Milena]

Hello Jamie,

If you take a look at OrgChartExample you will see that in OnOrgChartExampleLoaded we call 
LayoutOrgChart method where we layout the diagram shapes. You can use a similar logic to ensure the nodes don't get stacked when changing the graph source. More information about the diagram layout and its settings you can find in our help article here. 

I hope this information helps.

Regards,
Milena
Telerik by Progress

[Jamie]

Hi. Thanks for the reply.  The refresh doesn't actually reload the data collections themselves.  I attached the org chart sample project with some small modifications I made to illustrate my point.  Look at the LayoutButtonClicked function in OrgChartExample.xaml.cs.  
I'm clearing HierarchicalDataSource and then GraphSource and its InternalItems and InternalLinks and rebuild them with the exact same dataset.  The attached screenshot shows the result of that.  

Modified Org Chart Project
https://drive.google.com/file/d/0B7kwY92z8_56VFNBeXQ4SXpNVWs/view?usp=sharing

I appreciate any help on this.
Thanks

[Milena]

Hello Jamie,

The demo you are using is setup to work only with one graph source. In order to use the diagram in scenario with dynamic change of the graph source you need to do some changes: 
1. Remove xaml binding of graph source (GraphSource="{Binding GraphSource}" ) and set it in code behind (for the OrgChart demo you can set in the end of GetViewModelAndBindForEvents method). This allows you to make dynamic changes of the graph source.
2. Then in LayoutButtonClicked method you need to first clear the graph source and then set it again
3. Also you need to first clear the layout roots in SetLayoutRoots method,  then set it again and lastly layout the diagram: 

private void LayoutButtonClicked(object sender, RoutedEventArgs e)
{
    this.diagram.GraphSource = null;

    this.viewModel.PopulateWithData();
    this.viewModel.PopulateGraphSources();

    this.diagram.GraphSource = this.viewModel.GraphSource;

    this.SetLayoutRoots();
    this.LayoutOrgChart(true);
}

4. You can also change the Layout with LayoutAsync in LayoutOrgChart method to layout the shapes asynchronously: 

private void LayoutOrgChart(bool shouldAutoFit)
{
    ...
    //this.treeLayout.Layout(this.diagram, this.viewModel.ChildTreeLayoutViewModel.CurrentLayoutSettings);
         this.diagram.LayoutAsync(LayoutType.Tree, this.viewModel.ChildTreeLayoutViewModel.CurrentLayoutSettings);
         ...
}

I hope this information will get you started.

Regards,
Milena
Telerik by Progress

[Jamie]

Hi.  This did work!  Thanks very much.  

I have not looked at the diagram control under the hood, so to speak, but I do think it should handle resetting/updating of the itemssource/graphdata purely via the bound collection.  But, at any rate, its a great control and I am now able to reload / reset the data which is what I need.  So thanks again!