
I would like to know if the below mentioned format can be achieved using the treeview.
-Section1
-Section1.1
-This section is long and need
text wrapping with the indentation
proper.
-this is a small section
+Section1.2
+Section1.3
+Section1.4
+Section2
+Section3
+Section4
Do let me know if my question is not understandable.
Thanks,
Soonam
19 Answers, 1 is accepted

Try applying style="white-space:normal" for treeview in order to wrap the treenode text. Checkout the following link for more information.
Wrap TreeNode's text
-Shinu.

Thank you Shinu for the response.
I have already applied that style, the text wrapping is taking place but the indentation of the wrapped text is not proper. Please see below samples.
Present:
-------------------------------------------------------------
-Section1
-Section1.1
-This section is long and need
text wrapping with the indentation
proper.
-this is a small section
+Section1.2
+Section1.3
+Section1.4
+Section2
+Section3
+Section4
Required:
-------------------------------------------------------------
-Section1
-Section1.1
-This section is long and need
text wrapping with the indentation
proper.
-this is a small section
+Section1.2
+Section1.3
+Section1.4
+Section2
+Section3
+Section4
Thanks,
Soonam
Please add the following css styles to your page:
div.RadTreeView .rtIn {
display
:inline-
block
;
}
Regards,
Yana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

The indentation is now working.
Thanks a lot for the immediate resolution.
-Soonam

My text is appearing under the checkbox if it needs to wrap. If it doesn't wrap, the text is displayed to the right of the checkbox as expected.
Thanks,
You should remove "display: inline-block" style for the "rtIn" elements, in this way the text will be aligned next to the checkboxes, but it will not be indented.
Greetings,
Yana
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.

<telerik:RadTreeView ID="RadTreeViewAnswers" runat="server" CheckBoxes="True" ShowLineImages="False" |
Width="800px" Style="white-space: normal" Visible="true"> |
Any other ideas?
Thanks,
Paul
The treeview looks as expected at our side. Could you please send us a live url or a simple page demonstrating the issue? Thanks
Best wishes,
Yana
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.

Thank you for sending the image.
Have you set width in percentage for the nodes? I cannot reproduce this at our side, that's why I asked for a live url where I could inspect the used css styles.
Greetings,
Yana
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.

The radtreeview control has its width set to 800px.
You can open a support ticket and send the login details there, they will be seen only by us. The other option is to try to isolate the issue in a simple page and send it to us again in a support ticket.
All the best,
Yana
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.

http://humanresearchroadmap.nasa.gov/explore/ I'm also using white-space:normal to allow word-wrapping, but I'd like for the text to be aligned on the left rather than the second and subsequent lines aligning under the image.
I tried:
div.RadTreeView .rtIn {
display
:inline-
block
;
}
but this resulted in the attached screenshot.
Any ideas on how to get the word-wrap to align left when there's an image?
Thanks!
I wasn't able to reproduce the issue in IE7 or IE8. I've attached two screenshots to show that the image and the text are aligned properly.
Regards,
Yana
the Telerik team

I attached two screenshots. In the first one, the top section shows the current alignment and on the bottom section I used a graphics program to show how I'd like the alignment to be.
The second screenshot is from a different page where the user can edit the content using drag and drop. The top section shows the current alignment along with a hover and a selected item. The bottom section shows what I'd like to have. I prefer that alignment and I also like how the hover and selected items look. I got this far using the CSS below. But there are still issues with vertical spacing on expanded nodes, and the position: relative and top: -20px is a bit of a kludge...
If you have a suggestion, great! If not, that's fine and I'll try not to be so picky! :-)
div.RadTreeView .rtImg
{
display
:
table-cell
;
vertical-align
:
top
;
position
:
relative
;
top
:
-20px
;
}
div.RadTreeView .rtIn
{
display
:
table-cell
;
vertical-align
:
top
;
position
:
relative
;
top
:
-26px
;
}
div.RadTreeView .rtLI
{
margin-bottom
:
-26px
;
}
I'm sorry for misunderstanding.
Currently this alignment of the text cannot be easily changed, we're sorry for the inconvenience.
All the best,
Yana
the Telerik team

I finally revisited this topic and found a solution that is working well so far. I added the following styles:
.rtIn
{
display
:
inline-table
;
width
:
500px
;
position
:
relative
;
top
:
-2px
;
*
top
:
2px
;
}
.rtImg
{
vertical-align
:
top
!important
;
position
:
relative
;
top
:
5px
;
}
Attached is the before and after picture. It tested it in IE8, Chrome, and Firefox and it looks good. I also tested it in IE7. In IE7 it looks exactly like the before picture! Which is fine with me! Better than looking a mess! The only thing I needed to adjust for IE7 is a small alignment issue, thus the *top: 2px; rule...
Thanks.

I am not sure if anyone else has had the same issues that I have had. I have 5 img button to the LHS of my Text but I wanted to have the node text wrap to a second line, pretty much the same as Jon but I was happy to have my drag "image" include the img buttons whereas Jon wanted his excluded from the text item. Jon's css gave me a hint in the right direction but I was unable to get this to work in css. Using Chrome and Firebug debugger I could see that my css was kicking in but the styling just refused to work. However, by using inline styling in the <span> markup I was able to get the perfect result for my requirements.
Each time I drag a treenode, I get all 5 of my icons and the text in a nice tidy drag view with the text flowing over as many lines as necessary and perfectly left justified.
<
span
runat
=
"server"
id
=
"NodeText"
class
=
"rtIn"
style
=
"display: inline-block !important; width:650px; white-space:normal; border-color:transparent"
>
</
span
>
it just won't work from a styleseheet !
I hope that helps someone !
jON
Thank you for sharing your solution with the community.
Regards,
Ivan Danchev
Telerik