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

Dynamic height on radstrip-radpageview

20 Answers 695 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 17 Jan 2011, 09:15 AM
Hi,
I have a page where i want to set the Radpageview height to grow automatically depending on the page i'm loading.I have tried setting the height to 100% but that did not work.I dont want to set the height to pixel cause there are items inside the page which makes the page height grows.Is there a way to set this up dynamically.I have attached the code.If you check the page i have currently set the height as 600px but i dont want to do that.Instead the Radpageview height will automatically grow depending on the page i'm loading.Please have a look.Thanks.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="../Styles/Form.css" rel="stylesheet" type="text/css" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" ></asp:ScriptManager>
         <asp:UpdatePanel ID="UpdatePanel2" runat="server" >
            <ContentTemplate>
                <fieldset>
                    <asp:UpdateProgress ID="progress1" runat="server">
                        <ProgressTemplate>        
                            <img alt="" src="../Images/loader.gif" />
                            Please Wait...        
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                    <div>
                        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Black"
                            MultiPageID="RadMultiPage1" SelectedIndex="0" >
                            <Tabs>
                                <telerik:RadTab Text="Instrument"></telerik:RadTab>
                                <telerik:RadTab Text="Instrument Catagories"></telerik:RadTab>
                                <telerik:RadTab Text="Instrument Exchange Listing"></telerik:RadTab>
                                <telerik:RadTab Text="Instrument Margin"></telerik:RadTab>
                            </Tabs>
                        </telerik:RadTabStrip>
                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
                            <telerik:RadPageView ID="RadPageView1" runat="server" Height="600px"  ContentUrl="InstrumentSetup.aspx">
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView2" runat="server" Height="600px" ContentUrl="InstrumentCategoryDatewiseSetup.aspx">
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView3" runat="server" Height="600px" ContentUrl="InstrumentExchangeListingSetup.aspx">
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView4" runat="server" Height="600px" ContentUrl="InstrumentMarginDatewiseSetup.aspx">
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>                       
                    </div>
                                       
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

20 Answers, 1 is accepted

Sort by
0
Veronica
Telerik team
answered on 19 Jan 2011, 03:17 PM
Hi Tom,

Unfortunately this is not possible as the ContentUrl is rendered to iframe and you can not change the size of this iframe dynamically.

Kind regards,
Veronica Milcheva
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Andy Green
Top achievements
Rank 2
answered on 19 Apr 2011, 08:00 AM
I have the exact same problem. Is it possible to get the ID of this iFrame and target it with some javascript to resize it. From the view source there is no ID.

Andy
0
Veronica
Telerik team
answered on 22 Apr 2011, 07:24 AM
Hello Andy and Tom,

You can try this as a workaround to set the height of the pageview to 100% :

<head id="Head1" runat="server">
    <title></title>
 </head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
  
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="MultiPage1">
    <Tabs>
        <telerik:RadTab Text="Telerik" Selected="true" PageViewID="RadPageView1">
        </telerik:RadTab>
        <telerik:RadTab Text="Microsoft" PageViewID="RadPageView2">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="MultiPage1" runat="server">
    <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true" ContentUrl="http://www.telerik.com" Height="100%">
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server" ContentUrl="http://www.Microsoft.com" Height="100%">
    </telerik:RadPageView>
</telerik:RadMultiPage>
<script type="text/javascript">
      
    function pageLoad() {
      
        var $ = $telerik.$;
        var height = $(window).height();
         
        var multiPage = $find("<%=MultiPage1.ClientID %>");
        var totalHeight = height - 42;
        multiPage.get_element().style.height = totalHeight + "px";
     
    }
</script>
</form>
</body>

Hope this helps.

Regards,
Veronica Milcheva
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Jorge
Top achievements
Rank 1
answered on 19 Jul 2011, 09:01 PM
I have the same issue here, and unfortunately, Veronica's solution did not work for me.

I have to say that, even if it had worked, that seems to me like a hack and not an actual solution. The RadPageView should automatically adjust its size to whatever dimmensions the contents are, unless a width/height is specified. That is the way it works when you load a User Control into the RadPageView... It works just fine. The problem only seems to occur when loading a page via the ContentUrl property.

I would like to know if Telerik is looking at correcting this undesirable behavior in the near future, and when we may expect the fix.

Thanks.
0
Andy Green
Top achievements
Rank 2
answered on 20 Jul 2011, 08:04 AM
To be honest I couldn't get it to work either, in the end I removed the RadControls and moved the Tabs into the main menu. Now its just a normal page and sizes correctly.

Not the desired outcome, but we were running late and this was the simple fix.
Andy
0
Kate
Telerik team
answered on 22 Jul 2011, 01:56 PM
Hello Andy,

Currently it is a limitation of the implementation of the RadMultiPage control. However, I would suggest that you open a support ticket and attach a simple runnable project which we can explore locally and help you out with a suitable solution.

All the best,
Kate
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

0
Jorge
Top achievements
Rank 1
answered on 22 Jul 2011, 03:21 PM

