Edit this page

UI Virtualization

The RadTreeView API supports UI Virtualization, which processes only information loaded in the viewable area, which reduces the memory footprint of the application and speeds up the loading time thus enhancing additionally the UI performance.

The standard layout system creates item containers and computes layout for each item associated with a list control. The word "virtualize" refers to a technique by which a subset of user interface (UI) elements are generated from a larger number of data items based on which items are visible on-screen. Generating many UI elements when only a few elements might be on the screen can adversely affect the performance of your application.

The default ItemsPanel for the RadTreeView is TreeViewPanel. The TreeViewPanel derives from VirtualizingPanel. It calculates the number of visible items and works with the ItemContainerGenerator from an ItemsControl (such as TreeView) to create UI elements only for visible items.

The following tutorial shows how to bind to a collection of business objects and virtualize the items displayed in a RadTreeView element using the IsVirtualizing property.

Here is a simple RadTreeView declaration.

<UserControl.Resources>

    <sampleData:RadTreeViewSampleData x:Key="DataSource"/>

    <DataTemplate x:Key="TeamDataTemplate">
        <TextBlock Text="{Binding Name}"/>
    </DataTemplate>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

    <telerik:RadTreeView x:Name="radTreeView">            
        <telerik:RadTreeViewItem Header="League A">

            <telerik:RadTreeViewItem Header="Teams" 
                ItemsSource="{Binding Source={StaticResource DataSource}, Path=VeryLargeDataSource}"
                ItemTemplate="{StaticResource TeamDataTemplate}"/>

        </telerik:RadTreeViewItem>
    </telerik:RadTreeView>

</Grid>

The RadTreeViewItem with Header "Teams" is bound to a collection with 10000 Team objects. By default the IsVirtualizing property is set to False. Which means that when you try to expand the "Teams" node, it will take a few minutes in order the containers to be generated. That will freeze your application.

In this case you need to use the UI Virtualization behavior of the RadTreeView.

Enable UI Virtualization

In order to enable the UI Virtualization behavior, you should set the IsVirtualizing property of the RadTreeView to True. See the example below:

<telerik:RadTreeView x:Name="radTreeView" IsVirtualizing="True">

Now when you try to expand the "Teams" node, then only those elements that might be on the screen will be generated.

When the RadTreeView's IsVirtualizing property is set to False, then all items within an expanded level are created. The performance may not be as bad if there is a deep hierarchy and all items are initially collapsed. Around 200 expanded items may run smooth.

Note that internally the IsVirtualizing property sets the TreeViewPanel.IsVirtualizing attached property. In the previous example setting the IsVirtualizing property can be replaced with the following initialization:

<telerik:RadTreeView x:Name="radTreeView" telerikTreeView:TreeViewPanel.IsVirtualizing="True">

Where the telerikTreeView alias points to the Telerik.Windows.Controls.TreeView namespace in the Telerik.Windows.Controls.Navigation assembly.

Setting the VirtualizationMode

When you want to specify the method the TreeViewPanel uses to manage virtualizing its child items, then you should set the VirtualizationMode property of the TreeViewPanel.

The VirtualizationMode property is a VirtualizationMode enumeration which may accept the following values:

VirtualizationMode.Standard

When you use VirtualizationMode.Standard, then items that are out of view and are not expanded will be virtualized. Additionally, no container caching or reuse is done. This mode is suited for long lists with little jagging and little scrolling/searching. It consumes less memory at expense of CPU. Expanding and scrolling through a heavily indented hierarchy will mean that little items will be virtualized since most of them will be expanded.

<telerik:RadTreeView x:Name="radTreeView" telerikTreeView:TreeViewPanel.IsVirtualizing="True" telerikTreeView:TreeViewPanel.VirtualizationMode="Standard">

VirtualizationMode.Recycling

When you use VirtualizationMode.Recycling, then items that are out of view and are not expanded will be virtualized. Additionally, containers are cached and reused at ItemsControl level. The container cache is cleared after 3 seconds of inactivity. This mode is suited for long lists with little jagging. Scrolling longer lists is very fast. It consumes more memory at expense of CPU. Expanding and scrolling though a heavily indented hierarchy will mean little items will be virtualized since most of them will be expanded.

<telerik:RadTreeView x:Name="radTreeView" telerikTreeView:TreeViewPanel.IsVirtualizing="True" telerikTreeView:TreeViewPanel.VirtualizationMode="Recycling">

VirtualizationMode.Hierarchical

When you use VirtualizationMode.Hierarchical, then items that are out of view will be virtualized. Expanded items are also virtualized. Containers are cached and reused at TreeView level. This mode is suited for indented hierarchies and fully expanded trees. Scrolling may be slower in longer lists (collapsed trees) but faster when the tree is expanded. Expanding and scrolling through a long heavily indented hierarchy should be fast.

<telerik:RadTreeView x:Name="radTreeView" telerikTreeView:TreeViewPanel.IsVirtualizing="True" telerikTreeView:TreeViewPanel.VirtualizationMode="Hierarchical">

By default, a TreeViewPanel creates an item container for each visible item and discards it when it is no longer needed (such as when the item is scrolled out of view). When an ItemsControl contains a many items, the process of creating and discarding item containers can negatively affect performance.

When VirtualizationMode is set to Recycling, the TreeViewPanel reuses item containers instead of creating a new one each time. When TreeViewPanel cannot recycle item containers, it uses the standard mode of virtualization, which is to create and discard item containers for each item. The following list describes the cases when the TreeViewPanel cannot recycle item containers:

  • The ItemsControl contains item containers of different types.
  • You explicitly create the item containers for the ItemsControl.

When the IsVirtualizing is set to True, the ChildDefaultLength property can be set to the expected header size of the TreeViewItems if it will be different than the default MinHeight of 24 for the TreeViewItems.

See Also