This is a migrated thread and some comments may be shown as answers.

Automatic horizontal scrolling problem

4 Answers 296 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 17 Jan 2013, 07:20 PM
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

4 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 21 Jan 2013, 12:42 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ryan
Top achievements
Rank 1
answered on 21 Jan 2013, 01:39 PM
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?
0
Alex Gyoshev
Telerik team
answered on 22 Jan 2013, 08:45 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ryan
Top achievements
Rank 1
answered on 22 Jan 2013, 12:31 PM
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.
Tags
TreeView
Asked by
Ryan
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Ryan
Top achievements
Rank 1
Share this question
or