scrolltop works in chrome but not IE

[Ashley]

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">

[Boyan Dimitrov]

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

[Ashley]

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

[Boyan Dimitrov]

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

[Ashley]

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

[Boyan Dimitrov]

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

[Ashley]

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

[Boyan Dimitrov]

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