Silverlight TreeView Load on Demand

Today I created a really simple application that demonstrates "best practice" for using RadTreeView with load on demand and ADO.NET Data Service.

The application uses the Northwind database, that can be downloaded here.

The tricky part is that in order to create almost codeless application we need to modify the automatically generated code of the service reference. To do that you will need to show all files in the Silverlight application (click the Show All Files in the Solution Explorer title bar) and then open Reference.cs:

In this file replace all occurrences of "System.Collections.ObjectModel.Collection" with "System.Collections.ObjectModel.ObservableCollection". This probably will be changed in the RTM of Silverlight, but at the moment, there is no way to choose the data type of the collections in the generated code for ADO.NET data service. Note that you will have to repeat the replacement every time you update the service reference!

The rest of the application is really simple: a RadTreeView, bound to a data source object, that has a property Categories; when the LoadOnDemand event of RadTreeView is fired, the selected category asynchronously loads its related products:

private void RadTreeView_LoadOnDemand(object sender, 
    Telerik.Windows.RadRoutedEventArgs e)
{
    RadTreeViewItem item = e.OriginalSource as RadTreeViewItem;

    Category category = item.Item as Category;
    if (category != null)
    {
        NorthwindDataSource.BeginLoadingProducts(category);
    }
    else
    {
        item.IsLoadOnDemandEnabled = false;
    }
}

The hierarchy of the treeview is defined in its item template:

<DataTemplate x:Key="ProductTemplate"> <TextBlock Text="{Binding ProductName}" /> </DataTemplate> <telerik:HierarchicalDataTemplate x:Key="CategoryTemplate" ItemsSource="{Binding Products}" ItemTemplate="{StaticResource ProductTemplate}"> <TextBlock Text="{Binding CategoryName}" /> </telerik:HierarchicalDataTemplate>

Since the first load of the categories is also asynchronous, it takes some time to display the treeview for the first time. I added a simple loading animation, that stops when the treeview is filled with items.

Download the source from here: TreeViewLoadOnDemand