UI Virtualization

The Telerik items controls used to display big amounts of data (like RadGridView, RadTreeView, etc.) support UI virtualization, which boosts the application's performance and memory footprint immensely. This article describes the basics of this mechanism and gives tips and tricks on how to avoid issues related to the virtualization.

UI virtualization is a technique used to generate visual containers only for the visible part of the control (the viewport). For example, if the data items collection contains 1000 records, but the size of the control allows to show only 20 at once, only 20 containers will be generated. When the viewport changes, the number of generated containers may increase or decrease based on the available size. On scrolling up and down (or left and right, based on the orientation of the control), the same visual container instances are re-used.

It is strongly recommended to avoid setting properties of the containers directly, when UI virtualization is enabled. That is because the containers can be re-used for a different data item, which means that the corresponding setting will be rendered obsolete when the control's viewport is updated, and the container won't be up to date with the settings.

The following example illustrates what should be avoided:

Setting properties of GridViewRow directly (not recommended when virtualization is enabled)

gridViewRowInstance.DetailsVisibility = Visibility.Visible; 
gridViewRowInstance.Background = Brushes.Green; 

Setting properties of RadTreeViewItem directly (not recommended when virtualization is enabled)

radTreeViewItemInstance.Background = Brushes.Green; 
radTreeViewItemInstance.Opacity = 0.5; 

Instead of setting the properties directly, you can use data bindings via the corresponding style properties. The data binding should point to the underlying item model. The following example shows how to do this with the GridViewRow and RadTreeViewItem shown above:

Binding properties of GridViewRow via RowStyle

<telerik:RadGridView.RowStyle> 
    <!-- in case you use NoXaml dlls, you should also set the following attribute to the Style object --> 
    <!-- BasedOn="{StaticResource GridViewRowStyle}" --> 
    <Style TargetType="telerik:GridViewRow"> 
        <Setter Property="DetailsVisibility" Value="{Binding MyDetailsVisibilityProperty}" /> 
        <Setter Property="Background" Value="{Binding MyBackgroundProperty}" /> 
    </Style> 
</telerik:RadGridView.RowStyle> 

Binding properties of RadTreeViewItem via the ItemContainerStyle

<telerik:RadTreeView.ItemContainerStyle> 
    <!-- in case you use NoXaml dlls, you should also set the following attribute to the Style object --> 
    <!-- BasedOn="{StaticResource RadTreeViewItemStyle}" --> 
    <Style TargetType="telerik:RadTreeViewItem">             
        <Setter Property="Background" Value="{Binding MyBackgroundProperty}" /> 
        <Setter Property="Opacity" Value="{Binding MyOpacityProperty}" /> 
    </Style> 
</telerik:RadTreeView.ItemContainerStyle> 

To make changes to the corresponding container, you can update the data-bound properties of its underlying data item.

In order for the UI virtualization to work correctly, the virtualizing panel should be aware of the size of its parent items control. This means that the items control should not be hosted in panels that measure its children with double.PositiveInfinity (as much space as the children need). Examples of such panels include StackPanel and a RowDefinition/ColumnDefinitions of a Grid with its size (Height/Width) set to Auto. Panels that are good for the virtualization are such that measure their children with the available size. For example, a Grid with RowDefinition/ColumnDefinitions which size is set to star-size or to a fixed value, or any other panel that uses the available size.

The infinity measuring panels will disable the UI virtualization unless you set a fixed size to the virtualizing control

<StackPanel>     
    <telerik:RadGridView /> 
</StackPanel> 
 
<Grid> 
    <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
 
    <telerik:RadGridView Grid.Row="0" /> 
</Grid> 
 
<!-- In case the StackPanel or similar panels usage is necessary, you can re-enable the UI virtualization by setting a fixed size to the virtualized control --> 
<!-- Example: <telerik:RadGridView Height="500" /> --> 

Host the virtualized controls in panels that measure its children with the available size in order for the virtualization to work

<Grid> 
    <telerik:RadGridView /> 
</Grid> 
 
<Grid> 
    <Grid.RowDefinitions> 
        <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
 
    <telerik:RadGridView Grid.Row="0" /> 
</Grid> 

The UI virtualization feature is created with a special Panel implementation. In most controls this panel is assined via the ItemsPanel property of the control. Replacing the ItemsPanel setting will disable the virtualization.

See Also

• RadTreeView UI Virtualization
• RadListBox UI Virtualization
• RadGridView UI Virtualization
• RadScheduleView UI Virtualization
• RadTreeListView UI Virtualization
• RadSpreadsheet UI Virtualization
• RadPropertyGrid UI Virtualization
• RadTileView UI Virtualization
• RadDiagram UI Virtualization
• RadBook UI Virtualization
• RadComboBox UI Virtualization