IsVirtualizing Property & HierarchicalDataTemplates

[Aaron]

Hello everyone,

For some reason (and forgive me, I'm new to Telerik's RadTreeView), whenever I set IsVirtualizing=true on a RadTreeView the HierarchicalDataTemplate's for the RadTreeViewItem Property OptionType is ignored. Take the example below.

There is a RadTreeView with some RadTreeViewItems  placed in it at run time. There is an ItemTemplate set, and a ItemContainerStyle set for each of the levels (Sport Category, Sport, Sub Sport). The ItemTemplates are set to a HierarchicalDataTemplate and the rest is fairly obvious. If you set IsVirtualizing=false on the RadTreeView you'll notice that the root note correctly obeys the CategoryItemContainerStyle Property OptionType set to None. Seen here:

<!-- Root Level ItemContainerStyle -->
        <Style x:Key="CategoryItemContainerStyle" TargetType="telerikNavigation:RadTreeViewItem">
            <Setter Property="OptionType" Value="None"/>
            <Setter Property="Foreground" Value="Red" />
        </Style>

The other ItemContainerStyles render properly as well.

Now, set IsVirtualizing=True on the RadTreeView and the OptionType property is ignored. The RadTreeView renders a CheckBox for every RadTreeViewItem The other properties are maintained, however. Why is this happening?

Here is the XAML:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    x:Class="RadTreeViewTests.MainPage"
    d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>

        <!-- Root Level ItemContainerStyle -->
        <Style x:Key="CategoryItemContainerStyle" TargetType="telerikNavigation:RadTreeViewItem">
            <Setter Property="OptionType" Value="None"/>
            <Setter Property="Foreground" Value="Red" />
        </Style>

        <!-- Sport Level ItemContainerStyle -->
        <Style x:Key="SportItemContainerStyle" TargetType="telerikNavigation:RadTreeViewItem">
            <Setter Property="OptionType" Value="OptionList"/>
            <Setter Property="Foreground" Value="Blue" />
        </Style>

        <!-- Sub Sport Level ItemContainerStyle -->
        <Style x:Key="SubSportItemContainerStyle" TargetType="telerikNavigation:RadTreeViewItem">
            <Setter Property="OptionType" Value="CheckList"/>
            <Setter Property="Foreground" Value="Green" />
        </Style>

        <!-- Sport Level DataTemplate -->
        <telerik:HierarchicalDataTemplate x:Key="SportDataTemplate"
                                          ItemsSource="{Binding SubSports}"
                                          ItemContainerStyle="{StaticResource SubSportItemContainerStyle}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                <Button Content="Button" />
            </StackPanel>

        </telerik:HierarchicalDataTemplate>

        <!-- Root Level DataTemplate -->
        <telerik:HierarchicalDataTemplate x:Key="CategoryDataTemplate"
                                          ItemsSource="{Binding Sports}"
                                          ItemTemplate="{StaticResource SportDataTemplate}"
                                          ItemContainerStyle="{StaticResource SportItemContainerStyle}">
            <StackPanel Orientation="Horizontal">
                <Ellipse Height="10" Width="10" Fill="AliceBlue" />
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
            </StackPanel>
        </telerik:HierarchicalDataTemplate>

    </UserControl.Resources>

  <Grid x:Name="LayoutRoot">

    <telerikNavigation:RadTreeView x:Name="radTreeView" Margin="8,8,8,72" BorderBrush="#FF4F4F4F" Background="White"
                                   IsVirtualizing="True"
                                   IsOptionElementsEnabled="True"
                                   ItemTemplate="{StaticResource CategoryDataTemplate}"
                                   ItemContainerStyle="{StaticResource CategoryItemContainerStyle}"
                                   >
        </telerikNavigation:RadTreeView>

  </Grid>
</UserControl>

And here is the code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace RadTreeViewTests
{
    public class SubSport
    {
        public string Name { get; set; }
    }

    public class Sport
    {
        private List<SubSport> _SubSports = new List<SubSport>();

        public string Name { get; set; }
        public List<SubSport> SubSports { get { return _SubSports; } set { _SubSports = value; } }
    }

    public class SportCategory
    {
        private List<Sport> _Sports = new List<Sport>();

        public string Name { get; set; }
        public List<Sport> Sports { get { return _Sports; } set { _Sports = value; } }
    }

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        private void  MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            radTreeView.ItemsSource = BuildItems();
        }

        private List<SportCategory> BuildItems()
        {
            List<SportCategory> sportCategories = new List<SportCategory>();

            SportCategory sc = new SportCategory() { Name = "Sport Categories" };

            // Football
            Sport s = new Sport() { Name = "Football" };

            SubSport ss = new SubSport() { Name = "Futsal" };

            s.SubSports.Add(ss);

            ss = new SubSport() { Name = "Soccer" };

            s.SubSports.Add(ss);

            sc.Sports.Add(s);

            s = new Sport() { Name = "Tennis" };

            sc.Sports.Add(s);

            s = new Sport() { Name = "Cycling" };

            sc.Sports.Add(s);

            sportCategories.Add(sc);

            return sportCategories;
        }
    }
}

I tried attaching the project as a file but the file upload appears to only accept images. The C# and XAML supplied above is should sufficiently allow you to replicate the problem.

Thanks in advance for your time,
- Aaron

[Tina Stancheva]

Hi Aaron,

I will post the answer from your ticket here as well:

We have logged this issue in our PITS where you can keep track of its status.

Greetings,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.