Hi,
I use WebDataTree on my page,
The nodes can contain quite long text.
Tthe width of WebDataTree is limited so the horizontal scroll bar appers. It is fine. (see picture 1)
But if I select the node the scroll moves to the right. (see picture 2)
I want to prevent such behaviour because it is inconvenient for users. (UltraWebTree didn't do that)
How can I prevent such behaviour?
Hello AlexanderZh,
One possible way is to apply CSS class to the node that will reduce the width of the text itself.
Currently the tree does not have integrated ability to wrap the text of the nodes and we are working to provide such functionality.
What you can do in this scenario (since scrolling to the end of text is the default behavior) is to use JavaScript to keep the scroll on the left like this:
function NavigationDetails_SelectionChanged(sender, eventArgs)
{
var tree = sender.get_element();
tree.scrollLeft = 0;
}
Test this approach and let me know what the result on your setup is.
Hi, Alex!Thank you, for your answer.The suggested approach works, but it isn't perfect because the scroll initially jumps to the right and in the momement jumps back. This shaking of the tree looks not very good.You've mentioned about CSS class that can help, could you provide example, please.
I hope "reducing width fo the text" doesn't mean that user will not see some part of the text at all, and will be able to see the whole text of the node by scrolling using mouse.
Thank you.
I was unable to reproduce the “jumping” of the nodes when the long node is selected. When I click on the node it just stays in the same place. I am attaching a sample that shows this behavior.
It is showing also how CSS can be used to wrap the text of a long node. In order to test these uncomment the code in the CSS class.
This approach (CSS) however is not providing very accurate results since it misalign some of the node contents.
Test the sample and inform me if you have further questions.