text-overflow:ellipsis doesn't work in RadTreeView

[Brian]

Here's my code:

<radTelerik:RadTreeView ID="t" runat="server" style="width:200px;white-space:normal;overflow: hidden;text-overflow:ellipsis;" EnableEmbeddedScripts="False" Skin="Vista" >

But the radtreeview still has text-overflow: clip; behavior on long texts. Can someone from telerik help me?

Thanks.

[Alex Gyoshev]

Hello Tom,

You can trigger the ellipsis functionality only on the elements that contain text - in the case of RadTreeView, these are the span.rtIn elements. Therefore, the following CSS will work:
    div.RadTreeView .rtIn
    {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
        display: inline-block;
        padding: 3px 3px 2px;
    }
    div.RadTreeView .rtHover .rtIn,
    div.RadTreeView .rtSelected .rtIn
    {
        padding: 2px 2px 1px;
    }

(the paddings are adjusted due to the inline-block display, which is required for the width to work)

The drawback of this approach is that you have to set the width of the items. You can do so on a per-level basis, subtracting the width of the node lines (it's easier than it sounds):

    div.RadTreeView .rtUL .rtIn { width: 200px; }
    div.RadTreeView .rtUL .rtUL .rtIn { width: 180px; }
    div.RadTreeView .rtUL .rtUL .rtUL .rtIn { width: 160px; }

You can find a sample project attached to this post.

All the best,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[iTools]

Using width as 90% seems to work fine too...

    div.RadTreeView .rtIn
    {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90%;
        display: inline-block;
        padding: 3px 3px 2px;
    }
    div.RadTreeView .rtHover .rtIn,
    div.RadTreeView .rtSelected .rtIn
    {
        padding: 2px 2px 1px;
    }