TabStrip multipage height not changing

[Rodrigo]

As showed on the piece of code bellow, I have a TabStrip with a multipage. When the page first loads, a grid is loaded. When the user clicks a row from the grid, a new tab opens with the details of that row.
 If I put the RadPageView to 100% height the grid is cut off as it's not adapting to the height of the grid. If I put a static value, it doesn't adapt to different window sizes. 

I tried to correct this issue using the javascript posted bellow. While it works when I resize the window, when the page first loads, it's not resizing. If you check the line 9. of the JS, you can see that on the (document).ready I try to force the new size but nothing happens.

You can see what is happening on the 2 files I attached. Is there anyway I can resolve this issue?

 

<telerik:RadTabStrip
    ID="tabContactsList"
    runat="server"
    MultiPageID="ContactsPagesViews"
    Orientation="HorizontalTop"
    SelectedIndex="0">
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="ContactsPagesViews" ScrollBars="Auto" Height="100%"
    RenderMode="Lightweight" runat="server"
    OnPageViewCreated="ContactsPagesViews_PageViewCreated"
    SelectedIndex="0">
    <telerik:RadPageView ID="RadPageView1" runat="server" Height="100%">
        <telerik:RadGrid
            runat="server"
            ID="RadGrid1"
            DataSourceID="dtContactsList"
            AllowFilteringByColumn="True"
            AllowPaging="True"
            AutoGenerateColumns="False"
            Height="100%"
            BorderWidth="0px"
            AllowSorting="True"
            Style="outline: none"
            EnableLinqExpressions="False"
            ShowGroupPanel="true"
            FilterMenu-Enabled="true"
            FilterType="Classic"
            OnItemCommand="RadGrid1_ItemCommand"
            OnItemDataBound="RadGrid1_ItemDataBound" >
            <ExportSettings><Pdf PageWidth=""></Pdf></ExportSettings>
            <ClientSettings
                Scrolling-AllowScroll="false"
                Scrolling-UseStaticHeaders="true"
                Selecting-AllowRowSelect="true"
                EnablePostBackOnRowClick="true"
                AllowDragToGroup="true"
                EnableRowHoverStyle="true">
                <Selecting AllowRowSelect="True" />
                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="2"></Scrolling>
            </ClientSettings>
            <PagerStyle Mode="NumericPages" PageSizeControlType="None" ></PagerStyle>
            <MasterTableView TableLayout="Fixed" Width="100%" ClientDataKeyNames="ID" PageSize="16">
                <Columns>
                    <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" AllowFiltering="false">
                        <ItemStyle Width="40px" />
                        <HeaderStyle Width="40px" />
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBox1" runat="server" OnCheckedChanged="ToggleRowSelection" AutoPostBack="True" />
                        </ItemTemplate>
                        <HeaderTemplate>
                            <asp:CheckBox ID="headerChkbox" runat="server" OnCheckedChanged="ToggleSelectedState"
                                AutoPostBack="True" />
                        </HeaderTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="Id" DataType="System.Int32" HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerId_HeaderText %>" AllowFiltering="false" UniqueName="Id" Display="false" HeaderStyle-Width="25px">
                        <ColumnValidationSettings>
                            <ModelErrorMessage Text="" />
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Name" FilterControlAltText="Filter Name column" HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerName_HeaderText %>" SortExpression="Name" UniqueName="Name" DataType="System.String">
                        <ColumnValidationSettings>
                            <ModelErrorMessage Text="" />
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="City" DataType="System.String" FilterControlAltText="Filter City column" HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerCity_HeaderText %>" SortExpression="City" UniqueName="City" ItemStyle-Width="15%" HeaderStyle-Width="15%">
                        <ColumnValidationSettings>
                            <ModelErrorMessage Text="" />
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Country.Name" DataType="System.String" FilterControlAltText="Filter Country column" HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerCountry_HeaderText %>" SortExpression="Country" UniqueName="Country" ItemStyle-Width="15%" HeaderStyle-Width="15%">
                        <ColumnValidationSettings>
                            <ModelErrorMessage Text="" />
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Address" FilterControlAltText="Filter Address column" HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerAddress_HeaderText %>" SortExpression="Address" UniqueName="Address" DataType="System.String" ItemStyle-Width="25%" HeaderStyle-Width="25%">
                        <ColumnValidationSettings>
                            <ModelErrorMessage Text="" />
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Phone" DataType="System.String" FilterControlAltText="Filter Phone column" HeaderText="<%$ Resources:ContactManager.aspx, lblContactManagerPhone_HeaderText %>" SortExpression="Phone" UniqueName="Phone" ItemStyle-Width="10%" HeaderStyle-Width="10%">
                        <ColumnValidationSettings>
                            <ModelErrorMessage Text="" />
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <FilterMenu CssClass="RadFilterMenu_CheckList">
            </FilterMenu>
        </telerik:RadGrid>
    </telerik:RadPageView>
</telerik:RadMultiPage>
<asp:ObjectDataSource ID="dtContactsList" runat="server" DeleteMethod="DeleteContact" SelectMethod="GetAllContacts" TypeName="LCG.Web.IAMS.AWA.Pages.ContactManager">
    <SelectParameters>
        <asp:ControlParameter ControlID="ctl00$ContentPlaceHolder1$RadTreeView1" Name="priorityId" PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

 

 

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
    <script type="text/javascript">
            $(document).ready(function () {

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

                 ResizePage($find('<%= ContactsPagesViews.ClientID %>'))
            });

        function ResizePage(multiPage) {
            for (i = 0; i < multiPage.get_pageViews().get_count() ; i++) {
                var pageView = multiPage.get_pageViews().getPageView(i);
                pageView.get_element().style.height = ($(window).height() - 80) + 'px';
            }
}
        </script>
</telerik:RadScriptBlock>

 

Thank you.

 

[Nencho]

Hello Rodrigo,

From the attached images, we can see that you are using the RadSplitter, where the TabStrip, the MultiPage and the nested controls are placed. This is probably causing the experienced problematic behavior at your end.

This is why. I would like to ask you to send us the entire markup of the page (along with any custom css styles used) so we could revise it locally. Meanwhile, you can try to call the ResizePage method at the OnClientLoad client-side event of the RadSplitter. Thus, you can ensure that the logic for resizing will be called when the RadSplitter had finished rendering its content.

function OnClientLoad(sender) {
                 ResizePage($find('<%= ContactsPagesViews.ClientID %>'))
             }

Regards,
Nencho
Telerik

[Rodrigo]

I will prepare a zip file with what you requested. In the meanwhile, I want to try out the OnClientLoad but I have a problem. The RadSplitter is located in the MasterPage. Is there a way to access the ContactsPagesViews.ClientID from the MasterPage? 

[Nencho]

Hello Rodrigo,

I am afraid that you cannot access the ContactsPagesViews.ClientID from the MasterPage, because in such structure you would need to hardcode the ID of the control.

Regards,
Nencho
Telerik