How to get the onScroll event?

[Francisco]

Hi guys,

I'm trying to get the onscroll event of the radPane and I'm having problems with the method GetContentContainerElement() of the pane. When I call this method it gives me a javascript error saying Object doesn't support this property or method.
Actually what I am trying to do is:

I have 2 panels and I want to scrolll the pane2 if the pane1 scrolls and vice versa.

The code I'm trying to use is :

<telerik:RadSplitter  id="RadSplitter1" runat="server" width="100%" Height="327px" onclientloaded="InitializeScrollHandler">
    <telerik:RadPane id="pane1" runat="server" Scrolling="Both" >
    ........Content
    </telerik:RadPane>

   <telerik:RadSplitBar id="RadSplitbar1" Height="100%" runat="server" CollapseMode="Both"></telerik:RadSplitBar>

 

 

   <telerik:RadPane id="pane2" runat="server" scrolling="Both">
    ........Content
    </telerik:RadPane>
</telerik:RadSplitter>

 

 

 

function InitializeScrollHandler(){

 

    var splitter = $find("<%= RadSplitter1.ClientID %>");
    var pane1 = splitter.GetPaneById('<%= pane1.ClientID %>');
    var pane2 = splitter.GetPaneById("<%= pane2.ClientID %>");
    var pane2Div = pane2.GetContentContainerElement();

 

   var scrollHandler = function () {

         var scrollPosition = pane2.GetScrollPos();
         pane1.SetScrollPos(scrollPosition.left, scrollPosition.top);
    }
    pane2Div.onscroll = scrollHandler;

 

}

Am I doing something wrong?!

Thanks in advanced,

Francisco

 

 

[Svetlina Anati]

Hi Francisco,

You approach is correct but as far as I can see form your code you are using the RadSplitter for ASP.NET AJAX and the client API you use is the one of RadSplitter for ASP.NET. Some of the methods might work due to backwards compatibility but in order to ensure that everything is correct you should use the correct API and casing. This being said, please try to use the following syntax:

var pane2Div = pane2.getContentElement();

The method is available in the client API of RadSplitter for ASP.NET AJAX below:

http://www.telerik.com/help/aspnet-ajax/splitter_clientsideradpane.html

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Francisco]

It worked perfect.

Thanks,

Francisco

[Darren]

I stumbled on this thread seeking the exact same functionality. However, when I call getScrollPosition, the left and top values are always 0 regardless of where I scroll. I can get the top and left positions of the "radpane1" pane but not the two nested panes "pane_historyPage" and "pane_currentPage". Do I have to refer to the inner panes differently?

function InitializeScrollHandler() {
    var splitter = $find("<%= RadSplitter1.ClientID %>");
    var pane1 = splitter.GetPaneById('<%= pane_historyPage.ClientID %>');  //$find('<%= pane_historyPage.ClientID %>');
    var pane2 = splitter.GetPaneById('<%= pane_currentPage.ClientID %>');  //$find("<%= pane_currentPage.ClientID %>");
    var pane1pane1Div = pane1.getExtContentElement().contentWindow;
    var pane2pane2Div = pane2.getExtContentElement().contentWindow;

    var scrollHandler1 = function() {
        var scrollPos = pane1.getScrollPos();
        var leftPos = scrollPos.left; // always returns 0
        var topPos = scrollPos.top; // always returns 0
    }
    var scrollHandler2 = function() {
        var scrollPos = pane2.getScrollPos();
        var leftPos = scrollPos.left; // always returns 0
        var topPos = scrollPos.top; // always returns 0
    }
    pane2Div.onscroll = scrollHandler1;
    pane1Div.onscroll = scrollHandler2;
}

<telerik:RadSplitter OnClientLoaded="InitializeScrollHandler" ID="RadSplitter2" runat="server" Height="100%" Orientation="Horizontal" Width="100%">
    <telerik:RadPane ID="RadPane1" runat="server" Height="30px" MaxHeight="30" />
    <telerik:RadSplitBar ID="RadSplitBar2" runat="server" />
    <telerik:RadPane ID="RadPane2" runat="server">
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">
            <telerik:RadPane ID="pane_historyPage" runat="server" />
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
            <telerik:RadPane ID="pane_currentPage" runat="server" />
        </telerik:RadSplitter>
    </telerik:RadPane>
</telerik:RadSplitter>

Thanks in advance for the help.

[Svetlina Anati]

Hello Darren,

As far as I can see form your code you load external pages in the RadPanes by using the ContentUrl property - I do not see it specified but I assume that you dynamically set it because you are using the getExtContentElement method which references the IFRAME and also you use the contentWindow. Currently, the getScrollPos method does not work for RadPanes with external content due to some reasons, e.g when the loaded page is from another domain a js error will be thrown because of the browser security mechanism. However, to make the method work in this scenario as well is already logged in our TODO for implementation and the functionality will be available in one of the future releases.

For the time being I suggest to use the standard manner to achieve what you need as shown below:

