Resizing RadPageView inside RadMultiPage

[Rodrigo]

I have a RadMultiPage with multiple RadPageView, some of which are created dynamically. The page starts with one RadPageView and the user can add more via a button. The initial code is something like the one bellow.

<telerik:RadMultiPage ID="ContactsPagesViews" ScrollBars="Auto" Height="100%"
        RenderMode="Lightweight" runat="server"
        OnPageViewCreated="ContactsPagesViews_PageViewCreated"
        SelectedIndex="0">
        <telerik:RadPageView ID="RadPageView1" runat="server" Height="600px">
            more elements here
    </telerik:RadPageView>
</telerik:RadMultiPage>

I also have some code to resize my RadPageViews to fit the size of my window. For this I use the following code:

01.<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
02.    <script type="text/javascript">
03.            $(document).ready(function () {
04.
05.                $(window).resize(function () {
06.                    ResizePage($find('<%= ContactsPagesViews.ClientID %>'))
07.                });
08.
09.                 ResizePage($find('<%= ContactsPagesViews.ClientID %>'))
10.            });
11.
12.        function ResizePage(multiPage) {
13.            for (i = 0; i < multiPage.get_pageViews().get_count() ; i++) {
14.                var pageView = multiPage.get_pageViews().getPageView(i);
15.                pageView.get_element().style.height = ($(window).height() - 80) + 'px';
16.            }
17.}
18.        </script>
19.</telerik:RadScriptBlock>

 

The Resizing is working really great but the first time the page is loaded the initial RadPageView is not resized. You can see line 9. where I'm trying to force it but it only resizes if I change the size of the window. Is there anyway for this to work?

 Thank you.

[Nencho]

Hello Rodrigo,

There could be a slight delay in the calculation of the initial height of the PageView, which could be applied at a later stage, then you are setting in. This is why, I would suggest you to place the ResizePage in a slight timeout and test the behavior again.

Regards,
Nencho
Telerik

[Rodrigo]

Hello Nencho,

 I didn't mention in my post but I already tried doing that with the following:

$(document).ready(function () {
    $(window).resize(function () {
        ResizePage($find('<%= ContactsPagesViews.ClientID %>'));
    });

    $(window).setTimeout(function () {
        ResizePage($find('<%= ContactsPagesViews.ClientID %>'));
    }, 5000); //big number here just to try it out
});

Another thing I tried was accessing directly to the rendered HTML ID's and setting the size. This worked but it's far from ideal and want to search for some other solution

$(document).ready(function () {
    $(window).resize(function () {
        ResizePage($find('<%= ContactsPagesViews.ClientID %>'));
    });

    $("#ctl00_ContentPlaceHolder2_ContactsPagesViews").height('100%');
    $("#ContentPlaceHolder2_RadPageView1").height('100%');
    $("#ctl00_ContentPlaceHolder2_RadGrid1_GridData").height($(window).height() - 210);
});

Any other ideas are more than welcome

 Thank you,

Rodrigo

 

[Rodrigo]

Anothing thing.

 I created the same post here since I though it would be a better place for it but couldn't delete this one.

[Nencho]

Hello Rodrigo,

In order to avoid duplication, I would like to ask you to continue the correspondence in the other (the referenced) forum thread.

Regards,
Nencho
Telerik