Telerik support,
Replicating this behavior is pretty simple. Not sure why opening individual support cases would be needed since this behavior appears to be the same in any environment, and there are a number of us who need this issue corrected.

Here is a sample code where Views 1 and 2 work just fine (page height automatically adjusts to the full height of the user control without scrollbars,) but views 3, 4, and 5 do not. Views 3, 4, and 5 open in full width, but the height defaults to about 100px or so (just a guess.) The contents are chopped vertically, and are only visible by scrolling up/down. Setting a height of "100%" on either the RadTab or RadPageView has no effect. The only way we have been able to override that is by setting the RadPageView height in pixels (i.e. "800px".) Needless to say, this is undesireable since different pages will require varying content heights.

The javascript function suggested by Veronica (included below) only works partially. Depending on the page being loaded, the scrollbars are still present in most cases, and in some cases even producing double scrollbars.

<telerik:RadTabStrip ID="RadTabStrip_ClientProfile" runat="server" SelectedIndex="0" MultiPageID="RadMultipage_ClientProfile">

    <Tabs>

        <telerik:RadTab runat="server" Text="View 1" />

        <telerik:RadTab runat="server" Text="View 2" />

        <telerik:RadTab runat="server" Text="View 3" />

        <telerik:RadTab runat="server" Text="View 4" />

        <telerik:RadTab runat="server" Text="View 5" />

    </Tabs>

</telerik:RadTabStrip>


<
telerik:RadMultiPage ID="RadMultipage_ClientProfile" runat="server" SelectedIndex="0">

    <telerik:RadPageView runat="server" ID="PV1">

        <uc1:ucView1 ID="UserControlPage1" runat="server"></uc1:ucView1>

    </telerik:RadPageView>

    <telerik:RadPageView runat="server" ID="PV2">

        <uc1:ucView2 ID="UserControlPage2" runat="server"></uc1:ucView2>

    </telerik:RadPageView>

    <telerik:RadPageView runat="server" ID="PV3" ContentUrl="TestPage3.aspx" />

    <telerik:RadPageView runat="server" ID="PV4" ContentUrl="TestPage4.aspx" />

    <telerik:RadPageView runat="server" ID="PV5" ContentUrl="TestPage5.aspx" />

</telerik:RadMultiPage>

 

<script type="text/javascript">

    function pageLoad() {

        var $ = $telerik.$;

        var height = $(window).height();

        var multiPage = $find("<%= RadMultipage_ClientProfile.ClientID %>");

        var totalHeight = height - 42;

                multiPage.get_element().style.height = totalHeight + "px";

    }

</script>

0
Jorge
Top achievements
Rank 1
answered on 22 Jul 2011, 05:27 PM
Following up on this issue...
I just discovered that loading large user controls in the RadPageView breaks when using the javascript provided by Veronica. The following does not occur if we don't use that javascript...

Our RadMultiPage control loads inside a master page which has a navigation menu at the top and bottom of the main container. When a large user control is loaded into the RadPageView, the contents of the user control overflow past the bottom menu with a see-through effect, instead of growing the container size and pushing down the navigation menu as it would be expected.
Any ideas?
0
Kate
Telerik team
answered on 28 Jul 2011, 12:23 PM
Hi Jorge,

Thanks for the markup, it gave us a clear idea for you current scenario. Here I have attached a simple page that uses a RadTabStrip control with RadMultiPage and ContentUrl as well. Using the code below you can set the height to 100% when using the ContentUrl property in both cases - when you have a user control and in case you use a simple PageView:
<script type="text/javascript">
       var $ = $telerik.$;
       $(document).ready(function(e) {
           var height = $(document).height();
           $(".content", window.top.document).height(height);
       });
   </script>

Please note that when ContentUrl is set to a website in another domain (like google.com) the mentioned approach may not be used due to cross site scripting - http://en.wikipedia.org/wiki/Cross-site_scripting.

Regards,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Jorge
Top achievements
Rank 1
answered on 28 Jul 2011, 03:20 PM
Thanks for the reply Kate.
Unfortunately, that javascript code produces an error right away when the page loads and attempts to instantiate the $telerik variable outside a function:
'$telerik' is undefined
0
Genady Sergeev
Telerik team
answered on 28 Jul 2011, 04:05 PM
Hi Jorge,

This would happen If there are no telerik controls on the page. Using $telerik.$ we obtain reference to jQuery. Do you have jQuery loaded on that page? If there is no jQuery loaded and there are no telerik controls on the page please use the following JavaScript instead:

<form id="form1" runat="server">
     
    <asp:ScriptManager runat="server" ID="ScriptManager1">
    </asp:ScriptManager>
     
    <script type="text/javascript">
        window.onload = function () {
            var height = getDocHeight();
            var elements = window.top.document.getElementsByTagName("div");   
             
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].className == "content") {
                    elements[i].style.height = height;
                     
                }
            }
        }
         
        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>

If you have telerik controls on the page but $telerik is still undefined please make sure that the script provided is placed after the script manager declaration.

For reference and convenience I'm attaching my modified sample project.

