How to get the onScroll event?

12 posts, 0 answers
  1. Francisco
    Francisco avatar
    2 posts
    Member since:
    Apr 2009

    Posted 28 May 2009 Link to this post

    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

     

     

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 May 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Francisco
    Francisco avatar
    2 posts
    Member since:
    Apr 2009

    Posted 01 Jun 2009 Link to this post

    It worked perfect.

    Thanks,

    Francisco
  5. Darren
    Darren avatar
    16 posts
    Member since:
    Jun 2009

    Posted 18 Apr 2010 Link to this post

    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.
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 21 Apr 2010 Link to this post

    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.
  7. Darren
    Darren avatar
    16 posts
    Member since:
    Jun 2009

    Posted 22 Apr 2010 Link to this post

    Svetlina, thank you for your help. That works great.
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Apr 2010 Link to this post

    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.
  9. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 28 Jun 2010 Link to this post

    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.
  10. Darren
    Darren avatar
    16 posts
    Member since:
    Jun 2009

    Posted 28 Jun 2010 Link to this post

    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> 

  11. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 29 Jun 2010 Link to this post

    doesnt work for me. i just get javascript error that says access denied.
  12. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Jul 2010 Link to this post

    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
    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
  13. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 01 Jul 2010 Link to this post

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