How to only let the child nodes can be checked

11 posts, 1 answers
  1. Michael Zhang
    Michael Zhang avatar
    1 posts
    Member since:
    Nov 2009

    Posted 27 Nov 2009 Link to this post

    As we know, The treeview control enables check boxes for all nodes. Is it possible to show the check boxes for sepecific nodes? For example, I want to use a treeview control to list all files in Drive C with forders, only the file node has a check box, but the root and folder nodes do not have checkboxes shown.

    Thank you very much.
  2. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 30 Nov 2009 Link to this post

    Hi Michael Zhang,

    Yes - it is possible. Please check the code below:

    <telerikNavigation:RadTreeView IsOptionElementsEnabled="True" ItemsOptionListType="None" >
        <telerikNavigation:RadTreeViewItem Header="Item0">
            <telerikNavigation:RadTreeViewItem Header="Item1.1"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.2"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.3"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.4"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.5"/>
        </telerikNavigation:RadTreeViewItem>
        <telerikNavigation:RadTreeViewItem Header="Item1" ItemsOptionListType="CheckList" >
            <telerikNavigation:RadTreeViewItem Header="Item1.1"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.2"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.3"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.4"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.5"/>
        </telerikNavigation:RadTreeViewItem>
        <telerikNavigation:RadTreeViewItem Header="Item2">
            <telerikNavigation:RadTreeViewItem Header="Item1.1"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.2"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.3"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.4"/>
            <telerikNavigation:RadTreeViewItem Header="Item1.5"/>
        </telerikNavigation:RadTreeViewItem>
    </telerikNavigation:RadTreeView>

    Please check this help article for more info:
    http://www.telerik.com/help/silverlight/radtreeview-features-checkbox-and-lines-support.html

    Sincerely yours,
    Valentin.Stoychev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Donald Hylton
    Donald Hylton avatar
    4 posts
    Member since:
    Jun 2009

    Posted 18 Mar 2010 Link to this post

    How would I do this if I am using HierarchicalDataTemplates that are different for each level of a tree of a know depth.
  5. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 24 Mar 2010 Link to this post

    Hello Donald Hylton,

    The best way to display the CheckBoxes next to certain items is to use Style Binding and bind the OptionType property of the RadTreeViewItem to a property from the business model.

    I prepared an example demonstrating how to accomplish this. Please take a look at it and let me know if it works for you or if you need more info.

    Kind regards,
    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.
  6. Donald Hylton
    Donald Hylton avatar
    4 posts
    Member since:
    Jun 2009

    Posted 25 Mar 2010 Link to this post

    I used your example as a guide and was able to get the proper child nodes to have checkboxes.

    Thanks
  7. Aaron
    Aaron avatar
    6 posts
    Member since:
    Nov 2008

    Posted 14 May 2010 Link to this post

    Hello Tina,

    The bold, italicized line throw a XAML parser exception. I'm using Silverlight 3.0, and I'm curious to know if this feature of Style level attribute binding like this is only available in Silverlight 4.

    <Style x:Key="SavedQueryItemContainerStyle" TargetType="telerikNavigation:RadTreeViewItem"
                    <Setter Property="HorizontalContentAlignment" Value="Left"/> 
                    <Setter Property="VerticalContentAlignment" Value="Center"/> 
                    <Setter Property="BorderThickness" Value="1"/> 
                    <Setter Property="Padding" Value="1 0 5 0"/> 
                    <Setter Property="IsDropAllowed" Value="False"/> 
                    <Setter Property="OptionType" Value="{Binding HasQuery, Mode=TwoWay, Converter={StaticResource CheckBoxOptionTypeConverter}}" /> 
                    <Setter Property="IsEnabled" Value="True"/> 
                    <Setter Property="MinHeight" Value="24"/> 
                    <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}"/> 
                    <Setter Property="ItemsPanel"
                        <Setter.Value> 
                            <ItemsPanelTemplate> 
                                <Telerik_Windows_Controls_TreeView:TreeViewPanel VerticalAlignment="Bottom"/> 
                            </ItemsPanelTemplate> 
                        </Setter.Value> 
                    </Setter> 
                </Style> 

    I'm having the same problem as Donald Hylton, where I have two HierarchicalDataTemplates and different ItemContainerStyle resources that specify the OptionType explicitly, however the List still seems to disobey these rules. I'm data binding to a collection of objects at run-time.

    Is there any more documentation out there about what exactly IsOptionElementsEnabled does to the RadTreeView and it's RadTreeViewItems, and how the RadTreeViewItem can be affected by setting any of the following properties, when IsOptionElementsEnabled is set to true?

    IsCheckBoxEnabled
    OptionType
    IsChecked

    I had another issue: When I do not set IsOptionElementsEnabled to anything on the RadTreeView, but attempt to use a BindingCollection to turn on / off the visibility of the CheckBox in the ItemContainerStyle of one of the RadTreeViewItems, the  RadTreeView will render the check boxes however after checking them I can't un-check them. It's as though they're rendered in a corrupted state.

    Any ideas where I might be going wrong? Its likely that I don't fully grasp what each of these properties does, and underwhich scenarios they should be used.

    Remember, I must use HierarchicalDataTemplates and have a property on my business object that tells me whether or not the RadTreeViewItem should show a checkbox or not.

    Thanks,
    - Aaron

  8. Aaron
    Aaron avatar
    6 posts
    Member since:
    Nov 2008

    Posted 14 May 2010 Link to this post

    Hello Tina,

    As a follow up I've included a working project below so you can observe perhaps the problem I'm having. My question now, is why does the ItemContainerStyle that is set at the RadTreeView level, not overridden by the ItemContainerStyle set in the CategoryDataTemplate? The CategoryDataTemplate can set an ItemContainerStyle for all of its children, but for some reason it doesn't appear to obey. Either that or I'm using these properties and Templates incorrectly. Can you tell me what I'm doing wrong?

    <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> 
             
            <!-- Root Level DataTemplate --> 
            <telerik:HierarchicalDataTemplate x:Key="CategoryDataTemplate"  
                                                  ItemContainerStyle="{StaticResource SportItemContainerStyle}"
                <StackPanel> 
                    <TextBlock Text="{Binding Name}" Foreground="#FF124FB5" FontFamily="Trebuchet MS" FontWeight="Bold" FontSize="12"/> 
                </StackPanel> 
            </telerik:HierarchicalDataTemplate> 
     
             
     
        </UserControl.Resources> 
         
      <Grid x:Name="LayoutRoot"
     
        <telerikNavigation:RadTreeView Margin="8,8,8,72" BorderBrush="#FF4F4F4F" Background="White"  
                                       IsOptionElementsEnabled="True" 
                                       ItemsOptionListType="CheckList" 
                                       ItemTemplate="{StaticResource CategoryDataTemplate}" 
                                       ItemContainerStyle="{StaticResource CategoryItemContainerStyle}"
            <telerikNavigation:RadTreeViewItem  Header="Sport Categories"
               <telerikNavigation:RadTreeViewItem Header="Football"
                   <telerikNavigation:RadTreeViewItem Header="Futsal" /> 
                   <telerikNavigation:RadTreeViewItem Header="Soccer"/> 
               </telerikNavigation:RadTreeViewItem> 
               <telerikNavigation:RadTreeViewItem Header="Tennis"/> 
               <telerikNavigation:RadTreeViewItem Header="Cycling"/> 
           </telerikNavigation:RadTreeViewItem> 
        </telerikNavigation:RadTreeView> 
     
      </Grid> 
    </UserControl> 
     

    Thanks in advance,
    - Aaron
  9. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 20 May 2010 Link to this post

    Hi Aaron,

    Please accept my apology for the delayed response.

    I am not sure if you still need more info on this, but still let me try to clarify a couple of things just in case.

    Firstly, this line
    <Setter Property="OptionType" Value="{Binding HasQuery, Mode=TwoWay, Converter={StaticResource CheckBoxOptionTypeConverter}}" /> 
    throws a XAML parser exception because there isn't a style binding in Silverlight. This approach will only work in WPF. However, you can accomplish this with ContainerBindings. A telerik’s container binding for Silverlight is the same as a style binding in WPF. Basically it binds a property of the container (RadTreeViewItem in this case) to a property from the business model:
    <telerik:ContainerBindingCollection x:Key="TreeViewItemContainerBindings">
        <telerik:ContainerBinding PropertyName="OptionType" Binding="{Binding isCheckBoxEnabled, Mode=TwoWay, Converter={StaticResource CheckStateConverter}}" />
    </telerik:ContainerBindingCollection>

    You can take a look at the How To Bind hierarchical data and use ContainerBindingCollection article for more information on how to use container bindings.

    As for your other question, I noticed that you are populating the RadTreeView declarative in XAML and this is why the ItemTemplate is not applied. The ItemTemplate property is used to configure the visualization of the data and the appearance of the RadTreeViewItems when binding your RadTreeView to a collection. Therefore in this declaration:
    <telerikNavigation:RadTreeView Margin="8,8,8,72" BorderBrush="#FF4F4F4F" Background="White" 
                IsOptionElementsEnabled="True"
                    ItemsOptionListType="CheckList"
                    ItemTemplate="{StaticResource CategoryDataTemplate}"
                    ItemContainerStyle="{StaticResource CategoryItemContainerStyle}">
        <telerikNavigation:RadTreeViewItem  Header="Sport Categories">
               <telerikNavigation:RadTreeViewItem Header="Football">
                   <telerikNavigation:RadTreeViewItem Header="Futsal" />
                   <telerikNavigation:RadTreeViewItem Header="Soccer"/>
               </telerikNavigation:RadTreeViewItem>
               <telerikNavigation:RadTreeViewItem Header="Tennis"/>
               <telerikNavigation:RadTreeViewItem Header="Cycling"/>
           </telerikNavigation:RadTreeViewItem>
    </telerikNavigation:RadTreeView>
    the ItemTemplate won't apply. Also since the items are populated in XAML, the ItemContainerStyle is not aware of the hierarchy and will apply only to the first level items.

    The ItemsOptionListType property sets the default option type that will be displayed next to the items if no other style is explicitly defined. For more information you can read the How To add check boxes(radio buttons) next to the RadTreeViewItems article.

    I hope this information will be helpful. Please let me know if I can further assist you.

    All the best,
    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.
  10. Scott McEachern
    Scott McEachern avatar
    11 posts
    Member since:
    Feb 2010

    Posted 20 May 2010 Link to this post

    Tina,

    Your response was very helpful. Thank you.

    - Aaron
  11. Wilson Chan
    Wilson Chan avatar
    2 posts
    Member since:
    Apr 2008

    Posted 04 Jun 2010 Link to this post

    Hi,

    I am able to use the checkstateconverter example and show/hide different nodes within the tree.  

    but is there a way to show the textbox, but not allow the user to explicitly check/uncheck it?

    I have a situation where, IsTriStateMode = true, but I don't want a user to be able to select a high level node, but rather, select a lower level node that will make the high level node a "-"

    thanks in advance for your help.

    Wilson


  12. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 10 Jun 2010 Link to this post

    Hello Wilson Chan,

    In this case a possible approach would be to get the child of type CheckBox of the parent nodes that you need to deny being checked. Then you can set for example the IsEnabled property of the CheckBox to false, like so:
    foreach (var dataItem in treeView.ItemsSource)
    {
        RadTreeViewItem treeItem = this.treeView.ContainerFromItemRecursive(dataItem) as RadTreeViewItem;
        var children = treeItem.ChildrenOfType<CheckBox>();
        (children[0] as CheckBox).IsEnabled = false;
    }

    I prepared a sample project illustrating this approach. Give it a try and let me know if it works for you or if you need more info.

    All the best,
    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready