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

TabStrip multipage height not changing

3 Answers 65 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Rodrigo
Top achievements
Rank 1
Rodrigo asked on 08 Oct 2015, 10:54 AM

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.

 

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 13 Oct 2015, 08:13 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rodrigo
Top achievements
Rank 1
answered on 13 Oct 2015, 08:22 AM
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? 
0
Nencho
Telerik team
answered on 16 Oct 2015, 07:11 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TabStrip
Asked by
Rodrigo
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Rodrigo
Top achievements
Rank 1
Share this question
or