TabStrip multipage height not changing

4 posts, 0 answers
  1. Rodrigo
    Rodrigo avatar
    6 posts
    Member since:
    Oct 2015

    Posted 08 Oct 2015 Link to this post

    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.

     

  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 13 Oct 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rodrigo
    Rodrigo avatar
    6 posts
    Member since:
    Oct 2015

    Posted 13 Oct 2015 in reply to Nencho Link to this post

    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? 
  5. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 16 Oct 2015 Link to this post

    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
Back to Top