<form id="form1" runat="server">
   <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
   <script type="text/javascript">
       function InitializeScrollHandler()
       {
           var splitter = $find("<%= RadSplitter1.ClientID %>");
           var pane1 = splitter.GetPaneById('<%= pane_historyPage.ClientID %>');  //$find('<%= pane_historyPage.ClientID %>');
           var pane2 = splitter.GetPaneById('<%= pane_currentPage.ClientID %>');  //$find("<%= pane_currentPage.ClientID %>");
           var pane1Div = pane1.getExtContentElement().contentWindow;
           var pane2Div = pane2.getExtContentElement().contentWindow;
           var scrollHandler1 = function()
           {
               var scrollPos = pane1Div.document.documentElement;
               var leftPos = scrollPos.scrollLeft;
               var topPos = scrollPos.scrollTop;
               alert(topPos);
           }
           var scrollHandler2 = function()
           {
               var scrollPos = pane2Div.document.documentElement
               var leftPos = scrollPos.scrollLeft;
               var topPos = scrollPos.scrollTop;
           }
           pane2Div.onscroll = scrollHandler1;
           pane1Div.onscroll = scrollHandler2;
       }


   </script>
   <telerik:RadSplitter OnClientLoaded="InitializeScrollHandler" ID="RadSplitter2" runat="server"
       Height="100%" Orientation="Horizontal" Width="100%">
       <telerik:RadPane ID="RadPane1" runat="server" Height="30px" MaxHeight="30" />
       <telerik:RadSplitBar ID="RadSplitBar2" runat="server" />
       <telerik:RadPane ID="RadPane2" runat="server">
           <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">
               <telerik:RadPane ID="pane_historyPage" runat="server" ContentUrl="Default.aspx" />
               <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
               <telerik:RadPane ID="pane_currentPage" runat="server" ContentUrl="Default.aspx" />
           </telerik:RadSplitter>
       </telerik:RadPane>
   </telerik:RadSplitter>
   </form>

For your convenience I attached a sample page. Please, replace the ContentUrl with the corresponding one on your side and if it is from the same domain everything should work OK and you can use this as a start point for your implementation.

Greetings,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Darren]

Svetlina, thank you for your help. That works great.

[Svetlina Anati]

Hello Darren,

I am glad I could help! In case you experience any further problems, do not hesitate to contact us again!

Kind regards,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jason Bourdette]

I tried the code post above but didnt work for me.

When scrolling the left pane (paneDiv1). I get the alert that shows position and the number looks good.

If i add an alert to paneDiv2 and try scrolling the right side pane nothing happens.

What I want to have is a right pane and left pane with scrollbars that scroll together. If the user moves the left one the right one automatically adjusts. If the user moves the right pane the left pane should auto adjust.

Any help would be great. Using the newest version of telerik controls.

[Darren]

Here is the code I ended up with. I set the page URL server-side via the ".ContentUrl" property of the radpanes. I am sure it can be simplified. I am more a "tinkerer" than a "programmer".

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link id="Link1" runat="server" type="text/css" rel="Stylesheet" href="~/resources/css/styles.css" />

<style type="text/css">

* { margin: 0px;padding:0px; }

body { overflow: hidden; }

html, body { height: 100%; }

</style>

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

function InitializeScrollHandler() {

var splitter = $find("<%= RadSplitter1.ClientID %>");

var pane1 = splitter.GetPaneById('<%= pane_historyPage.ClientID %>');

var pane2 = splitter.GetPaneById('<%= pane_currentPage.ClientID %>');

var pane1pane1Div = pane1.getExtContentElement().contentWindow;

var pane2pane2Div = pane2.getExtContentElement().contentWindow;

var scrollHandler1 = function() {

var scrollPos = pane1Div.document.documentElement;

var leftPos = scrollPos.scrollLeft;

var topPos = scrollPos.scrollTop;

pane2Div.document.documentElement.scrollLeft = leftPos;

pane2Div.document.documentElement.scrollTop = topPos;

}

var scrollHandler2 = function() {

var scrollPos = pane2Div.document.documentElement;

var leftPos = scrollPos.scrollLeft;

var topPos = scrollPos.scrollTop;

pane1Div.document.documentElement.scrollLeft = leftPos;

pane1Div.document.documentElement.scrollTop = topPos;

}

pane1Div.onscroll = scrollHandler1;

pane2Div.onscroll = scrollHandler2;

}

function hideContentLoadingPanel() {}

</script>

</telerik:RadScriptBlock>

</head>

<body>

<form id="form1" runat="server" style="height: 100%;">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadSplitter OnClientLoad="InitializeScrollHandler" ID="RadSplitter1" runat="server" Width="100%" Height="100%" HeightOffset="50">

<telerik:RadPane ID="pane_historyPage" runat="server"></telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" />

<telerik:RadPane ID="pane_currentPage" runat="server"></telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

[Jason Bourdette]

doesnt work for me. i just get javascript error that says access denied.

[Svetlina Anati]

Hello Jason,

What you report is most probably from the fact that the page you load is from another domain. If so, this behavior is expected because of the browser security - the browsers do not allow javascript communication and manipulation between pages in different domains or under different protocols. This is not related to RadControls but to general manner of javascript interpretation in the browsers. You can find many more detailed related articles on the net, e.g below:

http://www.devarticles.com/c/a/JavaScript/JavaScript-Security/
http://javascript.about.com/od/reference/a/frame3.htm
http://www.google.bg/#hl=bg&source=hp&q=javascript+security+domains&meta=&rlz=1R2WZPA_enBG347&aq=f&oq=javascript+security+domains&fp=a0599798b4eb5972



Kind regards,
Svetlina
the Telerik team

[Jason Bourdette]

thanks, i am loading the content from the same domain, but i think i'm going move on for now. maybe come back to this later. thanks