How to place RadTreeView inside RadDropDownButton.DropDownContent and implement IDataErrorInfo validation on the RadDropDownButton.Content

Thread is closed for posting
10 posts, 0 answers
  1. DF56C013-23EB-4AFD-827A-FA3B1B5D207F
    DF56C013-23EB-4AFD-827A-FA3B1B5D207F avatar
    78 posts
    Member since:
    Sep 2009

    Posted 14 Oct 2011 Link to this post

    Hi,

    I have seen your examples where you have tree view inside a combobox. But the TreeItem being bound is actually a flat structure. I want to be able to achieve the same with a heirarchical structure, something like this

    public class HeirarchicalTreeNode : INotifyPropertyChanged
        {
            private bool _isSelected;
      
            public HeirarchicalTreeNode()
            {
                Children = new List<HeirarchicalTreeNode>();
            }
      
            public int Id { get; set; }
            public string Name { get; set; }
            public IList<HeirarchicalTreeNode> Children { get; set; }
            public bool IsSelected
            {
                get { return _isSelected; }
                set
                {
                    _isSelected = value;
                    PropertyChanged (this, new PropertyChangedEventArgs("IsSelected"));
                }
            }
            public event PropertyChangedEventHandler PropertyChanged;
      
            public bool Equals(HeirarchicalTreeNode other)
            {
                if (ReferenceEquals(null, other)) return false;
                if (ReferenceEquals(this, other)) return true;
                return other.Id == Id;
            }
      
            public override bool Equals(object obj)
            {
                if (ReferenceEquals(null, obj)) return false;
                if (ReferenceEquals(this, obj)) return true;
                if (obj.GetType() != typeof (HeirarchicalTreeNode)) return false;
                return Equals((HeirarchicalTreeNode) obj);
            }
      
            public override int GetHashCode()
            {
                return Id;
            }
        }

    I have done this in the attached sample. But when I select a leaf node the 1st time I get an exception. Also I want to configure it in such a way that I allow selection of leaf nodes only.

    Thanks.
  2. 133D9D74-CC5A-433C-912F-39565BC2ADB4
    133D9D74-CC5A-433C-912F-39565BC2ADB4 avatar
    2252 posts
    Member since:
    Oct 2016

    Posted 14 Oct 2011 Link to this post

    Hi Ganesh,

    I would strongly recommend using this approach, where you could configure the treeview the way you need:
    http://blogs.telerik.com/valerihristov/posts/10-05-12/treeview_in_combobox_with_radcontrols_for_silverlight_or_wpf_final_take.aspx

    Kind regards,
    Valeri Hristov
    the Telerik team

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

  3. DF56C013-23EB-4AFD-827A-FA3B1B5D207F
    DF56C013-23EB-4AFD-827A-FA3B1B5D207F avatar
    78 posts
    Member since:
    Sep 2009

    Posted 16 Oct 2011 Link to this post

    Thanks Valeri. This works perfectly.

    Just one more thing here. I need to enable selection of leaf nodes only in the treeview. Do I need to create a attached property for this or is there a better way to do this?

    Cheers!
  4. DF56C013-23EB-4AFD-827A-FA3B1B5D207F
    DF56C013-23EB-4AFD-827A-FA3B1B5D207F avatar
    78 posts
    Member since:
    Sep 2009

    Posted 17 Oct 2011 Link to this post

    Actually there is a problem. In your example you have defined the dataitems in xaml as staticresource. Assume it is coming from a viewmodel. Also there needs be a SelectedItem binding on the treeview to a DataItem in the view model.

    So viewmodel has

    public DataItemCollection TreeNodes
            {
                get { return _treeNodes; }
                set
                {
                    _treeNodes = value;
                    OnP("TreeNodes");
                }
            }
      
     public DataItem SelectedNode
            {
                get { return _node; }
                set
                {
                    if (value == null) return;
                    _node = value;
                    OnP("Node");
                }
            }

    TreeNodes is source for Tree and SelectedNode is SelectedItem for tree with twoway binding. All works fine until you set the SelectedNode in the viewmodel (simulating a scenario where this coming from backend and is set on load). Now the dropdown button fails. The problem is the treeview is not rendered till the time the popup is opened. So this scenario of setting the selecteditem from viewmodel does not seem to work, which is a very important case for any LOB application. Also need to be able to select only lowest level nodes.

    Attaching the modified app to reproduce the issue.
  5. DF56C013-23EB-4AFD-827A-FA3B1B5D207F
    DF56C013-23EB-4AFD-827A-FA3B1B5D207F avatar
    78 posts
    Member since:
    Sep 2009

    Posted 17 Oct 2011 Link to this post

    Hi Valeri,

    I sorted this out. But is there anyway to show a validation error around the RadDropDownButton if Content is null?

    Cheers!
  6. F3AB3C60-4750-4EDF-8787-A16DCB04B7A1
    F3AB3C60-4750-4EDF-8787-A16DCB04B7A1 avatar
    3299 posts
    Member since:
    May 2017

    Posted 17 Oct 2011 Link to this post

    Hello Ganesh,

    The RadDropDownButton has no built-in validation mechanism. This is why you'll need to implement custom logic and custom validation. For example you can edit the ControlTemplate of the RadDropDownButton and add validation states and validation control elements in it. Then you'll need to control the state of the RadDropDownButton based on your validation requirements.

    I attached a sample project demonstrating this approach. Give it a try and let me know if it helps or if I can further assist you.

    Kind regards,
    Tina Stancheva
    the Telerik team

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

  7. DF56C013-23EB-4AFD-827A-FA3B1B5D207F
    DF56C013-23EB-4AFD-827A-FA3B1B5D207F avatar
    78 posts
    Member since:
    Sep 2009

    Posted 18 Oct 2011 Link to this post

    Hi Tina,

    The sample is fine but it does not work with IDataErrorInfo. I have tweaked it a bit so that it works with IDataErrorInfo as well. Attaching the same so that it can be useful for someone else.

    Cheers!
  8. F3AB3C60-4750-4EDF-8787-A16DCB04B7A1
    F3AB3C60-4750-4EDF-8787-A16DCB04B7A1 avatar
    3299 posts
    Member since:
    May 2017

    Posted 18 Oct 2011 Link to this post

    Hello Ganesh,

    Thank you for getting back to us. I opened the solution you sent but it doesn't seem to work with IDataErrorInfo. And since I am sure that the community will greatly appreciate a sample using the interface
    IDataErrorInfo, I wanted to ask you to please reattach the solution you prepared if possible.

    Thank you again.

    Greetings,
    Tina Stancheva
    the Telerik team

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

  9. DF56C013-23EB-4AFD-827A-FA3B1B5D207F
    DF56C013-23EB-4AFD-827A-FA3B1B5D207F avatar
    78 posts
    Member since:
    Sep 2009

    Posted 18 Oct 2011 Link to this post

    Not sure what happened! Resending it.

    Cheers!
  10. F3AB3C60-4750-4EDF-8787-A16DCB04B7A1
    F3AB3C60-4750-4EDF-8787-A16DCB04B7A1 avatar
    3299 posts
    Member since:
    May 2017

    Posted 18 Oct 2011 Link to this post

    Hi Ganesh,

    Thank you. I changed this thread to a CodeLibrary so that our community can benefit from your sample. I also modified the title of the thread.

    I also updated your Telerik account accordingly.

    All the best,
    Tina Stancheva
    the Telerik team

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

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.