The problem: When you select a node in the TreeView (and the TreeView has a vertical scroll-bar), the TreeView automatically scrolls to the top. This is a very annoying bug, please fix it soon. Because of this problem I still have to use the Q2 release. I really want to update soon. Thanks!
25 Answers, 1 is accepted
We are still waiting for answer.
We couldn't reproduce this behavior. Here is our test page: http://jsbin.com/upiwox/1/edit
All the best,Atanas Korchev
the Telerik team
I have prepared a sample and posted a support ticket.
@(Html.Kendo().TreeView()
.Name("TreeView")
.Events(events => events
.Select("onSelectTreeView")
.Drop("OnNodeDrop")
.Drag("OnNodeDrag")
.DragStart("OnNodeDragStart")
)
.BindTo(Model, mapping => mapping
.For<
FolderViewModel
>(binding => binding
.Children(c => c.ChildFolderItems)
.ItemDataBound((node, progressItem) =>
{
node.Id = progressItem.TargetViewUrl;
node.ImageUrl = progressItem.IconUrl;
node.Text = progressItem.Name;
if(progressItem.Unread > 0)
{
node.Text = progressItem.Name + " (" + progressItem.Unread + ")";
node.HtmlAttributes.Add("style", "font-weight:bold");
node.HtmlAttributes.Add("class", "node_unread");
}
})
)
)
.ExpandAll(true)
.DragAndDrop(@ViewBag.TreeMode == 0)
)
This is my controller action method where I collect the data for the TreeView:
public ActionResult GetTreeView(int id = 0)
{
ViewBag.TreeMode = id;
string userLogin = WindowsIdentity.GetCurrent().Name;
WFDisplayTree foldersModel = _repository.GetTreeView(userLogin);
List<
FolderViewModel
> foldersViewModel = FolderViewModel.GetFoldersViewModel(foldersModel);
return PartialView("_TreeView", foldersViewModel);
}
I really hope the MVC Kendo UI team can fix that bug soon. Good luck :)
I am pasting relevant information from a support ticket on the same topic:
The problem is related to the TreeView keyboard navigation functionality and the way IE focuses elements and moves them, so that they are completely visible on the screen, or, if this is not possible, their top part is visible on the screen. The problem is not related to the TreeView datasource.
We are currently investigating for the best way to prevent this problem, if such exists (apart from disabling part of the Treeview functionality). As an immediate workaround, I can suggest you to use the approach used in the JsBin example, namely, use a scrollable TreeView, which fits on the screen and si fully visible at all times. I am sorry for any incovenience caused.
Regards,
Dimo
the Telerik team
The described problem with the Window is now fixed, you can use the latest internal build.
On a side note, having a popup Window, which is taller than the browser viewport is not very good in terms of usability. I recommend you to reduce the Window height in accordance with the majority of your users.
All the best,
Dimo
the Telerik team
However, when I build and run my application I get the following:
Microsoft JScript runtime error: Object doesn't support property or method 'kendoMenu'
jQuery(
function(){jQuery("#Menu").kendoMenu({});});
This one should be easy to resolve. Please check two things:
1. Make sure you have only one jQuery instance registered on the page, and it is in the <head>.
2. Make sure the Kendo scripts are registered on the page (the URLs are valid, etc).
In case you need assistance with this, please provide a runnable project.
All the best,
Dimo
the Telerik team
The problem is not trivial to resolve and we are still researching for the best way to do it. Please use the workaround provided earlier, namely, use a scrollable TreeView, which is fully visible at all times (i.e. its wrapper element fits on the screen).
All the best,
Dimo
the Telerik team
@Html.Kendo().TreeView().Name("treeview")
#treeview
{
display: inline-block;
padding: 2px;
overflow-x: hidden;
overflow-y: scroll;
height: 500px;
}
The example on http://demos.kendoui.com/web/treeview/odata-binding.html is a good reference point.
$("#panesVertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, resizable: false, size: "32px", scrollable: false },
{ collapsible: false, resizable: false, scrollable: false },
{ collapsible: false, resizable: false, size: "20px", scrollable: true }
]
});
$("#panesMiddle").kendoSplitter({
panes: [
{ collapsible: true, size: "320px", scrollable: true, collapsed: false }, //TreeView widget here
{ collapsible: true, scrollable: false },
{ collapsible: true, scrollable: true, size: "260px", collapsed: true }
]
});
I don't see this bug in Chrome (standard or Canary) or Firefox. But it does occur in IE 10.
<
div
id
=
"panesOutermost"
class
=
"fullscreen"
>
<
div
id
=
"panesTop"
>
<
span
><
span
id
=
"assemblyCount"
></
span
>matching assemblies</
span
>
<
button
id
=
"refreshCriterions"
class
=
"k-button"
>Refresh Criterions</
button
>
<
button
id
=
"refreshAssemblies"
class
=
"k-button"
>Refresh Assemblies</
button
>
<
button
id
=
"clearCriterions"
class
=
"k-button"
>Clear Criterions</
button
>
<
button
id
=
"testDebug"
class
=
"k-button"
>T-E-S-T</
button
>
<
div
id
=
"selectionMode"
></
div
>
<
span
style
=
"float: right"
>Top Pane: Menus, Status, etc.</
span
>
</
div
>
<
div
id
=
"panesMiddleRow"
>
<
div
id
=
"panesCriterions"
>
<
div
>Criterions</
div
>
<
div
id
=
"treeviewCriterions"
></
div
>
</
div
>
<
div
>
<
div
id
=
"assemblyGridExpanded"
style
=
"height: 100%"
></
div
>
</
div
>
<
div
id
=
"blueprintPane"
class
=
"blueprintBackground"
></
div
>
</
div
>
<
div
id
=
"panesBottom"
>
Bottom Panes
</
div
>
</
div
>
$("#panesOutermost").kendoSplitter({
orientation: "vertical",
panes: [ { collapsible: false, resizable: false, size: "32px", scrollable: false },
{ collapsible: false, resizable: false, scrollable: false },
{ collapsible: false, resizable: false, size: "20px", scrollable: true } ]
});
$("#panesMiddleRow").kendoSplitter({
panes: [ { collapsible: true, size: "320px", scrollable: true, collapsed: false },
{ collapsible: true, scrollable: false },
{ collapsible: true, scrollable: true, size: "260px" , collapsed: true } ]
});
$("#panesCriterions").kendoSplitter({
orientation: "vertical",
panes: [ { collapsible: false, resizable: false, size: "32px", scrollable: false },
{ collapsible: false, resizable: false, scrollable: true } ] //treview is here now
});
I'm not sure why this new layout fixed it.
I am glad to inform you that the issue is fixed in the latest internal builds, and the fix will be included in the upcoming Q1 release.
Regards,Alex Gyoshev
the Telerik team
Thanks a lot for fixing this bug. Now it is finally time for me to upgrade to the upcoming Q1 2013 release :)
looking at the current Demo site: http://demos.kendoui.com/web/treeview/api.html
the problem still exists in IE9.
Steps to reproduce:
1.) Open the above site
2.) Scroll down until the tree node "Item 1" is out of view
3.) Expand "Item 2"
Note how Item 1 is brought into view.
Tested with IE 9.0.8112.16421 on Windows 7 Professional SP1 64bit
Thank you for reporting this. The issue has been logged internally, and we will notify you once it has been fixed.
Greetings,Alex Gyoshev
the Telerik team
I am glad to inform you that the problem has been fixed and the fix will be available in the next internal build.
All the best,Alex Gyoshev
the Telerik team
We also have this issue with the tree jumping to the top everytime you use it in IE. Do you have an idea as to when the issue will be fixed? I know you mention it's been fixed in the internal build, but will you be releasing this? If not, could you please send me an update so that I can try it on our end?
Regards
Jurgen
You can download the latest internal build that contains the bug fix. The relevant code will also be included in the next official release, the Q1 service pack, however there is no fixed date for this release yet.
Kind regards,Alex Gyoshev
the Telerik team