Set Scrolling property of RadPane from JavaScript?

7 posts, 0 answers
  1. Jay O'Brien
    Jay O'Brien avatar
    39 posts
    Member since:
    Dec 2008

    Posted 25 Apr 2009 Link to this post

    Is there a way to change the Scrolling property of the RadPane object (eg Both, None, X, Y) from a JavaScript call?

    I first create my page with the RadPane Scrolling="None" ....

    Then on a button click, I am calling the set_contentUrl method to navigate to a new page in that Pane, and I would like to enable the scroll bars in that Pane when I do this (the pane previously was created with Scrolling = None).

    Thanks,
    Jay
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 28 Apr 2009 Link to this post

    Hi Jay O'Brien,

    I am not quite sure about your exact scenario and why you want to show scrollbars for the RadPane and not to use the scrollbars of the content page itself. basically, you can obtain a reference to the RadPane's IFRAME which is created when you set the content url by using the getExtContentElement method which is listed below:

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

    After you reference it, you can change its overflow through javascript as you do with a standard IFRAME element. In case you need further assistance, please provide a more detailed explanation of the exact problem and the desired result or best - open a new support ticket and send a sample reproduction demo along with your explanations and some screenshots and I will do my best to help.

    Sincerely yours,
    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. Jay O'Brien
    Jay O'Brien avatar
    39 posts
    Member since:
    Dec 2008

    Posted 28 Apr 2009 Link to this post

    Sorry I started this in the wrong forum (should have been RadSplitter) ...

    Basically I have something like a portal ... on the page I can click buttons to navigate one of the RadPane's to a specific URL. Some of the pages need to have scroll bars ... some should not. Here is the sample page:

    <%

    @ Page Language="C#" AutoEventWireup="true" CodeFile="home2.aspx.cs" Inherits="home2" %>

     

    <

     

    html>

     

    <

     

    body >

     

    <

     

    form id="DialogForm" runat="server">

     

    <

     

    asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

     

    <

     

    telerik:RadSplitter skin="" Orientation="Horizontal" id="RadSplitter1" runat="server" height="100%" width="100%">

     

    <

     

    telerik:RadPane id="top_pane" Scrolling="None" runat="server" >

     

    This is my top Pane

    <br /><br />

     

    <

     

    a href="#" onclick="URL1();return false;">Show URL 1 - NO SCROLL BARS</a>

     

    <

     

    br />

     

    <

     

    a href="#" onclick="URL2();return false;">Show URL 1 - WITH SCROLL BARS</a>

     

    </

     

    telerik:RadPane>

     

    <

     

    telerik:RadSplitBar EnableResize="false" runat="server" collapsemode="None"></telerik:RadSplitBar>

     

    <

     

    telerik:RadPane id="bottom_pane" runat="server" Scrolling="None" >

     

    stuff on bottom

    </

     

    telerik:RadPane>

     

    </

     

    telerik:RadSplitter>

     

    </

     

    form>

     

    <

     

    script type="text/javascript">

     

    function

     

    URL1()

     

    {

     

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

     

     

    var pane1 = splitter.getPaneById("bottom_pane");

     

    pane1.set_contentUrl(

    "http://google.com");

     

    // var obj = pane1.getExtContentElement();

    // obj.style.overflowX = "hidden";

    // obj.style.overflowY = "hidden";

    // obj.style.overflow = "hidden";

    // obj.scrolling = "no";

    }

    function

     

    URL2()

     

    {

     

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

     

     

    var pane1 = splitter.getPaneById("bottom_pane");

     

    pane1.set_contentUrl(

    "http://www.google.com/search?hl=en&q=test&btnG=Google+Search");

     

     

    var obj = pane1.getExtContentElement();

     

    obj.style.overflowX =

    "scroll";

     

    obj.style.overflowY =

    "scroll";

     

    obj.style.overflow =

    "auto";

     

    obj.scrolling =

    "auto";

     

    }

    </

     

    script>

     

     

    </body>

     

    </

     

    html>

    I tried using the getExtContentElement to manually change the IFRAME overflow but it had no affect. The scroll bars never show up.

    Do you have any ideas how I can get this to work?

    Thanks!
    Jay

     

  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 May 2009 Link to this post

    Hello Jay O'Brien,

    Thank you for the provided code, I built up a test demo based on it. However, I still cannot completely understand your scenario since as I already said, you can use the scrollbar of the external page and this is the approach we recommend.

    I extended the demo further and added two more pages - one with a short content which does not need a scrollbar and one with a long one and removed the Scrolling="None" setting. After that, when you load the pages, they behave exactly as you described your requirement - the scrollbars show and hide depending on whether they are needed. Would you please examine the attached demo and see whther this works for you? In case it does not, please provide a more detailed explanation why it does not and details about the exact desired result.


    Regards,
    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.
  6. Jay O'Brien
    Jay O'Brien avatar
    39 posts
    Member since:
    Dec 2008

    Posted 01 May 2009 Link to this post

    Let me try to explain my environment a little better.

    Basically, we have a "portal" that the user can choose to view different items in each of 4 content windows (RadPanes). Some of the items display a page that actually uses a RadGrad, and the RadGrid is auto-sized (via Javascript) to the size of the page, and this RadGrid uses its own scroll bars ... NOT the page scroll bars. This Pane must have the scroll bars turned off, otherwise 2 sets of scroll bars can show up. Other Panes can point to an external URL, so these panes should use the IFRAMEs scroll bars.

    See the image I attached showing 4 RadPanes ... 3 RadPanes have scrolling disabled, 1 has scolling enabled (cnn.com).
    EDIT: I do not know how to attach an image to a post. The image had 4 radpanes in a square, 1 of the radpanes was a url to cnn.com, the other 3 were my pages that used a Radgrid.

    The challenge is that the URL for each Pane can be set via Javascript, so I cannot simply set the Scrolling property on the server-side, because the same RadPane may display cnn.com and then the user clicks a button and the pane now shows a page that wants to remove the scroll bars. You mentioned using the getExtContentElement object to set the IFRAMEs scrolling properties directly from Javascript, but I cannot get this to work at all.
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 05 May 2009 Link to this post

    Hello Jay O'Brien,
    First of all, let me explain what exactly the Scrolling property of the RadPane does, in case you have loaded an external page in that RadPane. In short - it sets the "scrolling" attribute of the IFRAME (the pane creates an IFRAME and opens the external page in that IFRAME) of that pane to either "auto" (Scrolling != None) or "no" (Scrolling == "None"). As specified on the W3 site, the scrolling attribute of an IFRAME element only tells the user agent to provide scrolling devices for the frame window when necessary. Whether the page that is opened in the IFRAME displays scrollbars or no is entirely up to the page settings - the value of the "overflow" CSS property of the HTML/BODY elements of that external page.

    Therefore, in case you want a page, opened in an IFRAME to display scrollbars, you need both the scrolling attribute of the IFRAME to be "auto" AND the page to have "overflow:auto" for its HTML/BODY element. On the other hand, in case you do not want the page to display scrollbars, you can either set scrolling of the IFRAME to "no" OR you can set "overflow:hidden" for the HTML/BODY elements of your page.

    What Svetlina suggested and is in my opinion the best approach, is the following:
    1. Set Scrolling="Auto" for the RadPanes in which you open pages.
    2. Set "overflow:hidden" for the HTML and BODY elements of the pages, which you do not want to display scrollbars - as far as I understand you,you yourself have created and configured those pages.
    As a result of this configuration, your pages with RadGrids will not display scrollbars and your other pages will display scrollbars in case they are configured to do so.

    In case you prefer to change the scrolling attribute of the IFRAME element that the RadPane creates - I would like to point out that simply changing this attribute would not lead to the result you expect in all supported browsers - I think this only works for FF. The only way to use the "scrolling" attribute to show and hide scrollbars of a page, opened in IFRAME, is to create another IFRAME with the new setting and replace the first one.

    However, the RadPane does not dispose the IFRAME element, once it has created it - it simply changes the "src" attribute of that IFRAME when you set another value to the ContentUrl property of the RadPane. Therefore, in case you prefer this approach, you have to dispose the IFRAME yourself. For example, you have to modify the javascript in the test project thatSvetlina sent you the following way:
    function URL1()  
    {  
        SetNewURL("Default4.aspx", Telerik.Web.UI.SplitterPaneScrolling.None); 
    }  
     
    function URL2()  
    {  
        SetNewURL("Default3.aspx", Telerik.Web.UI.SplitterPaneScrolling.Auto); 
    }  
     
    function SetNewURL(url, scrolling) 
        var splitter = $find("<%= RadSplitter1.ClientID %>"); 
        var pane1 = splitter.getPaneById("bottom_pane");  
        pane1.set_scrolling(scrolling); 
         
        var paneFrame = pane1.getExtContentElement(); 
        if(paneFrame) 
        { 
            paneFrame.parentNode.removeChild(paneFrame); 
            pane1._extContentElement = null
        } 
      
        pane1.set_contentUrl(url); 

    Kind regards,
    Tsvetie
    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.
  8. Jay O'Brien
    Jay O'Brien avatar
    39 posts
    Member since:
    Dec 2008

    Posted 28 May 2009 Link to this post

    Hi Tsvetie,

    Your approach for disposing the IFRAME worked great! In our scenario we were unable to use the first approach, so disposing of the IFRAME made everything work.

    Thanks,
    Jay
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017