This is a migrated thread and some comments may be shown as answers.

Styling RadTreeViewItem differently using a DataTemplateSelector

2 Answers 47 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
tsmithtn
Top achievements
Rank 1
tsmithtn asked on 10 Nov 2011, 07:16 PM

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?


2 Answers, 1 is accepted

Sort by
0
tsmithtn
Top achievements
Rank 1
answered on 10 Nov 2011, 07:55 PM

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
0
Petar Mladenov
Telerik team
answered on 15 Nov 2011, 12:34 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
TreeView
Asked by
tsmithtn
Top achievements
Rank 1
Answers by
tsmithtn
Top achievements
Rank 1
Petar Mladenov
Telerik team
Share this question
or