This is a migrated thread and some comments may be shown as answers.

RadTabStrip and RadMultiPage with content url

4 Answers 358 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Ramya
Top achievements
Rank 1
Ramya asked on 23 Oct 2012, 03:18 PM

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>

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 26 Oct 2012, 05:07 AM
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.
0
Vishu
Top achievements
Rank 1
answered on 16 Dec 2014, 03:21 PM
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)
    );
}

0
Vishu
Top achievements
Rank 1
answered on 18 Dec 2014, 02:21 PM
Hi,
 Any updates on this? Not sure missing anything on web server. BTW using Telerik 2014-Q-1 dlls.
0
Nencho
Telerik team
answered on 19 Dec 2014, 11:03 AM
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
 

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.

 
Tags
TabStrip
Asked by
Ramya
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Vishu
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or