[Solved] Wrapping the node text instead of hor. scroll bar?

[Wai Kei]

Hi Telerik,

    Currently we have a telerik window which has a telerik panel bar inside. Inside the panel bar we are displaying a tree view as seen in the screenshot. Since the panel bar has a fixed width we keep seeing the horizontal scrollbar when the nodes are expanded if it becomes too long to display.

    We are wondering if we can tweak the html attributes of the treeview so that it doesn't display the scrollbar, and instead we wrap the text based on the available width within the tab panel.

    We are supporting this effort in many browsers (IE7, 8, latest Chrome, and latest FF).

    Here is the treeview source code:

        Html.Telerik().TreeView()
        .Name("TreeView")
        .ShowCheckBox(true)
        .ExpandAll(Model.Expand)
        .BindTo(Model.PhaseCodeTree, mappings =>
        {
            mappings.For<Aquilent.Cara.Domain.PhaseCodeSelect>(
                binding => binding.ItemDataBound((item, code) =>
                {
                    item.Checked = false;
                    item.Enabled = true;
                    if (code.CodeId == 0)
                    {
                        item.Checkable = false;
                    }
                    item.Text = code.CodeNumberDisplay + " " + code.CodeName;
                    item.Value = code.PhaseCodeId.ToString();
                })
                .Children(code => code.ChildCodes));

            mappings.For<Aquilent.Cara.Domain.PhaseCodeSelect>(binding => binding.ItemDataBound((item, code) => { item.Text = code.CodeName; }));
        })
        .HtmlAttributes(new { style = "height: 220px;overflow: auto;position: relative" })
        .Render();

And the tab panel, per Telerik's suggestion (for another IE7 display issue that was answered), we are using a class called scrollable:

    <% Html.Telerik().PanelBar()
        .Name("CodingBar")
        .ExpandMode(PanelBarExpandMode.Multiple)
        .HighlightPath(false)
        .Items(items =>
        {
                items.Add()
                    .Text("Coding")
                    .HtmlAttributes(new { @class = "scrollable" })
                    .Content(() =>
                    {%>.............................

  Here is the scrollable style:

.scrollable .t-group
{
    overflow: auto;
}

Thanks,

Wai Kei

[Dimo]

Hello Wai Kei,

Yes, you can use a CSS rule:

html  div.t-treeview
{

    white-space: normal;

}

or HtmlAttributes:

Html.Telerik().TreeView().HtmlAttributes(new { style = "white-space:normal" })


Regards,
Dimo
the Telerik team

[Wai Kei]

Hi Telerik,

   Thanks for your reply. Unfortunately, after applying the suggested style, it wraps the text successfully but the node text gets detached from the associated checkbox and thus the tree structure becomes scattered apart. Please see the attached screenshot for the results. If you have a suggestion to make the node text always appearing right next to the checkbox then it would be great.

Thanks and happy holiday,

Wai Kei

[Dimo]

Hi Wai Kei,

I am afraid that the desired layout cannot be achieved - you either have to leave the nodes on a single line, or let the browser split them to multiple lines at its own discretion.

Regards,
Dimo
the Telerik team

[Wai Kei]

Dear Dimo,

    Thanks. Not a problem. We can explore another solution. I was wondering if we could achieve the effect of hovering on the tree node and it will display a "tooltip" type of popup to display the full node name? I see that the OnSelect event on the tree node is fired only when the user clicks on the node. But when you hover on it, the style changes with shadow background. So I wonder if you could tell me what event is controlling such a css change? And could I do something to incorporate the "tooltip" idea?

Thanks for your help,

Wai Kei

[Dimo]

Hello Wai Kei,

In order to have tooltips when hovering TreeView items, you can add a title HTML attribute (via HtmlAttributes) to each item.

Note that HtmlAttributes are not serialized and will not have effect when loading TreeView items with AJAX.

Greetings,
Dimo
the Telerik team