Figure 1 - Paging in a TreeView in Silverlight
Introduction
One of the unfortunate limitations of the TreeView and RadTreeView (Telerik) in Silverlight is that if you add a few hundred items to a tree node, the expand and collapse of the node become severely sluggish. One way around this painful symptom is to put paging inside your tree node. Here is how to do it:
Creating the Data Templates
When using MVVM (Model View ViewModel), its best to use DataTemplates to resolve the data in the ViewModel. The TreeView uses something called a HierarchicalDataTemplate to represent the data template at each node level of the tree.The HierarchicalDataTemplate is the same as a data template except it allows you to specify the source and data template of the child nodes. Below are the two HierarchicalDataTemplates for the node structure you see in Figure 1.
Listing 1 - HierarchicalDataTemplates for the Customer - Order Tree Structure
|
<UserControl.Resources>
<Controls:HierarchicalDataTemplate x:Key="OrdersTemplate" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="Order #" />
<TextBlock Text="{Binding OrderNumber}" />
</StackPanel>
</Controls:HierarchicalDataTemplate>
<Controls:HierarchicalDataTemplate x:Key="CustomersTemplate" ItemsSource="{Binding PagedOrders}" ItemTemplate="{StaticResource OrdersTemplate}">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" FontWeight="Bold" />
<Controls1:DataPager PageSize="10" Source="{Binding PagedOrders}" />
</StackPanel>
</Controls:HierarchicalDataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadTreeView ItemsSource="{Binding Customers}" ItemTemplate="{StaticResource CustomersTemplate}"
/>
</Grid>
|
Note that inside the the top level data template (CustomersTemplate), we have a DataPager control. This control will be used in conjunction with the model's order data to page through the list ten orders at a time.
The View Model
In order for the data to be paged, there is another step. The orders have to be placed inside of a PagedCollectionView. Let's take a look at the Customer ViewModel which contains a colleciton of orders.
Listing 2 - The Customer ViewModel
|
using System.Collections.ObjectModel;
using System.Windows.Data;
namespace RadTreeViewPaging.ViewModels
{
public class Customer
{
public string Name { get; set; }
public PagedCollectionView PagedOrders { get; set; }
public ObservableCollection<Order> Orders { get; set; }
public Customer(string name)
{
Name = name;
Orders = new ObservableCollection<Order>();
PagedOrders = new PagedCollectionView(Orders);
}
}
} |
Notice that inside the Customer ViewModel, we have two properties containing order information. The Orders property is our collection of all the orders. This is the collection in which we add new orders coming into our view. The PagedOrders is a wrapper around the Orders that handles paging inside the DataPager. In other words, the PagedCollectionView and the DataPager work together to handle paging seamlessly. Simply by wrapping the Orders inside this PagedCollectionView and binding the PagedCollectionView to both the DataPager and the Customer HierarchicalDataTemplate, we get paging behavior in the Customer tree node for all orders.
Conclusion
When you push the limits of third party GUI components, you some times have to come up with clever ways to optimize them for use. The first question you should always ask yourself when optimizing the UI is, "What snapshot of the information do I really need to render on the screen for the user at any given moment?" A user of your UI can only see and digest a finite amount of information on the screen, even if the data behind it is astronomical. Paging is one filtering technique for organizing the data so you only present the user a few pieces of information at a time. It is not always the optimal technique; the technique used is very domain dependent. Anyway, I think we are all on the same page now, so keep this technique in mind the next time you are displaying large data sets in a TreeView using Silverlight and C#.