Dynamic height on radstrip-radpageview

21 posts, 0 answers
  1. Tom
    Tom avatar
    1 posts
    Member since:
    Jan 2011

    Posted 17 Jan 2011 Link to this post

    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>

  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 19 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 19 Apr 2011 Link to this post

    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
  5. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 22 Apr 2011 Link to this post

    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.

  6. Jorge
    Jorge avatar
    17 posts
    Member since:
    Oct 2008

    Posted 19 Jul 2011 Link to this post

    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.
  7. Andy Green
    Andy Green avatar
    342 posts
    Member since:
    Aug 2008

    Posted 20 Jul 2011 Link to this post

    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
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Jul 2011 Link to this post

    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!

  9. Jorge
    Jorge avatar
    17 posts
    Member since:
    Oct 2008

    Posted 22 Jul 2011 Link to this post

    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>

  10. Jorge
    Jorge avatar
    17 posts
    Member since:
    Oct 2008

    Posted 22 Jul 2011 Link to this post

    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?
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 28 Jul 2011 Link to this post

    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.

  12. Jorge
    Jorge avatar
    17 posts
    Member since:
    Oct 2008

    Posted 28 Jul 2011 Link to this post

    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
  13. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 28 Jul 2011 Link to this post

    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.

  14. Jorge
    Jorge avatar
    17 posts
    Member since:
    Oct 2008

    Posted 28 Jul 2011 Link to this post

    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...
  15. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 03 Aug 2011 Link to this post

    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.

  16. Jorge
    Jorge avatar
    17 posts
    Member since:
    Oct 2008

    Posted 12 Aug 2011 Link to this post

    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!
  17. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 18 Aug 2011 Link to this post

    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.

  18. Achush
    Achush avatar
    1 posts
    Member since:
    Jan 2012

    Posted 10 Jan 2012 Link to this post

    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>

     

  19. Ramu
    Ramu avatar
    3 posts
    Member since:
    Aug 2010

    Posted 01 Feb 2012 Link to this post

    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>

     

  20. John
    John avatar
    44 posts
    Member since:
    Apr 2011

    Posted 11 Sep 2013 Link to this post

    Has this been fixed in a recent release?
  21. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 16 Sep 2013 Link to this post

    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.
  22. John
    John avatar
    44 posts
    Member since:
    Apr 2011

    Posted 17 Sep 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017