[Solved] Styling RadTreeViewItem differently using a DataTemplateSelector

[tsmithtn]

I am trying to style leaf nodes of a tree differently than other nodes.  Im using load on demand and want to make sure the children nodes do not have Arrows indicating they do have children.  Im attempting to use a data template selector as follows:

<UserControl.Resources>

    <Style TargetType="telerik:RadTreeViewItem" x:Key="NoChildrenStyle">
        <Setter Property="Background" Value="Green" />
        <Setter Property="IsLoadOnDemandEnabled" Value="False" />
    </Style>
    <Style TargetType="telerik:RadTreeViewItem" x:Key="HasChildrenStyle">
        <Setter Property="Background" Value="Pink" />
        <Setter Property="IsLoadOnDemandEnabled" Value="True" />
    </Style>
    <ts:PlantConfigTreeItemTemplateSelector x:Key="ItemTemplateSelector" >
        <ts:PlantConfigTreeItemTemplateSelector.NoChildrenTemplate>
            <telerik:HierarchicalDataTemplate ItemsSource="{Binding Children}" ItemContainerStyle="{StaticResource NoChildrenStyle}" >
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="NO CHILDREN:  " />
                    <TextBlock Text="{Binding DisplayName}" />
                </StackPanel>
            </telerik:HierarchicalDataTemplate>
        </ts:PlantConfigTreeItemTemplateSelector.NoChildrenTemplate>
        <ts:PlantConfigTreeItemTemplateSelector.HasChildrenTemplate>
            <telerik:HierarchicalDataTemplate ItemsSource="{Binding Children}" ItemContainerStyle="{StaticResource HasChildrenStyle}">
                <TextBlock Text="{Binding DisplayName}" />
            </telerik:HierarchicalDataTemplate>
        </ts:PlantConfigTreeItemTemplateSelector.HasChildrenTemplate>
    </ts:PlantConfigTreeItemTemplateSelector>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <telerik:RadTreeView SelectionMode="Extended" ItemTemplateSelector="{StaticResource ItemTemplateSelector}"
            ItemsSource="{Binding ProcessTreeRoot}"
            IsLoadOnDemandEnabled="True" LoadOnDemand="processSelectTree_LoadOnDemand"
            ItemsOptionListType="CheckList" IsOptionElementsEnabled="True" IsExpandOnSingleClickEnabled="True"
            Margin="10" x:Name="processSelectTree" IsTriStateMode="True">

    </telerik:RadTreeView>
</Grid>

To be complete, my data template selector is:

public class PlantConfigTreeItemTemplateSelector : DataTemplateSelector
    {
        private DataTemplate hasChildrenTemplate, noChildrenTemplate;

        public DataTemplate HasChildrenTemplate
        {
            get
            {
                return this.hasChildrenTemplate;
            }
            set
            {
                this.hasChildrenTemplate = value;
            }
        }
        public DataTemplate NoChildrenTemplate
        {
            get
            {
                return this.noChildrenTemplate;
            }
            set
            {
                this.noChildrenTemplate = value;
            }
        }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            if ((item as PlantConfigTreeItem).HasChildren)
                return HasChildrenTemplate;
            else
                return NoChildrenTemplate;
        }
    }

Everything works almost perfect. When I run the code, my child nodes get the correct hierarchical data template  (because NO CHILDREN successfully appears on these nodes  However, the ItemContainerStyle seems to not work. All my nodes in the tree have a PINK background. My leaf nodes are not picking up the ItemContainerStyle of NoChildrenStyle (because they are appearing with a pink background too.

Is this a bug? Am I doing something wrong?

[tsmithtn]

Thanks to this issue: How to combine IsLoadOnDemandEnabled="True" with Hierarchical Templates I solved my issue: I handled the ItemPrepared event as follows:

private void processSelectTree_ItemPrepared(object sender, Telerik.Windows.Controls.RadTreeViewItemPreparedEventArgs e)
{
    RadTreeViewItem item = (RadTreeViewItem)e.PreparedItem;
    item.IsLoadOnDemandEnabled = (item.Item as PlantConfigTreeItem).HasChildren;
}

Of course, however, the styling is still ignored but that was not as important to me as making the leaf nodes not have arrows

[Petar Mladenov]

Hello Tsmithtn,

 Some of the RadTreeViewItem properties in SIlverlight are automatically inherited and the Style cannot override them (your NoChildrenStyle does not override the parent Style with Pink BackGround). Such properties are Foreground, Background. 

All the best,
Petar Mladenov
the Telerik team