[Solved] Node text wrapping

[Matthew Erwin]

When text needs to wrap within a tree view it is leaving empty space next to the node image and putting the text on the next line...e.g.

[img] Parent Node
      [img] Child Node
      [img] Child Node
      [img]
      Child Node with very long text that woul
      cause wrapping.

This doesn't present very well and is the result of placing the TreeView within any container that constrains the width of the tree (e.g. Div with overflow:auto).

This could be resolved if Telerik would put the <span> tag inside the <div> tag that contains the image instead of outside it...here is the code you generate today:

<div class="rtBot" style="border: 0px none black;">


   <div class="rtAux">
      <img class="rtImg" 

src="/mx/images/minicons/folder_images.gif" alt=""/>

</div>

<span class="rtIn">Child Node with very long 

text that would cause wrapping.</span>

</div>

Here is the code that would act properly:

<div class="rtBot" style="border: 0px none black;">
<div class="rtAux">

      <img class="rtImg" 

src="/mx/images/minicons/folder_images.gif" alt=""/>

      <span class="rtIn">Child Node with very long text 

that would cause wrapping.</span>
</div>
</div>

.rtImg and rtIn are both defined with float: left so the resulting presentation would be:

[img] Parent Node

      [img] Child Node

      [img] Child Node

      [img] Child Node with very long text that would

            cause wrapping.

...which at least in my opinion is more aesthetically pleasing and is the generally expected behavior of a tree view when wrapping is required.

Thanks for your time and consideration of the matter.

[Dimitar Milushev]

Hi Matthew Erwin,

Have you tested this scenario with the recently released service pack of the Prometheus suite? The Treeview html was changed slightly and better text wrapping was one of the reasons for the changes.

Kind regards,
Dimitar Milushev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Matthew Erwin]

Works perfectly with the latest minus 15px of padding that the new CSS is adding...I was able to eliminate that with the following added inline:

.radtreeview .rtUL .rtUL
{padding-left:0px !important; }

Thanks for the update!

[Michael Dunbar]

Sorry if I am being thick here, but how do you make the text wrap in the new version of the tree? Is there a proprty on the tree I am missing or do you have to do something specific with the HTML/CSS?

Thanks,

Michael

[Nikolay]

Hi Michael Dunbar,

The text of the TreeNodes can be easily wrapped when needed. For example, if the value applied to the RadTreeView's Width property is smaller than the width of the nodes.

You can apply style="white-space:normal" directly to the node or the entire treeview.

If you apply style="white-space:normal" to the whole treeview, each node's text will be wrapped when its width exceeds the width of the treeview.

Example:

Colorized Example Code  

<telerik:RadTreeView
    ID="RadTreeView1"
    runat="server"
    LoadingStatusPosition="BeforeNodeText"
    Width="200px">
   <Nodes>
       <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="Root RadTreeNode1 Root RadTreeNode1" style="white-space:normal">
       </telerik:RadTreeNode>
       <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="Root RadTreeNode2">
       </telerik:RadTreeNode>
       <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="Root RadTreeNode3">
       </telerik:RadTreeNode>
   </Nodes>
   <CollapseAnimation Duration="100" Type="OutQuint" />
   <ExpandAnimation Duration="100" Type="OutQuart" />
</telerik:RadTreeView>

Language Filtered SectionASP.NET

Greetings,
Nick
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Dunbar]

That's great thanks.