How to only let the child nodes can be checked

[Michael Zhang]

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.

[Valentin.Stoychev]

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.

[Donald Hylton]

How would I do this if I am using HierarchicalDataTemplates that are different for each level of a tree of a know depth.

[Tina Stancheva]

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.

[Donald Hylton]

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

Thanks

[Aaron]

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

[Aaron]

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

[Tina Stancheva]

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.

[Scott McEachern]

Tina,

Your response was very helpful. Thank you.

- Aaron

[Wilson Chan]

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

[Tina Stancheva]

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.