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

26 posts, 0 answers
  1. Roman
    Roman avatar
    3 posts
    Member since:
    Sep 2012

    Posted 20 Nov 2012 Link to this post

    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!
  2. Petrobras Colombia Limited
    Petrobras Colombia Limited avatar
    1 posts
    Member since:
    Nov 2012

    Posted 06 Dec 2012 Link to this post

    That's right I'm using IE8 and the bug is present.

    We are still waiting for answer.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Dec 2012 Link to this post

    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!
  5. Simeon
    Simeon avatar
    23 posts
    Member since:
    Jul 2012

    Posted 20 Dec 2012 Link to this post

    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.
  6. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 20 Dec 2012 Link to this post

    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 :)

  7. Simeon
    Simeon avatar
    23 posts
    Member since:
    Jul 2012

    Posted 20 Dec 2012 Link to this post

    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...
  8. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 21 Dec 2012 Link to this post

    @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.
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 25 Dec 2012 Link to this post

    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!
  10. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 03 Jan 2013 Link to this post

    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.

  11. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 04 Jan 2013 Link to this post

    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!
  12. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 04 Jan 2013 Link to this post

    Thanks Dimo.

  13. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 04 Jan 2013 Link to this post

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

  14. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 04 Jan 2013 Link to this post

    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!
  15. Asset Insight
    Asset Insight avatar
    2 posts
    Member since:
    Nov 2012

    Posted 27 Jan 2013 Link to this post

    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.

  16. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Jan 2013 Link to this post

    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!
  17. Asset Insight
    Asset Insight avatar
    2 posts
    Member since:
    Nov 2012

    Posted 28 Jan 2013 Link to this post

    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.
  18. Calvin
    Calvin avatar
    42 posts
    Member since:
    Jul 2011

    Posted 13 Mar 2013 Link to this post

    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.
  19. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 14 Mar 2013 Link to this post

    @Kendo-Team: Will this bug be fixed in the upcoming Q1 2013 Release? I really hope so.
  20. Calvin
    Calvin avatar
    42 posts
    Member since:
    Jul 2011

    Posted 14 Mar 2013 Link to this post

    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.
  21. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 Mar 2013 Link to this post

    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!
  22. BigzampanoXXl
    BigzampanoXXl avatar
    60 posts
    Member since:
    Jan 2007

    Posted 15 Mar 2013 Link to this post

    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 :)
  23. Franz
    Franz avatar
    5 posts
    Member since:
    Aug 2011

    Posted 27 Mar 2013 Link to this post

    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
  24. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 27 Mar 2013 Link to this post

    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!
  25. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 02 Apr 2013 Link to this post

    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!
  26. Anthony
    Anthony avatar
    4 posts
    Member since:
    Sep 2006

    Posted 06 May 2013 Link to this post

    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
  27. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 06 May 2013 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready