Styling RadTreeViewItem differently using a DataTemplateSelector

3 posts, 0 answers
  1. tsmithtn
    tsmithtn avatar
    8 posts
    Member since:
    May 2007

    Posted 10 Nov 2011 Link to this post

    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. tsmithtn
    tsmithtn avatar
    8 posts
    Member since:
    May 2007

    Posted 10 Nov 2011 Link to this post

    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
  3. DevCraft banner
  4. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 15 Nov 2011 Link to this post

    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 >>

Back to Top