MinHeight Question

[J. E.]

Hi all,

We have just started using the Telerik controls and I have a quick question on how to set the minHeight on the RadMultiPage control. I have it linked to my tab strip and as the user navigates from tab to tab, it load a new page (using the ContentUrl) into the corresponding RadPageView. I would like to set the minHeight of the RadMultiPage control to a given value, but I can't seem to figure out how to do this. Does anyone have any ideas how this could be accomplished?

Thanks,
J. E.

[Cori]

Hello Jennifer,

You really can't set a MinHeight on a RadPageView that has it's ContentUrl set because the the RadPageView renders in iFrame element to display the page set by the ContentUrl, which needs a fixed height. You would have to use some javascript method that would fire when the content inside the iFrame loads and resize it, so it shows all the page content without the need of scroll bars.

I hope that helps.

[J. E.]

Hi Cori,

Thank you for the response. I started looking at doing what you suggested. I found a few posts online that discuss how to set the iframe's height based on the internal document's scrollheight. My problem at the moment is that when I try and find the RadMultiPage control in my Javascript, it always returns null.

var

 

 

multiPage = $find('<%=mpLawFirm.ClientID %>'

);

 

 

If I put this in a pageLoad() function, the control is found. If I create a function that I call later in the page, it always returns null. I have tried surrounding the script with the RadCodeBlock and RadScriptBlocks and they don't seem to help.

Any suggestions? Or any working samples that allow me to change the iframe's height based on the internal document's height?

Thanks in advance,
Jennifer

[Cori]

Hello Jennifer,

The reason you can only access it during the pageLoad event is because it's an ASP.NET Ajax control and it's javascript object is only completed during the pageLoad event. So if you were to attach a load event to the iFrames in the RadPageViews during pageLoad, you could set a method that would adjust the height. So something like this:

function pageLoad(){
     var multiPage = $find("<%=RadMultiPage1.ClientID %>");
     var i;
     for(i=0; i<multiPage.get_pageViews().get_count();i++)
     {
        $telerik.$(multiPage.get_pageViews().getPageView(i).get_element()).children().first().load(function(){UpdateMinHeight(this);});
     }
}

So this pretty much loops through all the PageViews, get's the iFrame and attaches a load event, which you can use to change the height the iFrame. In the event, I pass the iFrame object, so you can use it in your method.

I hope that helps.

[Helen]

Hello,

Please find below a sample how to change the iframe's height based on the window height:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="MultiPage1">

        <Tabs>

            <telerik:RadTab Text="Telerik" 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>

    <telerik:RadCodeBlock ID="CodeBlock1" runat="server">

        <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>
</telerik:RadCodeBlock>

Best wishes,
Helen
the Telerik team

[J. E.]

Thank you for the responses. I will try them out and hopefully resolve the issue. Just a quick question, I currently set the PageView contentURL in the tabstrip's TabClick event. The sample code seems to have the contentURL defined when setting up the tab strip. Do you foresee any problems setting the iframe's height this way?

Thanks,
Jennifer

[Helen]

Hi,

There shouldn't be a problem. Don't hesitate to contact us if you encounter some issue.

Greetings,
Helen
the Telerik team