RadSplitter and RadTabStrip

4 posts, 0 answers
  1. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 06 Apr 2013 Link to this post

    Hi all,

    I see a lot of implementations and other chatter about this, but I never see full solutions. I've been at it this afternoon, but not for the first time. The best way to go, I found, is a splitter with 2 stacked panes. The top pane containing the radTabStrip, the bottom (body) pane with height=100% containing the RadMultiPage.

    Problem is that in my application the user can select the skin. The top pane can be set to height=40px, but with a Touch skin this is not enough. Also, I now have a RadTabStrip with two rows, so the height is heigher.

    so, the top pane should ajust it's height to the RadTabStrip, the bottom pane should fille up the splitter.

    I have this kind of working using:
    height: auto !important; for the top pane (useing CssClass)
    but all kind of problem start happening here. The RadMultiPage is not showing, or there are no scrollbars while the height is heigher than screen. 

    I've also tried javascript. problem here is that RadTabStrip.offsetHeight always returnes the wrong offset the first time. in black skin ie it always returns 76px at load (all kinds of onClientLoad tried, splitter, pane, page and Splitter's OnClientResized, OnClientLoaded)
    while the real offsetHeight = 53px. This happens with the glow skin to: 101 in stead of 63.
    The second time (postback or resize browser) it returns the correct value.

    So... What's the best appraotch?

    ps: in my secenario there is always a postback. The splitter and script code are in a usercontrol that loads after a postback.

    Erik


    the aspx code:

    <style type="text/css">
        .SystemSettingsTable
        {
            border: 0;
        }
        .SystemSettingsTable tr
        {
            height: 35px;
        }
         
        .AutoHeightPane
        {
            height: auto !important;
        }
        .FullHeightPane
        {
            height: 100% !important;
        }
    </style>
    <telerik:RadScriptBlock ID="RadCodeBlock_Proovit_NetBas_Modules_SystemModules_SystemSettings" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            //alert('AA');
            //var myPane = $get('<%= RadPane1.ClientID %>');
            //var myMultipage = $get('<%= RadMultiPage1.ClientID %>');
            //var myTabStrip = $get('<%= tabStrip1.ClientID %>');
            //alert(myTabStrip.offsetHeight);
     
            //alert('AAx');
            $(document).ready(function () {
                //var myPane = $get('<%= RadPane1.ClientID %>');
                //var myMultipage = $get('<%= RadMultiPage1.ClientID %>');
                var myTabStrip = $get('<%= tabStrip1.ClientID %>');
                //alert(myTabStrip.offsetHeight);
                //var newHeight = (myPane.offsetHeight - myTabStrip.offsetHeight);
                //var myGrid = $get('<%= tbl_AccountSettings_Gerneral.ClientID %>');
                //myMultipage.style.height = newHeight + 'px';
                //myGrid.style.height = (newHeight - 60) + 'px';
     
                // Within the ready function...
                //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
                //    alert('CC');
                //});
     
            });
     
            function TestOffsetHeight(sender, Args) {
     
                alert(sender.id);
                var myTabStrip = $get('<%= tabStrip1.ClientID %>');
                alert(myTabStrip.offsetHeight);
     
            }
            //]]>
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadSplitter ID="RadSplitter_Module" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Width="100%" Height="100%" Orientation="Horizontal" VisibleDuringInit="false" LiveResize="False" runat="Server" OnClientResized="TestOffsetHeight" OnClientLoaded="TestOffsetHeight">
        <telerik:RadPane ID="RadPane1" Width="100%" Scrolling="None" CssClass="AutoHeightPane" runat="server">
            <telerik:RadTabStrip ID="tabStrip1" runat="server" Style="width: 100%;" MultiPageID="RadMultiPage1" SelectedIndex="0" OnClientLoad="TestOffsetHeight">
                <Tabs>
                    <telerik:RadTab Text="Account Settings" Selected="True" runat="server">
                        <Tabs>
                            <telerik:RadTab Text="General" Selected="True" PageViewID="RadPageView_AccountSettings_Gerneral" runat="server" />
                            <telerik:RadTab Text="Page2" PageViewID="RadPageView_AccountSettings_Page2" runat="server" />
                        </Tabs>
                    </telerik:RadTab>
                    <telerik:RadTab Text="User Group Settings" runat="server">
                        <Tabs>
                            <telerik:RadTab Text="General" PageViewID="RadPageView_UserGroupSettings_Gerneral" runat="server" />
                            <telerik:RadTab Text="Menu" PageViewID="RadPageView_UserGroupSettings_Menu" runat="server" />
                        </Tabs>
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </telerik:RadPane>
        <telerik:RadPane ID="RadPane2" Width="100%" Height="100%" CssClass="FullHeightPane" Scrolling="None" BorderColor="Red" BorderStyle="Solid" BorderWidth="1px" BackColor="Yellow" runat="server">
            <telerik:RadMultiPage ID="RadMultiPage1" Height="100%" CssClass="FullHeightPane" SelectedIndex="0" ScrollBars="Both" runat="server">
                <telerik:RadPageView ID="RadPageView_AccountSettings_Gerneral" Selected="True" runat="server">
                    <table id="tbl_AccountSettings_Gerneral" border="0" cellpadding="0" cellspacing="0" class="SystemSettingsTable" runat="server">
                        <colgroup>
                            <col style="white-space: nowrap;" />
                            <col style="width: 15px;" />
                            <col style="color: black;" />
                        </colgroup>
                        <tr>
                            <td>
                                <nbui:Label ID="lbl_Account" Text="Account" TextSurfix=":" LanguageKey="General.Account" runat="server" />3
                            </td>
                            <td>
                            </td>
                            <td>
                                <telerik:RadDropDownTree ID="RadDropDownTree_Accounts" AutoPostBack="True" DataTextField="Name" DataFieldID="AccountId" DataFieldParentID="ParentAccountId" DataValueField="AccountId" Width="360px" DefaultMessage="(Please select...)" ExpandNodeOnSingleClick="false" FullPathDelimiter=" » " runat="server">
                                    <DropDownSettings Width="360px" Height="400px" />
                                </telerik:RadDropDownTree>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <nbui:Label ID="lbl_AccountMainUser" Text="Account's main user" TextSurfix=":" LanguageKey="General.AccountsMainUser" runat="server" />
                            </td>
                            <td />
                            <td>
                                <telerik:RadDropDownList ID="rdl_SuperUser" DataTextField="FullNameLMF" DataValueField="ContactId" DefaultMessage="(Please select)" Width="360px" DropDownWidth="360" DropDownHeight="400" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="9">
                                <telerik:RadButton ID="rbt_SaveAccountSettings" Text="Save Account Settings" ButtonType="LinkButton" Font-Bold="true" Style="margin-right: 20px;" Icon-PrimaryIconCssClass="rbSave" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="9">
                                <hr />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <nbui:Label ID="lbl_UserGroup" Text="User group" TextSurfix=":" LanguageKey="General.UserGroup" runat="server" />
                            </td>
                            <td>
                            </td>
                            <td>
                                <telerik:RadDropDownTree ID="RadDropDownTree_UserGroups" AutoPostBack="True" DataTextField="Name" DataFieldID="UserGroupId" DataFieldParentID="ParentUserGroupId" DataValueField="UserGroupId" Width="360px" DefaultMessage="(Please select)" ExpandNodeOnSingleClick="False" FullPathDelimiter=" » " runat="server">
                                    <DropDownSettings Width="360px" Height="400px" AutoWidth="Enabled" />
                                </telerik:RadDropDownTree>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <nbui:Label ID="lbl_Options" Text="Options" TextSurfix=":" LanguageKey="General.Options" runat="server" />
                            </td>
                            <td />
                            <td>
                                <telerik:RadButton ID="btn_HasMenu" ToggleType="CustomToggle" ButtonType="StandardButton" AutoPostBack="false" Width="100px" runat="server">
                                    <ToggleStates>
                                        <telerik:RadButtonToggleState Text="Menu" Value="1" />
                                        <telerik:RadButtonToggleState Text="No Menu" Value="0" />
                                        <telerik:RadButtonToggleState Text="[Like Parent]" Value="^" />
                                    </ToggleStates>
                                </telerik:RadButton>
                                <telerik:RadButton ID="btn_HasLeftPanes" ToggleType="CustomToggle" ButtonType="StandardButton" AutoPostBack="false" Width="100px" runat="server">
                                    <ToggleStates>
                                        <telerik:RadButtonToggleState Text="Left Panes" Value="1" />
                                        <telerik:RadButtonToggleState Text="No Left Panes" Value="0" />
                                        <telerik:RadButtonToggleState Text="[Like Parent]" Value="^" />
                                    </ToggleStates>
                                </telerik:RadButton>
                                <telerik:RadButton ID="btn_HasLeftNavigation" ToggleType="CustomToggle" ButtonType="StandardButton" AutoPostBack="false" Width="100px" runat="server">
                                    <ToggleStates>
                                        <telerik:RadButtonToggleState Text="Left Navigation" Value="1" />
                                        <telerik:RadButtonToggleState Text="No Left Navigation" Value="0" />
                                        <telerik:RadButtonToggleState Text="[Like Parent]" Value="^" />
                                    </ToggleStates>
                                </telerik:RadButton>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="9">
                                  
                            </td>
                        </tr>
                        <tr>
                            <td colspan="9">
                                <telerik:RadTreeList ID="RadTreeList_MenuRights" DataKeyNames="MenuItemId" ParentDataKeyNames="ParentMenuItemId" Width="800px" Height="600px" AutoGenerateColumns="false" AllowMultiItemSelection="true" AllowSorting="true" AllowNaturalSort="true" runat="server">
                                    <Columns>
                                        <telerik:TreeListBoundColumn DataField="Caption" UniqueName="Caption" HeaderText="Caption" HeaderStyle-Width="100px" ItemStyle-Wrap="false" />
                                        <telerik:TreeListTemplateColumn DataField="Toggle" UniqueName="Toggle" HeaderText="Option" HeaderStyle-Width="120px" HeaderStyle-HorizontalAlign="Center" ItemStyle-Wrap="false" ItemStyle-Height="20px">
                                            <ItemTemplate>
                                                <telerik:RadButton ID="btn_MenuItemToggleState" ToggleType="CustomToggle" ButtonType="StandardButton" AutoPostBack="false" Width="70px" runat="server">
                                                    <ToggleStates>
                                                        <telerik:RadButtonToggleState Text="YES" Value="1" />
                                                        <telerik:RadButtonToggleState Text="NO" Value="0" />
                                                        <telerik:RadButtonToggleState Text="[Parent]" Value="^" />
                                                    </ToggleStates>
                                                </telerik:RadButton>
                                                [<asp:Label ID="lbl_TestLabel" Text="?" runat="server" />]
                                            </ItemTemplate>
                                        </telerik:TreeListTemplateColumn>
                                        <telerik:TreeListBoundColumn DataField="Code" UniqueName="Code" HeaderText="Code" HeaderStyle-Width="100px" ItemStyle-Wrap="false" />
                                        <telerik:TreeListBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name" HeaderStyle-Width="150px" ItemStyle-Wrap="false" />
                                        <telerik:TreeListBoundColumn DataField="MenuItemId" UniqueName="Id" HeaderText="Id" HeaderStyle-Width="40px" HeaderStyle-HorizontalAlign="Right" HeaderStyle-ForeColor="GrayText" ItemStyle-HorizontalAlign="Right" ItemStyle-ForeColor="GrayText" ItemStyle-Font-Size="Smaller" />
                                    </Columns>
                                    <ClientSettings>
                                        <Selecting AllowItemSelection="true" AllowToggleSelection="true" UseSelectColumnOnly="true" />
                                        <Scrolling AllowScroll="false" SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="400px" />
                                    </ClientSettings>
                                </telerik:RadTreeList>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="9">
                                <telerik:RadButton ID="rbt_SaveUserGroupSettings" Text="Save User Group Settings" ButtonType="LinkButton" Font-Bold="true" Style="margin-right: 20px;" Icon-PrimaryIconCssClass="rbSave" runat="server" />
                            </td>
                        </tr>
                    </table>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView_AccountSettings_Page2" runat="server">
                    [RadPageView_AccountSettings_Page2]
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView_UserGroupSettings_Gerneral" runat="server">
                    [RadPageView_UserGroupSettings_Gerneral]
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView_UserGroupSettings_Menu" runat="server">
                    [RadPageView_UserGroupSettings_Menu]
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </telerik:RadPane>
    </telerik:RadSplitter>

  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 11 Apr 2013 Link to this post

    Hi Erik,

    In the described scenario it is expected from the Splitter to behave incorrectly, because the using of the height:auto CSS style is highly not recommended and usually leads to such issues.

    The approach that I would recommend you to use, is to resize the Panes manually, whenever the skin is changed. It could be done as in the code behind, as on the client:
    function ResizeOnSkinChange() {
        var tabstripHeight = $find('<%= tabStrip1.ClientID %>').get_element().scrollHeight;
        var upperPane = $find('<%= RadPane1.ClientID %>');
        var bottomPane = $find('<%= RadPane2.ClientID %>');
        var splitter = $find('<%= RadSplitter_Module.ClientID %>');
        upperPane.set_height(tabstripHeight);
        bottomPane.set_height(splitter.get_height() - upperPane.get_height());
    }

    If you want the height of the bottom pane to remains in percentages you will need to make the calculations server-side:
    if (tabStrip1.Skin == "MetroTouch" || tabStrip1.Skin == "BlackMetroTouch") //etc.
        RadPane1.Height = Unit.Pixel(88);
    else
        RadPane1.Height = Unit.Pixel(53);
     
    RadPane2.Height = Unit.Empty;

    For convenience, I am attaching a sample page, demonstrating the first approach. The resize happens after click of the "Change skin" button in RadPane2.

    Regards,
    Veselina Raykova
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 11 Apr 2013 Link to this post

    Hi Veselina,

    Thanks for the effort and code.

    I've done some extensive testing and found that the initial value of the client side height of the TabStrip is ALWAYS wrong at the first time the page is loaded.

    I've tried every available event, but I ALWAYS get 101px (for Glow skin) the first load time. There is NO way to get the real height of 63px in the first load run. When you click your button, or do a postback, it is 63.

    This happens for:
        tabStrip1.get_element().scrollHeight
    and
        tabStrip1.offsetHeight

    Erik
  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 16 Apr 2013 Link to this post

    Hi Erik,

    The right event where you can take the TabStrip height is the Splitter's OnClientLoad event. The firing of this event ensures that all of its children are loaded, so you could manipulate their height.

    I have attached a very simplified page, which is calculating the TabStrip's height in this event, so you could examine on your side how it behaves after setting different skins to the TabStrip.

    Please, give it a try and let me know if it is working for you.

    Regards,
    Veselina Raykova
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top