scrolltop works in chrome but not IE

8 posts, 1 answers
  1. Ashley
    Ashley avatar
    4 posts
    Member since:
    Jun 2012

    Posted 08 Nov 2012 Link to this post

    Hi All,

    The following code works as expected for chrome; when the page loads the last clicked or expanded node is moved to the top of the tree view. However this doesn't work in IE. Any ideas? 

    function panelBarLoaded(sender, eventArgs) {
                   var panelBar = $find("<%=PanelBar1.ClientID%>");
                   var panelItem = panelBar.findItemByText("Navigator");
                   var treeView = panelItem.findControl("tree");
                   var node = treeView.findNodeByAttribute("DSID",document.getElementById("scrollingNode").value);
                   if (node != null) {
                       window.setTimeout(function () { scrollToNode(treeView, node); }, 200);
                   }
               }
     
     
               function scrollToNode(treeview, node) {
                   
                   var nodeElement = node.get_contentElement();
                   var treeViewElement = treeview.get_element();
                   var nodeOffsetTop = treeview._getTotalOffsetTop(nodeElement);
                   var treeOffsetTop = treeview._getTotalOffsetTop(treeViewElement);
                   var relativeOffsetTop = nodeOffsetTop - treeOffsetTop;
                   treeViewElement.scrollTop = relativeOffsetTop;
                   window.scrollTo(0, relativeOffsetTop);
               }

    Tree View Declaration;
    <telerik:RadPanelBar runat="server" Width="100%" Height="100%" id="PanelBar1"  OnClientItemClicked="OnClientItemClicked3"     ExpandMode="FullExpandedItem" OnClientLoad="panelBarLoaded" Skin="Windows7" TabIndex="2">
           
     
                  <telerik:RadPanelItem Width="100%" Text="Navigator" Expanded="True" runat="server">
                      <items>
                         <telerik:RadPanelItem Width="100%" Height="100%" runat="server" Value="TemplateHolder">
                              <ItemTemplate>
                                  <telerik:RadTreeView ID="tree"  runat="server" onnodeexpand="tree_NodeExpand" Width="100%" Height="99%" EnableDragAndDrop="False" OnNodeDrop="tree_HandleDrop" OnClientContextMenuItemClicking="newJumpTo" OnClientContextMenuShowing="ClientContextMenuShowing"  OnNodeCollapse="RadTreeView1_NodeCollapse"
                                              OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" OnNodeClick="updateRecentDocuments" OnClientNodeClicked="ViewDoc" MultipleSelect="true" EnableDragAndDropBetweenNodes="true"  EnableEmbeddedSkins="true" Skin="Windows7">
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 13 Nov 2012 Link to this post

    Hello Ashley,

    I would recommend you to use our scrollIntoView() method of the RadTreeNode client-side object. Please find some detailed information about all its client-side events here.
    Please keep in mind that in order this method to work properly its parent node need to be expanded. One convenient approach would be to use .get_parent().expand() before executing scrollIntoView method.

    Hope that this will lead you into right direction. 

    Regards,
    Boyan Dimitrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ashley
    Ashley avatar
    4 posts
    Member since:
    Jun 2012

    Posted 21 Nov 2012 Link to this post

    Hi Boyan.

    I have replaced scollToNode() with node.scrollIntoView and the same result occurs, It works in chrome and FF but not IE, any more ideas?

    Regards,

    Ash
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Nov 2012 Link to this post

    Hello Ashley,

    I prepared a sample project based on the provided markup and JavaScript code but I could not get the issue that you observed at your side. I tested with your custom scrollToNode and with our inbuilt
    scrollIntoView method as well but I got same result. Please watch the application behavior here.
    I would like to suggest you to try to modify the attached sample project and reproduce the described issue, so we can inspect it deeper locally.

    Regards,
    Boyan Dimitrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Ashley
    Ashley avatar
    4 posts
    Member since:
    Jun 2012

    Posted 26 Nov 2012 Link to this post

    Hi Boyan,

    It appears the difference between your tree and mine is that my RadTreeView has a height of 100%, while yours is set as a constant number "50px". Is this the problem and if so, is there any way of keeping the tree at 100%

    Regards,

    Ash
  7. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Nov 2012 Link to this post

    Hello Ashley,

    Your observations are correct - the treeview height property is the reason for this behavior. By setting it to 100% all nodes are considered part of the treeview visible area, so no scrolling is required.  A valid workaround would be add some style and your custom client-side logic modifications as follows:

    //styles

    <style type="text/css">
            div.rpSlide .rpItem {
                height: 172px;
                overflow-y: auto;
            }
            div.rpSlide .rpGroup {
                overflow: hidden;
            }
        </style>

    //OnClientItemClicked3 client-side event handler

    function OnClientItemClicked3(sender, eventArgs) {
    ......
                var parentNode = node.get_parent();
     
                while (parentNode != null) {
                    if (parentNode.expand) {
                        parentNode.expand();
                    }
     
                    parentNode = parentNode.get_parent();
                }
                 
                window.setTimeout(function () { scrollToNode(treeView, node); }, 200);
            }

    //your scrollToNode function
    function scrollToNode(treeview, node) {
                var $ = $telerik.$;
                var nodeElement = node.get_contentElement();
                var treeViewElement = treeview.get_element();
                var nodeOffsetTop = treeview._getTotalOffsetTop(nodeElement);
                var treeOffsetTop = treeview._getTotalOffsetTop(treeViewElement);
                var relativeOffsetTop = nodeOffsetTop - treeOffsetTop;
                $("div.rpSlide .rpItem").get(0).scrollTop = relativeOffsetTop;
                window.scrollTo(0, relativeOffsetTop);
            }

    You can find the attached sample project that demonstrates this approach.

    Regards,
    Boyan Dimitrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Ashley
    Ashley avatar
    4 posts
    Member since:
    Jun 2012

    Posted 31 Dec 2012 Link to this post

    That's solved however there is now an issue in IE7 where the tree won't stay inside the RADPanelbar and is causing the app to crash. Has anyone encountered this issue before?

    regards,

    Ash
  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 03 Jan 2013 Link to this post

    Hello Ashley,

    Indeed under IE7 the property scrollTop does not work as expected and this is the reason for that unusual behavior. I would recommend that you check whether the user browser is IE7 and if so -  use our RadTreeNode client-side object method scrollIntoView().  Please find the attached modified project that works fine under IE7 browser.

    Kind regards,
    Boyan Dimitrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017