Single option across all tree levels

7 posts, 0 answers
  1. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 02 Jul 2012 Link to this post

    Hi

    We have enabled radio buttons...

    IsOptionElementsEnabled="True"
    ItemsOptionListType="OptionList"
     However "out-of-the-box" the radios seem to be grouped per node in the tree. Is there a way to only allow one radio button selected no matter which level in the tree is selected?
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 05 Jul 2012 Link to this post

    Hello Murray,

     Yes, the Radio TreeViewItems are grouped per their parent node. But I believe there is a simple and elegant solution for your scenario here - you can use the PreviewChecked event of the RadTreeView and mark all previously checked items unchecked:

    private void tree_PreviewChecked(object sender, RadRoutedEventArgs e)
        {
            IList checkedItems = this.tree.CheckedItems.ToList();
            foreach (var item in checkedItems)
            {
                (item as RadTreeViewItem).CheckState = ToggleState.Off;
            }
        }
    Then the item you have checked will be the only one checked in the tree.
    You can find this approach realized in the attached sample. Regards,
    Petar Mladenov
    the Telerik team

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

  3. DevCraft banner
  4. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 05 Jul 2012 Link to this post

    Thank you Petar that is almost exactly what I need!

    Is there a way to select the radio button by clicking on the treeitem (as opposed to the small click area of the radio button itself?) I am trying to give a better user experience of a large click area, and lessen the confusion between Option selected and item selected. (see attached)
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 05 Jul 2012 Link to this post

    Hello Murray,

     You can use the PreviewSelectionChanged event like so:

    private void tree_PreviewSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
            {
                if (e.AddedItems.Count != 0)
                {
                    (e.AddedItems[0] as RadTreeViewItem).CheckState = ToggleState.On;
                }
            }
    However if you need to only check when click everywhere in the RadTreeViewItem, just handle this method like so:
    private void tree_PreviewSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
            {
                if (e.AddedItems.Count != 0)
                {
                    (e.AddedItems[0] as RadTreeViewItem).CheckState = ToggleState.On;
                }
                            e.Handled = true;
            }

    Kind regards,
    Petar Mladenov
    the Telerik team

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

  6. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 05 Jul 2012 Link to this post

    Thank you Petar for your elegant solution and quick response! This is the very reason why we went with Telerik, the superb support!! Very much appreciated!! Regards Murray
  7. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 05 Jul 2012 Link to this post

    Hi

    We have a problem when implimenting this using MVVM. We tried using this template
    <telerik:RadTreeView.ItemTemplate>
            <telerik:HierarchicalDataTemplate ItemsSource="{Binding Children, Mode=TwoWay}">
                   <telerik:RadTreeViewItem Header="{Binding Name}" IsChecked="{Binding IsChecked, Mode=TwoWay}" IsEnabled="{Binding IsEnabled, Mode=TwoWay}" Width="{Binding Path=ActualWidth, ElementName=treeWidth}"/>
            </telerik:HierarchicalDataTemplate>                             </telerik:RadTreeView.ItemTemplate>


    if (e.AddedItems.Count != 0)
      
                {
      
                    (e.AddedItems[0] as RadTreeViewItem).CheckState = ToggleState.On;
      
                }

    However in our model e.AddedItems[0] is a type of object of binded hierarchy (not a RadTreeViewItem). Therefore it cannot be cast to a RadTreeViewItem.

    Any ideas?
  8. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 10 Jul 2012 Link to this post

    Hi Murray,

    I would like to advise you to use custom RadioButton in the TreeViewItem data template and bind their Checked state to you view model. I see you are employing MVVM and data binding. The benefit of this approach would be better programmatical control over the RadioButton states via the view model.

    However there is a slight overhead of adding a property indicating the check state. Which you would have for free if using a binding to IsSelected.

    Binding the IsSelected in your view model to IsSelected of the TreeViewItem and binding IsSelected from the view model to the RadioButton IsChecked will handle the case where you have a single checked item and the hit area is the whole item.

    Finally, I'm sending a sample project to demonstrate you the approach.
    Hope this helps. Let me know if the approach does not work for your case or you need more info.

    Greetings,
    Hristo
    the Telerik team

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

Back to Top
DevCraft banner