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

TreeView Q3.2012: New Bug with IE 9 -> Node selection

25 Answers 250 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Roman
Top achievements
Rank 1
Roman asked on 20 Nov 2012, 08:29 PM
A new bug has been introduced with the TreeView Q3.2012 release. This bug is only visible in IE 9 (maybe also IE 8).With other browsers it works fine.

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

Sort by
0
Petrobras Colombia Limited
Top achievements
Rank 1
answered on 06 Dec 2012, 08:18 PM
That's right I'm using IE8 and the bug is present.

We are still waiting for answer.
0
Atanas Korchev
Telerik team
answered on 07 Dec 2012, 07:54 AM
Hello,

 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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Simeon
Top achievements
Rank 1
answered on 20 Dec 2012, 02:07 PM
I also seem to have this issue but in IE10.  It should be noted that your example page works even when I added multiple nodes.  My page however fails but I am using the Mvc wrappers to create my tree view with a JSON response.

I have prepared a sample and posted a support ticket.
0
BigzampanoXXl
Top achievements
Rank 1
answered on 20 Dec 2012, 03:09 PM
The problem with the TreeView really seems to be when using the MVC wrappers (because binding the kendo treeview in javascript seems to work fine). This is how I binded the treeview with the MVC wrapper which leads to the scrolling problem:
@(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 :)

0
Simeon
Top achievements
Rank 1
answered on 20 Dec 2012, 08:43 PM
Cheers for the response man, I might have a go at trying to do it that way instead of the way the example works if Telerik don't get back to me before I need to go live.  Really it should work the way the example shows it but obviously "features" creep in...
0
BigzampanoXXl
Top achievements
Rank 1
answered on 21 Dec 2012, 07:32 AM
@Simeon: I have to disappoint you. The code I posted is not a workaround. It is just a sample for the Kendo UI team to reproduce and hopefully fix it soon.
0
Dimo
Telerik team
answered on 25 Dec 2012, 10:34 AM
Hello,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rene
Top achievements
Rank 1
answered on 04 Jan 2013, 01:05 AM
I have the same problem with the Grid (using the latest version).  When I use popup edit mode - and the popup is taller than the client area - scrolling down to click anything on the popup forces the screen back to the top.

0
Dimo
Telerik team
answered on 04 Jan 2013, 09:24 AM
Hello Rene,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rene
Top achievements
Rank 1
answered on 04 Jan 2013, 01:52 PM
Thanks Dimo.

0
Rene
Top achievements
Rank 1
answered on 04 Jan 2013, 02:36 PM
I just updated to the latest internal build (from Telerik menu in VS 2010).  All went well for the update to my project.

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({});});

0
Dimo
Telerik team
answered on 04 Jan 2013, 03:07 PM
Hi Rene,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Asset Insight
Top achievements
Rank 1
answered on 27 Jan 2013, 08:09 PM
I am still seeing this issue with the latest (2012.3.1315 and 2012.3.1323) of the TreeView. In fact, you can go to the demo page to reproduce this: http://demos.kendoui.com/web/treeview/api.html. If one was to 'append via API' a large number of nested nodes to the existing tree so that the full tree extends beyond the length of the browser, then scrolls down beyond sight of the top-most node to either a) click on a node, or b) expand a node, IE9 scrolls the entire browser to the top of the tree view. The item you clicked on or expanded is now effectively out of view. The same problem exists in a div with vertical scrolling as well. Test the same functionality on Chrome and everything works the way you would expect.

0
Dimo
Telerik team
answered on 28 Jan 2013, 09:39 AM
Hello Marc,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Asset Insight
Top achievements
Rank 1
answered on 28 Jan 2013, 10:09 AM
Thanks Dimo. For others who have the same issue, using the following css worked for us:

@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.
0
Calvin
Top achievements
Rank 2
answered on 13 Mar 2013, 10:57 PM
I am seeing this bug in IE 10 on my Windows 7 desktop.  I have TreeView that has 85 top-level nodes.  It is contained in a collapsible, scrollable splitter pane.  The page's layout is as follows:

$("#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.
0
BigzampanoXXl
Top achievements
Rank 1
answered on 14 Mar 2013, 07:27 AM
@Kendo-Team: Will this bug be fixed in the upcoming Q1 2013 Release? I really hope so.
0
Calvin
Top achievements
Rank 2
answered on 14 Mar 2013, 11:46 PM
This issue went away when I placed the treeview widget into another splitter in order to add a fixed header row above it.  See my previous post for the old layout.  Here is the new layout:
<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.
0
Alex Gyoshev
Telerik team
answered on 15 Mar 2013, 08:14 AM
Hello all,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
BigzampanoXXl
Top achievements
Rank 1
answered on 15 Mar 2013, 08:16 AM
Great news, Alex!

Thanks a lot for fixing this bug. Now it is finally time for me to upgrade to the upcoming Q1 2013 release :)
0
Franz
Top achievements
Rank 1
answered on 27 Mar 2013, 01:20 PM
Hello Telerik Team,

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
0
Alex Gyoshev
Telerik team
answered on 27 Mar 2013, 03:08 PM
Hello Franz,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex Gyoshev
Telerik team
answered on 02 Apr 2013, 08:35 AM
Hello Franz,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anthony
Top achievements
Rank 1
answered on 06 May 2013, 12:06 PM
Hi Alex,

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
0
Alex Gyoshev
Telerik team
answered on 06 May 2013, 12:30 PM
Hello Anthony,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Roman
Top achievements
Rank 1
Answers by
Petrobras Colombia Limited
Top achievements
Rank 1
Atanas Korchev
Telerik team
Simeon
Top achievements
Rank 1
BigzampanoXXl
Top achievements
Rank 1
Dimo
Telerik team
Rene
Top achievements
Rank 1
Asset Insight
Top achievements
Rank 1
Calvin
Top achievements
Rank 2
Alex Gyoshev
Telerik team
Franz
Top achievements
Rank 1
Anthony
Top achievements
Rank 1
Share this question
or