Edit this page

Customize RadTreeListView

This article will explain why you will benefit from using our RadTreeListView control for visualizing hierarchical data as ordinary hierarchical control. The reason why we suggest the approach is the fact that RadTreeListView is a flat control. This means that it uses only one container to visualize all of its items. What this means for your application is that you can boost the performance of the scrolling and bringing into view functionalities, as well as the virtualization.

Those of you who are already familiar with the visual structure of the RadTreeListView control may say that it is much more than a hierarchical control. They would be right, this control derives from our RadGridView and inherits some of its functionalities along with its column generation algorithms. Of course, you may not need all that information and functionality, this is why the RadTreeListView exposes properties that can be used to customize the control. You can practically hide everything that makes it look like RadGridView. The following style changes the look of the control and styles it like our RadTreeView control.

XAML

<Style TargetType="telerik:RadTreeListView" BasedOn="{StaticResource RadTreeListViewStyle}">
    <Setter Property="VerticalGridLinesBrush" Value="{x:Null}"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
    <Setter Property="IsFilteringAllowed" Value="False"/>
    <Setter Property="CanUserFreezeColumns" Value="False"/>
    <Setter Property="CanUserDeleteRows" Value="False"/>
    <Setter Property="AutoGenerateColumns" Value="False"/>
    <Setter Property="ShowGroupPanel" Value="False"/>
    <Setter Property="ShowColumnHeaders" Value="False"/>
    <Setter Property="AutoExpandGroups" Value="True"/>
    <Setter Property="GridLinesVisibility" Value="None"/>
    <Setter Property="RowHeight" Value="24" />
    <Setter Property="TreeLinesVisibility" Value="Visible"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="{x:Null}"/>
    <Setter Property="IsSynchronizedWithCurrentItem" Value="False" />
 </Style>

NoXaml binaries in combination with implicit styles are used for the example in this article. More on the topic is available here

Now, when you have the initial look, you can proceed with visualizing some data. You need to create a hierarchy of business objects to be visualized by the RadTreeListView. Let’s say that you need to visualize the following structure:

  • League
    • Team
      • Player

The League has a collection of teams. Each Team has a collection of players that is called Players which does not have any further collections.

The RadTreeListView control is designed to use TreeListViewTableDefinition to visualize its items. You can use the TreeListViewTableDefinition.ItemsSource property to recreate the requested hierarchy.

You should keep in mind that the RadTreeListView is designed to work with homogeneous data, meaning that the control expects that the collection holding the children of each level is always named the same. As the structure that we have is rather heterogeneous we need to create a converter to be used in the binding of the ItemsSource. This converter will change the property holding the children of each level of the hierarchy. It will simply return the correct property for each level of the hierarchy. You can use the following sample implementation.

C#

public class ItemsSourceSelector : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      if (value.GetType() == typeof(League))
      {
        return (value as League).Teams;
      }
      else if (value.GetType() == typeof(Team))
      {
        return (value as Team).Players;
      }
        return null;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      throw new NotImplementedException();
    }
}

Figure 1 shows how the control looks once you create some sample data and populate it

Figure 1: RadTreeListView
Rad Tree View How To Customize Rad Tree List View

When the data is populated you can take a look at the section on selection of the control. The RadTreeListView exposes the a the SelectionUnit property. It is of type GridViewSelectionUnit and controls the visual appearance type of the selection in the control. Setting it to Cell mode forces the control to select only the header of the separate items. If you set it to FullRow, the control selects the full row hosting the corresponding item. The following picture Figure 2 shows both selection modes

Figure 2: SelectionUnit
Rad Tree View How To Customize Rad Tree List View Selection Unit

To enhance the hierarchical visualization you can allow the RadTreeListView to visualize lines connecting the items of the same level of hierarchy. This can be done by setting the RadTreeListView.TreeLinesVisibility property. Figure 3 shows the effect of the property Wwhen it is set to Visible the result will be like the following picture.

Figure 3: Visible tree lines
Rad Tree View How To Customize Rad Tree List View Visible Tree Lines

You can download a runnable project of the demonstrated example from our online SDK repository here, after navigating to TreeView/TreeListViewBringItemIntoView.