An example of reloading the graphsource and diagram updating correctly

5 posts, 1 answers
  1. Jamie
    Jamie avatar
    3 posts
    Member since:
    May 2015

    Posted 27 Dec 2016 Link to this post

    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

  2. Milena
    Admin
    Milena avatar
    226 posts

    Posted 30 Dec 2016 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Jamie
    Jamie avatar
    3 posts
    Member since:
    May 2015

    Posted 30 Dec 2016 in reply to Milena Link to this post

    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

  4. Answer
    Milena
    Admin
    Milena avatar
    226 posts

    Posted 04 Jan Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. Jamie
    Jamie avatar
    3 posts
    Member since:
    May 2015

    Posted 11 Jan in reply to Milena Link to this post

    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!

Back to Top