Regards,
Genady Sergeev
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Jorge
Top achievements
Rank 1
answered on 28 Jul 2011, 08:49 PM
Thanks Genady for your reply.
I managed to get rid of the "undefined" error by following your advice. However, the newly suggested function did not do anything for pages loaded via the ContentUrl attribute. They still load in a small iframe.

The only way I have been able to half-way correct this behavior for both user controls and whole pages, is by using the previously suggested script, with a small addition of my own. I still consider this entire approach to be a hack, and not a real solution:
function pageLoad() {
     var multiPage = $find("<%= RadMultipage_ClientProfile.ClientID %>");
     var $ = $telerik.$;
     var totalHeight = $(window).height() - 42;
     if (totalHeight < 850) totalHeight = 850;
     multiPage.get_element().style.height = totalHeight + "px";
}

Looking forward to a more robust solution...
0
Genady Sergeev
Telerik team
answered on 03 Aug 2011, 01:01 PM
Hi Jorge,

This is weird, the function is working fine on my side. Are you sure that you are placing it in the Content page, not in the page which contains the TabStrip? Can you confirm that the attached in the previous replay project fails to load the pages in the full size?

If so, please specify the exact browser that you use, because the test project is working fine on my side as this video shows.

edit: I've just noticed that the sample is failing in firefox. The fix is to change the following line from:

elements[i].style.height = height;

to

elements[i].style.height = height + "px";

I hope that this helps.


Greetings,
Genady Sergeev
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Jorge
Top achievements
Rank 1
answered on 12 Aug 2011, 01:49 PM
You may be onto something Genady.
I have the script in the same page that contains the RadTabStrip, which is exactly how Veronica's example does it. I did not see any instructions directing us to place the script in the content pages. I would like to try that, but the issue becomes, how do I access the RadTabStrip from within the content pages?
Obviously, this line will not work from the content page:
  var multiPage = $find("<%= RadMultipage_ClientProfile.ClientID %>"); 
Do I need to walk up the DOM tree with FindControl? Can you post an example?
Thanks!
0
Peter
Telerik team
answered on 18 Aug 2011, 09:45 AM
Hello Jorge,

Here is a more universal way to find a Telerik's control client object, regardless of the site's infrastructure (master page, user control, etc)
var $ = $telerik.$;
 
var multiPageJQueryObject = $("[id$='RadMultipage_ClientProfile']");
var multiPageClientObject = $find(multiPageJQueryObject.attr('id'));

Let me know how it goes.

Regards, Peter
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Achush
Top achievements
Rank 1
answered on 10 Jan 2012, 07:55 AM

hi,

I am using following java script .But height is assigned with the default max height "816" .so i am still having the vertical scroll bar displayed, if the multipage height greater than 816. Can any one help me to sort this ....

 

<

 

 

script type="text/javascript"> 

 

 

 

var $ = $telerik.$;

 

$(document).ready(

 

function (e) {

 

 

 

var height = $(document).height();

 

$(

 

".content", window.top.document).height(height);

 

});

 

 

</

 

 

script>

 

0
Ramu
Top achievements
Rank 1
answered on 01 Feb 2012, 04:07 PM
Hi Telerik Team,

Please help me on below issue regarding Telerik tabstrip scroll bar .

The below javascript is not working as expected when grid grows  in the tadstrip in IE8.

<

 

 

script type="text/javascript">

 

 

 

var $ = $telerik.$;

 

$(document).ready(

 

function (e) {

 

 

 

var height = $(document).height();

 

alert(

 

"height=" + height);

 

$(

 

".content", window.top.document).height(height/2);

 

});

 

 

 

</script>

 

0
John
Top achievements
Rank 1
answered on 11 Sep 2013, 01:58 PM
Has this been fixed in a recent release?
0
Nencho
Telerik team
answered on 16 Sep 2013, 11:39 AM
Hello John,

Please refer to our help article here, demonstrating the approach for setting the height to 100% when using ContentUrl in PageView. Please give it a try and if it does not help, please provide us with your implementation, so we could get a closer look of it.

Regards,
Nencho
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
John
Top achievements
Rank 1
answered on 17 Sep 2013, 02:26 PM
Your code is rather insufficient.

The RadWindow does not send a message for maximize after the radwindow is maximized.

The RadWindow does not send resize messages if the browser size changes if the RadWindow is maximized. 

I did get things to work, however, it took several days to figure out. 

Things that would have helped:
1)  Have a flag set on the multipage to resize to parent rather than resize to content.
2)  have the RadWindow send a message for maximized AFTER the maximize occurs.
3)  Have the RadWindow forward resize message if it is maximized and the browser window changes size.
Tags
TabStrip
Asked by
Tom
Top achievements
Rank 1
Answers by
Veronica
Telerik team
Andy Green
Top achievements
Rank 2
Jorge
Top achievements
Rank 1
Kate
Telerik team
Genady Sergeev
Telerik team
Peter
Telerik team
Achush
Top achievements
Rank 1
Ramu
Top achievements
Rank 1
John
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or