Treeview tooltips instead of horizontal scroll bar

[erwin]

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

[Jordan]

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.

[erwin]

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

[Jordan]

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.

[erwin]

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
 

[Jordan]

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.

[erwin]

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

[erwin]

Apparently this solution no longer works with Q1 2011 ...

[erwin]

bumped because it says telerik answered but there is no new telerik post in the thread.

[Stefan]

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

[erwin]

Any hints on how to do this with 2011Q1SP1 ?

Regards
Erwin

[Jack]

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

[erwin]

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

[Stefan]

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

[erwin]

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

[Stefan]

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

[kaddy]

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.

[Stefan]

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

[Ken]

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.

[erwin]

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

[Stefan]

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

[Stefan]

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

[erwin]

Thanks Stefan,

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

Regards
Erwin

[Stefan]

Hello Erwin,

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

Regards,
Stefan
the Telerik team