RadTabStrip and RadMultiPage with content url

5 posts, 0 answers
  1. Ramya
    Ramya avatar
    1 posts
    Member since:
    Sep 2012

    Posted 23 Oct 2012 Link to this post

    I have Rad Tabstrip and Rad Multipage controls in my aspx page.
    I am trying to load another aspx page to one pageview within Rad multipage.The problem is that I am getting scrollbars, both horizontal and vertical when I try to load the page within partiuclar pageview.I set the property ScrollBars="None" in Radmultipage. But that doesnt really help. Can someone suggest a work around to achive this.I don't need the scrollbars and page has to extend automaticcaly when the page in content url expands.

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="" 
    <telerik:RadTab Text="Case" 
    <telerik:RadTab Text="Parties" 
    <telerik:RadTab Text="Parties1" Selected="true" 
    <telerik:RadTab Text="Add\Modify Party" 
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" 
    <telerik:RadPageView ID="RadPageView1" runat="server">
    some content here....
    <telerik:RadPageView ID="RadPageView2" runat="server" 
    <telerik:RadPageView ID="RadPageView4" runat="server" Height="300px"  
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Oct 2012 Link to this post

    Hi Ramya,

    I have tried the following code to remove the scrollbar.
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultipage1">
           <telerik:RadTab Text="Tab1" PageViewID=" RadMultipage1">
           ... ... ...
    <telerik:RadMultiPage ID="RadMultipage1" runat="server" SelectedIndex="0">
     <telerik:RadPageView runat="server" ID="RadPageView1" ContentUrl="Default4.aspx" />

    <script type="text/javascript">
       function resize()
          var height = getDocHeight();
          var elements = window.top.document.getElementsByTagName("div");
           for (var i = 0; i < elements.length; i++)
               var containerPageViewID = "RadPageView1";
               if (elements[i].id.indexOf(containerPageViewID) > -1)
                    elements[i].style.height = height + "px";
        if (window.addEventListener)
            window.addEventListener("load", resize, false);
        else if (window.attachEvent)
            window.attachEvent("onload", resize);
        else window.onload = resize;
        function getDocHeight()
            var D = document;
            return Math.max(
                Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
                Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
                Math.max(D.body.clientHeight, D.documentElement.clientHeight)

  3. Vishu
    Vishu avatar
    18 posts
    Member since:
    May 2014

    Posted 16 Dec 2014 in reply to Princy Link to this post

               I am facing the same issue on my pages too and after implementing the solution provided its working fine on my local dev. machine but NOT on server. Please see the screen shot attached. Anything missing like some CSS script or place to call resize() JS method. Because I am not seeing resize() method being called from anywhere.

    Calling page:
            <telerik:RadTab Text="Search Oil Products"></telerik:RadTab>
            <telerik:RadTab Text="PeopleSoft Item Request"></telerik:RadTab>                

     <telerik:RadMultiPage ID="RadMultiPage" runat="server" SelectedIndex="0">              
          <telerik:RadPageView ID="pageViewRequestItems" runat="server" ContentUrl="~/PeopleSoftItemRequest.aspx">                                    

    On Called .aspx page: Called JS resize() with "pageViewRequestItems".
    function resize() {
        var height = getDocHeight();
        var elements = window.top.document.getElementsByTagName("div");

        for (var i = 0; i < elements.length; i++) {
            var containerPageViewID = "pageViewRequestItems";

            if (elements[i].id.indexOf(containerPageViewID) > -1) {
                elements[i].style.height = height + "px";

    if (window.addEventListener)
        window.addEventListener("load", resize, false);
    else if (window.attachEvent)
        window.attachEvent("onload", resize);
    else window.onload = resize;

    function getDocHeight() {
        var D = document;
        return Math.max(
            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
            Math.max(D.body.clientHeight, D.documentElement.clientHeight)

  4. Vishu
    Vishu avatar
    18 posts
    Member since:
    May 2014

    Posted 18 Dec 2014 in reply to Vishu Link to this post

     Any updates on this? Not sure missing anything on web server. BTW using Telerik 2014-Q-1 dlls.
  5. Nencho
    Nencho avatar
    1777 posts

    Posted 19 Dec 2014 Link to this post

    Hello Vishu,

    There are many reasons that might prevent from achieving the proper behavior in your custom scenario. Please make sure that there are no javascript errors on the page.

    In addition, please refer to the documentation article, where this approach is demonstrated and to the limitations which may arise in some scenarios :



    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top