How to Asynchronously Load Data in a View Model?

[Justin]

Hi. I'm trying to asynchronously load data in a ViewModel when the ViewModel is created. Today I am using Catel in my application for MVVM functionality. If the Control is of type Catel.UserControl then an overridden method InitializeAsync is automatically called when the control loads allowing me to async load data.

However, I am migrating this application to use Telerik Docking. For docking to work I need the controls to be of type RadPane or RadDocumentPane. Making this modification breaks Catel's InitializeAsync functionality. So I'm left searching for the best way to asynchronously load data in aTelerik RadPane/RadDocumentPane.

I might have found a working solution, but I wanted to check if there's a better way to do this. The solution I found is to add an interaction trigger that fires an async command on the RadPanes 'Loaded' event. https://newbedev.com/calling-async-method-to-load-data-in-constructor-of-viewmodel-has-a-warning. 

Edit: I should note that I'm using the Telerik DockingPrism7 sample.

Current XAML with Catel:

<catel:UserControl xmlns:catel="http://schemas.catelproject.com">
    <Grid>
        <telerik:RadGridView ItemsSource="{Binding Model}" />
    </Grid>
</catel:UserControl>

 

ViewModel:

public class ObjectViewModel : Catel.MVVM.ViewModelBase
{
    /// <summary>
    /// Create model and get all tenants.
    /// </summary>
    /// <param name="tenantBL"></param>
    /// <param name="security"></param>
    public ObjectViewModel(BL bl) : base()
    {
    }

    /// <summary>
    /// Initialize control. Automatically called if Control is of type Catel.UserControl.
    /// </summary>
    /// <returns>Task</returns>
    protected override async Task InitializeAsync()
    {
        await base.InitializeAsync();

        await LoadDataFromBL();
    }

    /// <summary>
    /// Load all data from the business logic.
    /// </summary>
    /// <returns>Task</returns>
    private async Task LoadDataFromBL()
    {
        await DoSomething();
    }
}

[Dilyan Traykov]

Hi Justin,

Thank you for the provided code snippets.

I'm not very familiar with the Catel platform, however, would it not be possible to use a UserControl as the content of the RadPane/RadDocumentPane and have the same InitializeAsync logic invoked?

Otherwise, I see nothing wrong with executing the async command in the panes' Loaded event. If you find it more convenient, you can use the EventToCommandBehavior helper class to bind the event to the command.

I hope you find this information helpful. Please let me know if any further questions or concerns arise.

Regards,
Dilyan Traykov
Progress Telerik

[Justin]

Dilyan, thanks for the comment. I tried making the control of type catel:UserControl, but L55 at DockingActivePaneSyncBehavior.cs gives me an error since the control is not of type RadPane.

I also tried to put the catel:UserControl in the RadDocumentPane, but that throws an exception when creating the view. XAML for this is below.

<telerik:RadDocumentPane>
    <catel:UserControl></catel:UserControl>
</telerik:RadDocumentPane>

 

would it not be possible to use a UserControl as the content of the RadPane/RadDocumentPane

How do I accomplish this? It's almost as if I need to create a factory where I can pass any type of control and the factory will create a new RadDocumentPane and add it to the dock.

[Dilyan Traykov]

Hi Justin,
My idea was precisely to place the UserControl as the content of the pane as you shared in the code snippet above.
Can you please specify what exception is thrown in this case?
If possible, please share a small sample project which demonstrates your setup and requirement and I will gladly try to suggest a viable solution tailored to your particular scenario.

[Justin]

Thanks for the reply.

I have attached an example. The example is based on the Telerik sample from github: xaml-sdk/Docking/DockingPrism7 at master · telerik/xaml-sdk (github.com)

Changes:

• Added the nuget package for Catel
• Made XAML modification as noted above in `NewControlView`

To load the view click the 'New Control' button. Then the exception occurs.

 

Note: I might have found a way around this using a factory to create RadDocumentPane's. In the case that what I am trying to do is not achievable.

 

Exception:

System.Windows.Markup.XamlParseException: ''The invocation of the constructor on type 'Catel.Windows.Controls.UserControl' that matches the specified binding constraints threw an exception.' Line number '14' and line position '10'.'

Inner Exception:

NotSupportedException: The view model of the view 'UserControl' could not be resolved. Make sure to customize the IViewModelLocator or register the view and view model manually.

 

 

 

[Dilyan Traykov]

Hello Justin,

The reason for this exception is that with the current setup a generic UserControl is defined (which does not have a specific class name) and thus, the ViewModelLocator does not know which viewmodel to use.

What I can suggest is to extract the view which the RadDocumentPane will use in a separate user control, for example, NewUserControlView, and create a separate viewmodel for it - NewUserControlViewModel.

There may be a cleaner approach for achieving this, and you can forward your inquiry to the Catel repository to get alternative suggestions. You may also find this article helpful: Introduction to the nested user controls problem.

Nonetheless, I've attached the modified project using my previous suggestion to prove such a setup is possible. I do hope you find this a good starting point for achieving the desired result.

[Justin]

Dilyan, thanks for digging into this for me. I should be able to take this and run with it to get a working solution.

[Dilyan Traykov]

I'm glad to hear that you found this helpful. Do let me know if I can further assist you with anything else.