Automatic horizontal scrolling problem

[Ryan]

The title is slightly misleading now that I've determined the cause of the issue (caused by lack of preventDefault, not a kendoUI focus feature). I can't edit it though.

I've created a fiddle to display the issue I am facing. Visit http://jsfiddle.net/LT9db/embedded/result/ and reproduce by clicking "My Web Site" followed by pressing the right arrow key 5 times.  My view from chrome: http://i.imgur.com/0rduP.png

Due to the length of the tree and the rendering of the splitter it's very hard to tell what is going on. You need to scroll all the way to the bottom in order to see the horizontal scrollbar of the treeview that has been placed inside the left frame. There are a couple of solutions I've come up with so far

1. Wrap the text, as with my-vacation-photo etc (white-space: pre-line, unfortunately IE8+ and I support 7+). Would be nice if this was default styling?
2. Resize the panel's width on expand
3. preventDefault when right arrow key is pressed

This behavior is because preventDefault/return false is not called once "my-vacation-photo..." is the node actively highlighted and the right arrow key is pressed. I'm not entirely sure how to handle this situation yet other than modify the kendoui source or attach my own handler for keypress. 

I'd rather things be cut off on the right than on the left. Thoughts and other solutions are appreciated

[Alex Gyoshev]

Hello Ryan,

You can suppress the keyboard scrolling with the following code:

$("#treeview").parent().bind("keyup keydown keypress", false);

Changing the pane width is more fragile, and will become problematic depending on the treeview contents. Nevertheless, here's how to do it:

var treeview = $("#treeview");
treeview.css({
   "display": "inline-block",
   "overflow": "hidden"
});
function repaint() {
    setTimeout(function() {
      var splitter = $(".bottom-wrap");
      splitter.data("kendoSplitter").size(splitter.find(".k-pane:first"), treeview[0].scrollWidth + "px");
    }, 200);
}
treeview.data("kendoTreeView").bind("expand", repaint);
treeview.data("kendoTreeView").bind("collapse", repaint);

We will consider using pre-line as a default value. Thanks!

All the best,
Alex Gyoshev
the Telerik team

[Ryan]

Hi Alex,

Thank you for the suggestions. It turns out that white-space: normal; was enough to solve the wrapping problem including IE7.

I have another problem in IE7 with my setup that unfortunately I can't reproduce with the jsfiddle I linked. In my setup I load the child nodes via ajax myself through the expand event. Until the action completes a spinner image is the sole child of the parent. But even before any of that happens when I hover an item the arrows collapse and overrun the text.

At first I thought it was a CSS problem so I removed all stylesheets from the page except for kendo.common and kendo.default. No luck though, still broken. Any thoughts?

[Alex Gyoshev]

Hello Ryan,

This issue should be addressed in recent builds. Please update to the service pack release and let us know if the problem persists.

All the best,
Alex Gyoshev
the Telerik team

[Ryan]

This issue is occurring in kendoui.complete.2012.3.1315.commercial. It's not a trivial task to share my source but I'll try to work something up that reproduces it.