RadTabStrip and RadMultiPage with content url

[Ramya]

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

MultiPageID="RadMultiPage1"<BR>                

SelectedIndex="0" 

CssClass="tabStrip"><BR>                

<Tabs><BR>                    

<telerik:RadTab Text="Case" 

PageViewID="RadPageView1"><BR>                    

</telerik:RadTab><BR>                    

<telerik:RadTab Text="Parties" 

PageViewID="RadPageView2"><BR>                        

<Tabs><BR>                            

<telerik:RadTab Text="Parties1" Selected="true" 

PageViewID="RadPageView2"></telerik:RadTab><BR>                            

<telerik:RadTab Text="Add\Modify Party" 

PageViewID="RadPageView4"></telerik:RadTab><BR>                        

</Tabs><BR>                    

</telerik:RadTab><BR>                

</Tabs><BR>        

</telerik:RadTabStrip><BR>        

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" 

CssClass="multiPage" 

ScrollBars="None"><BR>     
<telerik:RadPageView ID="RadPageView1" runat="server">
some content here....
</telerik:RadPageView>


<telerik:RadPageView ID="RadPageView2" runat="server" 

ContentUrl="PartyDetails.aspx"></telerik:RadPageView><BR>            

<telerik:RadPageView ID="RadPageView4" runat="server" Height="300px"  

ContentUrl="AddModifyParty.aspx"></telerik:RadPageView><BR>        

</telerik:RadMultiPage>

[Princy]

Hi Ramya,

I have tried the following code to remove the scrollbar.
ASPX:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultipage1">
   <Tabs>
       <telerik:RadTab Text="Tab1" PageViewID=" RadMultipage1">
       </telerik:RadTab>
       ... ... ...
   </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultipage1" runat="server" SelectedIndex="0">
 <telerik:RadPageView runat="server" ID="RadPageView1" ContentUrl="Default4.aspx" />
</telerik:RadMultiPage>

JS:

<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";
                break;
            }
        }
    }
    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)
        );
    }
</script>

Thanks,
Princy.

[Vishu]

Hi,
           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:RadCodeBlock>
   <telerik:RadTabStrip 
    runat="server"
    ID="tabMain"           
    AutoPostBack="true"
    Width="100%"
    MultiPageID="RadMultiPage"
    ReorderTabsOnSelect="true" 
    SelectedIndex="0">
    <Tabs>
        <telerik:RadTab Text="Search Oil Products"></telerik:RadTab>
        <telerik:RadTab Text="PeopleSoft Item Request"></telerik:RadTab>                
    </Tabs>
</telerik:RadTabStrip>

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

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";
            break;
        }
    }
}

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)
    );
}

[Vishu]

Hi,
 Any updates on this? Not sure missing anything on web server. BTW using Telerik 2014-Q-1 dlls.

[Nencho]

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 :

http://www.telerik.com/help/aspnet-ajax/tabstrip-troubleshooting-set-height-to-pageview.html

Regards,
Nencho
Telerik