RadSplitter and RadTabStrip

[Erik]

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>

[Vessy]

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

[Erik]

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

[Vessy]

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