Treeview tooltips instead of horizontal scroll bar

24 posts, 1 answers
  1. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 23 Jul 2008 Link to this post

    2008Q1 SP1

    How can I configure the treeview so that - if a node's text is
    too large for the treeview - a tooltip appears on that node (only) instead of
    a horizontal scroll bar.

    Just the way for example Outlook 2007 does it.
    The UI is less cluttered in case there are only a few long names among
    a lot of shorter names.

    If not possible by default is there a way to implement it myself?
    (I don't want tooltips on all nodes, just on those that cannot be fully displayed
    without scroll bars).

    Erwin
  2. Jordan
    Admin
    Jordan avatar
    547 posts

    Posted 25 Jul 2008 Link to this post

    Hello erwin,

    This is custom functionality that you will have to implement, because RadTreeView does not support this out of the box. You could try something like the code below:
     
    public Form1() 
            { 
                InitializeComponent(); 
     
                 
     
                this.radTreeView1.HScrollBar.Visible = false
                this.radTreeView1.HScrollBar.VisibleChanged += new EventHandler(HScrollBar_VisibleChanged); 
     
                foreach (RadTreeNode rootNode in this.radTreeView1.Nodes) 
                { 
                    if (rootNode.Text.Length > 4) 
                    { 
                        rootNode.ToolTipText = rootNode.Text; 
                    } 
                } 
            } 
     
            void HScrollBar_VisibleChanged(object sender, EventArgs e) 
            { 
                this.radTreeView1.HScrollBar.Visible = false
            } 

    Of course if you want to have tooltips for other than the root nodes you will need to traverse the tree view nodes.
    Or you could write a command that sets the tool tip for a node if necessary and execute it on the RadTreeView.

     
    Regards,
    Jordan
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 25 Jul 2008 Link to this post

    not practical, because I would have to measure the length of the displayed
    string plus find out the position within the tree control.
    (The control can be dynamically resized by the User)

    The requirement is very common if you want to mimic the behaviour
    of the current MS Outlook with a Panel Bar that contains TreeViews.
    Displaying the horizontal Scroll Bar if just a few entries are too long
    clutters the UI.

    Regards
    Erwin
  5. Answer
    Jordan
    Admin
    Jordan avatar
    547 posts

    Posted 28 Jul 2008 Link to this post

    Hi Erwin,

    You could try handling the Layout and Scroll events of RadTreeView to update the tooltips like this:
    protected override void OnLoad(EventArgs e) 
            { 
                base.OnLoad(e); 
     
                this.radTreeView1.HScrollBar.Visible = false
                this.radTreeView1.HScrollBar.VisibleChanged += new EventHandler(HScrollBar_VisibleChanged); 
                this.radTreeView1.Layout += new LayoutEventHandler(radTreeView1_Layout); 
                this.radTreeView1.Scroll += new ScrollEventHandler(radTreeView1_Scroll); 
            } 
     
            void radTreeView1_Scroll(object sender, ScrollEventArgs e) 
            { 
                this.UpdateNodeTooltips(); 
            } 
     
            void radTreeView1_Layout(object sender, LayoutEventArgs e) 
            { 
                this.UpdateNodeTooltips();   
            } 
     
            private void UpdateNodeTooltips() 
            { 
                for (int i = 0; i < this.radTreeView1.TreeViewElement.Items.Count; i++) 
                { 
                    TreeNodeUI treeNodeUI = this.radTreeView1.TreeViewElement.Items[i] as TreeNodeUI; 
                    int nodeRight = treeNodeUI.Bounds.Right + this.radTreeView1.Left; 
                    int treeViewRight = this.radTreeView1.Right; 
                    if (this.radTreeView1.VScrollBar.Visible) 
                    { 
                        treeViewRight -= this.radTreeView1.VScrollBar.Width; 
                    } 
                    bool showTooltip = nodeRight > treeViewRight; 
                    RadTreeNode node = treeNodeUI.AssociatedTreeNode; 
                    if (node != null
                    { 
                        node.ToolTipText = (showTooltip) ? node.Text : null
                    } 
                } 
            } 
     
            void HScrollBar_VisibleChanged(object sender, EventArgs e) 
            { 
                this.radTreeView1.HScrollBar.Visible = false
            } 

    Please give it a try and tell us if you have problems with that solution.

    Sincerely yours,
    Jordan
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 28 Jul 2008 Link to this post

    Hi, thanks - I tried it out and it works.

    Made a copy error first which ended up adding tooltips to all visible nodes
    which made scrolling considerably less smooth.
    (If setting the tooltip property causes a lot of overhead - there's maybe
    potential to further optimize if tooltip gets set only if not already set?)

    But works nicely if only one or
    two of the visible nodes overlap the client area of the tree and would
    otherwise cause the horizontal scrollbar to appear.

    Regards
    Erwin
     



  7. Jordan
    Admin
    Jordan avatar
    547 posts

    Posted 29 Jul 2008 Link to this post

    Hi Еrwin,

    Glad to hear that I was helpful.

    When I was thinking about your problem, another, even easier solution came to mind. Instead of handling the Layout and Scroll events you can just handle the ToolTipTextNeeded event like:
    void radTreeView1_ToolTipTextNeeded(object sender, Telerik.WinControls.ToolTipTextNeededEventArgs e) 
            { 
                TreeNodeUI treeNodeUI = sender as TreeNodeUI; 
                if (treeNodeUI == null
                { 
                    return
                } 
     
                int nodeRight = treeNodeUI.Bounds.Right + this.radTreeView1.Left; 
                int treeViewRight = this.radTreeView1.Right; 
                if (this.radTreeView1.VScrollBar.Visible) 
                { 
                    treeViewRight -= this.radTreeView1.VScrollBar.Width; 
                } 
                bool showTooltip = nodeRight > treeViewRight; 
                RadTreeNode node = treeNodeUI.AssociatedTreeNode; 
                if (node != null
                { 
                    node.ToolTipText = (showTooltip) ? node.Text : null
                } 
            } 

    Also with this solution the scrolling should not be impacted.

    Regarding the horizontal scrollbar, I guess you will have to extend the solution a bit with some logic that will determine if it should be visible.

    Do not hesitate to write if you have more problems/questions/suggestions.

    Regards,
    Jordan
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 29 Jul 2008 Link to this post

    Thanks for this elegant Solution, Jordan.
    Works like a charm. I especially like the fact that it does not interfere as
    much with the normal operation as the former solution.

    Regards
    Erwin
  9. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 19 Mar 2011 Link to this post

    Apparently this solution no longer works with Q1 2011 ...
  10. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 22 Mar 2011 Link to this post

    bumped because it says telerik answered but there is no new telerik post in the thread.
  11. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 22 Mar 2011 Link to this post

    Hi erwin,

    Thank you for bringing this into our attention. We will add functionality to hide the scroll bars in the upcoming Service Pack. 

    I have added 500 Telerik points to your account for the feedback.
     
    All the best,
    Stefan
    the Telerik team
  12. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 20 Apr 2011 Link to this post

    Any hints on how to do this with 2011Q1SP1 ?

    Regards
    Erwin
  13. Jack
    Admin
    Jack avatar
    2335 posts

    Posted 22 Apr 2011 Link to this post

    Hello erwin,

    The horizontal scrollbar visibility is controlled automatically by RadTreeView. You can hide it by overriding the default RadTreeViewElement and its MeasureOverride method. Consider the code snippet below:
    public class MyTreeView : RadTreeView
    {
        public override string ThemeClassName
        {
            get { return typeof(RadTreeView).FullName; }
            set {}
        }
     
        protected override RadTreeViewElement CreateTreeViewElement()
        {
            return new MyTreeViewElement();
        }
    }
     
    public class MyTreeViewElement : RadTreeViewElement
    {
        protected override Type ThemeEffectiveType
        {
            get { return typeof(RadTreeViewElement); }
        }
             
        protected override SizeF MeasureOverride(SizeF availableSize)
        {
            SizeF size = base.MeasureOverride(availableSize);
            this.HScrollBar.Visibility = ElementVisibility.Collapsed;
            this.HScrollBar.Value = 0;
            return size;
        }
    }

    In addition, the following code shows allows for customizing the tool-tip text:
    void radTreeView1_ToolTipTextNeeded(object sender, ToolTipTextNeededEventArgs e)
    {
        TreeNodeElement nodeElement = sender as TreeNodeElement;
        if (nodeElement != null)
        {
            if (nodeElement.Data.ActualSize.Width > this.radTreeView1.TreeViewElement.ViewElement.Size.Width)
            {
                e.ToolTipText = nodeElement.Data.Text;
            }
            else
            {
                e.ToolTipText = "";
            }
        }           
    }

    I hope this helps.

    Kind regards,
    Jack
    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
  14. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 25 Apr 2011 Link to this post

    Thanks, Jack.

    The only problem with this solution is, that the tree still scrolls horizontally which is of course a bit strange if there are no scrollbars. Is there a way I can prevent horizontal scrolling?

    Erwin
  15. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 27 Apr 2011 Link to this post

    Hi erwin,

    Thank you for writing back.

    Currently, I can no provide you with a working solution for preventing the auto scrolling mechanism. I have added this into out PITS system and we will address it in a future release.

    Your Telerik points have been updated for this report.
     
    Regards,
    Stefan
    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
  16. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 28 Apr 2011 Link to this post

    Thanks Stefan,

    I think what I would like to achieve is not that uncommon. For example Outlook 2010 has a tree to navigate through mailbox folders. That tree scrolls only vertically but not horizontally. If a mailbox name is too long to show fully, a tooltip appears.

    Regards
    Erwin
  17. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 03 May 2011 Link to this post

    Hello erwin,

    Thank you for writing back.

    I fully agree with you that this is not uncommon and for this reason I have added this into our PITS system. As I mentioned, currently there is no work around that I can provide you with, that will give you the desired behavior. We will add such a functionality in one of the next releases.
     
    All the best,
    Stefan
    the Telerik team
    Q1’11 SP1 of RadControls for WinForms is available for download; also available is the Q2'11 Roadmap for Telerik Windows Forms controls.
  18. kaddy
    kaddy avatar
    1 posts
    Member since:
    Mar 2010

    Posted 17 May 2011 Link to this post

    I was just trying to find a work around to this exact problem myself. 

    Hopefully this is something that can be added to the Q2 update.
  19. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 20 May 2011 Link to this post

    Hi kaddy,

    Thank you for writing.

    As I mentioned in my previous post, currently there is no work around for this. Feel free to follow this link and add your vote for this issue in order to increase its priority.

    Should you have any other questions or suggestions, do not hesitate to contact us.
     
    Regards,
    Stefan
    the Telerik team
    Q1’11 SP1 of RadControls for WinForms is available for download; also available is the Q2'11 Roadmap for Telerik Windows Forms controls.
  20. Ken
    Ken avatar
    2 posts
    Member since:
    Apr 2009

    Posted 13 Sep 2011 Link to this post

    I'm on 2011.2.11.831 and have found by accident (or desparation) that disabling the scroll bar stops it auto scrolling.  I'll now try and hide it using the posts in this thread.

    Hope that helps.

    Sorry false alarm, it does make a difference, but it still sometimes scrolls right when a long node is selected with the mouse.

    Also the calculation to decide if a tip is needed doesn't work as the node width seems to be the available space, not what it wants.
  21. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 14 Sep 2011 Link to this post

    Hi Everybody,

    I still have this issue even though it is marked as "resolved" in PITS.
    Also did not find any updated documentation.

    Regards
    Erwin
  22. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 16 Sep 2011 Link to this post

    Hello guys, 

    Thank you for writing.

    @Ken - you can control the scroll bar visibility by setting the ScrollState property:

    radTreeView1.TreeViewElement.HorizontalScrollState = ScrollState.AlwaysHide;
    radTreeView1.TreeViewElement.VerticalScrollState = ScrollState.AutoHide;

    However, hiding scroll bars will not disable the scrolling functionality.Regarding tool tips, please refer to the following sample, which demonstrates how to achieve the desired functionality:

    private void radTreeView1_NodeExpandedChanged(object sender, RadTreeViewEventArgs e)
    {
        UpdateNodeTooltips(radTreeView1.Nodes);
    }
     
    private void radTreeView1_Layout(object sender, LayoutEventArgs e)
    {
        UpdateNodeTooltips(radTreeView1.Nodes);
    }
     
    private void UpdateNodeTooltips(RadTreeNodeCollection nodesCollection)
    {
        for (int i = 0; i < nodesCollection.Count; i++)
        {
            RadTreeNode node = nodesCollection[i];
     
            int nodeWidth = node.ActualSize.Width;
            int treeViewWidth = this.radTreeView1.Size.Width;
     
            bool showTooltip = nodeWidth > treeViewWidth;
            node.ToolTipText = (showTooltip) ? node.Text : null;
     
            if (node.Nodes.Count > 0)
            {
                UpdateNodeTooltips(node.Nodes);
            }
        }
    }

    @erwin, we added the ability to prevent vertical scrolling in our latest release. This is achievable by overriding TreeViewElement  class and preventing the base logic in EnsureNodeVisibleHorizontal method:

    protected override void EnsureNodeVisibleHorizontal(RadTreeNode node, TreeNodeElement nodeElement)
    {
        //base.EnsureNodeVisibleHorizontal(node, nodeElement);
    }

    However, you are correct, the horizontal scrolling functionality is not working properly in all cases and I changed the issue status to "unresolved". We will improve our API and we will address the issue in one of our upcoming releases.

    Attached you can find a sample project demonstrating the desired functionalities - tooltips, hiding the horizontal scroll bar and preventing the tree from scrolling when longer node is clicked. 

    I hope this helps. Let me know if you have any other questions.

    All the best,
    Stefan
    the Telerik team

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

  23. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 21 Nov 2011 Link to this post

    Hello Erwin,

    I hope that you guys are doing well.

    I am writing to inform you that in Q3 2011, which was released on Wednesday, the auto scroll behavior which you were experiencing is now stopped for most of the cases. However, if you want to completely stop this functionality, you can set the AutoScrollOnClick property of the TreeViewElement to false.

    I hope that you find this information helpful.
     
    All the best,
    Stefan
    the Telerik team

    Q2’11 SP1 of RadControls for WinForms is available for download (see what's new); also available is the Q3'11 Roadmap for Telerik Windows Forms controls.

  24. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 21 Nov 2011 Link to this post

    Thanks Stefan,

    unfortunately I cannot run any test at the moment because of the Nodes.Clear() bug in Q3.

    Regards
    Erwin
  25. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 24 Nov 2011 Link to this post

    Hello Erwin,

    As you probably already know, we will introduce an internal build to address this issue. Stay tuned.

    Regards,
    Stefan
    the Telerik team

    Q3’11 of RadControls for WinForms is available for download (see what's new). Get it today.

Back to Top
UI for WinForms is Visual Studio 2017 Ready