Tab strip resize problem in Splitter

[Phani Alla]

Hi there,

I'm having a problem when resizing the splitter, my tabstrip/pageview's don't resize to 100%. I tried to use the OnClientResized event of the splitter to resize the tabstrip

function OnClientResized(sender, args) {
        var tabStrip = $find(baseID + "_radTabStripFunctions");

    //tabStrip.get_element().style.height = $find(baseID + "_radPaneFunctions").get_element().clientHeight;
    var multipage = $find(baseID + "_radMultiPageFunctions");
    multipage.get_element().style.height = $find(baseID + "_radPaneFunctions").get_element().clientHeight-tabStrip.get_element().offsetHeight + "px";
    multipage.get_element().style.height = "100%";
    var FuncPageView = multipage.get_pageViews().getPageView(0);
    var UDFPageView = multipage.get_pageViews().getPageView(1);
    FuncPageView.get_element().style.height = $find(baseID + "_radPaneFunctions").get_element().clientHeight;
    UDFPageView.get_element().style.height = $find(baseID + "_radPaneFunctions").get_element().clientHeight;
    //tabStrip.repaint();
}

If I try to set the height of tabstrip, it resizes but my pageviews are not displayed anymore, i just see white space below the tabs. if i try to resize the pageviews and the multipage, the height doesn't change. Here is a snippet of my aspx page. I want the content of radPaneFunctions to occupy 100% space when the Layout Pane is collapsed.

<telerik:RadSplitter id="radSplitterLayoutFunctions"  runat="server" orientation="Horizontal" Skin="Vista">
<telerik:RadPane id="LayoutPane" OnClientResized="OnClientResized" runat="server" Scrolling="None" Width="300px" Height="273px">
        <telerik:RadCodeBlock runat="server" ID="rcbLayout">
                <telerik:RadSplitter ID="radSplitterLayout" Skin="Vista" runat="server" Orientation="Horizontal">
                <telerik:RadPane ID="searchpane" runat="server" Scrolling="None" Height="25px">
                 <input type="text" id="<%=BaseID%>_txtSortSearchLayout" style="font-style:italic; width:275px" value="Search..." onfocus="if(this.value=='Search...'){value=''; style.fontStyle='normal'}" onkeyup="OnClientKeyPressingHandler('<%=rtvLayoutTree.ClientID %>',document.getElementById('<%=BaseID%>_txtSortSearchLayout'),'<%=hfSearchText.ClientID%>');" />
                 </telerik:RadPane>
                 <telerik:RadPane runat="server" ID="layouttreepane" Scrolling="Both">
                <telerik:RadTreeView  runat="Server" OnClientNodeDropping="onTreeViewNodeDropping" OnClientNodeDropped="onTreeViewNodeDropped" OnClientNodeExpanding="onClientNodeExpanding" OnClientNodeCollapsing="onClientNodeCollapsing" ID="rtvLayoutTree" EnableDragAndDrop="true" DragAndDropBetweenNodes="false" AllowDrag="true" AllowDrop="false"
                        MultipleSelect="true" OnClientNodeClicked="OnLayoutNodeClicked" EnableEmbeddedSkins="false" Skin="IUSASkin">
                </telerik:RadTreeView>
                </telerik:RadPane>
                </telerik:RadSplitter>
               </telerik:RadCodeBlock>
            </telerik:RadPane>
             <telerik:RadSplitBar id="RadSplitbar1" runat="server" CollapseMode="Both"></telerik:RadSplitBar>
            <telerik:RadPane id="radPaneFunctions" OnClientResized="OnClientResized" runat="server" Scrolling="None" Width="300px" Height="273px" >

                <telerik:RadTabStrip SelectedIndex="0" MultiPageID="radMultiPageFunctions" runat="server" Skin="Office2007" ID="radTabStripFunctions">
                    <Tabs>
                        <telerik:RadTab Width="120px" Font-Bold="true" runat="server" PageViewID="pageViewFunctions" Text="Functions" Selected="true"></telerik:RadTab>
                        <telerik:RadTab Width="180px" Font-Bold="true" runat="server" PageViewID="pageViewUDF" Text="User-Defined Functions"></telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="radMultiPageFunctions" Height="100%">
                    <telerik:RadPageView ID="pageViewFunctions" runat="server" Selected="true" Height="100%">
                    <telerik:RadSplitter ID="radSplitterFunctions"  Skin="Vista" runat="server" Orientation="Horizontal">
                <telerik:RadPane ID="searchfunctionspane" runat="server" Scrolling="None" Height="25px">
                <input type="text" id="<%=BaseID%>_txtSortSearchFunction" style="font-style:italic; width:275px" value="Search..." onfocus="if(this.value=='Search...'){value=''; style.fontStyle='normal'}" onkeyup="FunctionSearch('<%=rtvFunctionTree.ClientID %>',document.getElementById('<%=BaseID%>_txtSortSearchFunction'));" />
                </telerik:RadPane>

                 <telerik:RadPane runat="server" ID="functiontreepane" Scrolling="Both">
                <telerik:RadTreeView runat="Server" OnClientNodeDropping="onTreeViewNodeDropping" OnClientNodeDropped="onTreeViewNodeDropped" ID="rtvFunctionTree" OnClientNodeExpanding="onClientNodeExpanding" OnClientNodeCollapsing="onClientNodeCollapsing" EnableDragAndDrop="true" DragAndDropBetweenNodes="false" AllowDrag="true" AllowDrop="false"
                        MultipleSelect="true" EnableEmbeddedSkins="false" Skin="IUSASkin">
                </telerik:RadTreeView>
                </telerik:RadPane>
                </telerik:RadSplitter>
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="pageViewUDF" Height="100%">
                     <telerik:RadSplitter ID="radSplitterUDFs" Skin="Vista" runat="server" Orientation="Horizontal">
                <telerik:RadPane ID="udfoperationspane" runat="server" Scrolling="None" Height="25px">
                <table><tr><td>
                <asp:ImageButton runat="server" ID="imgBtnUDFDelete" OnClientClick="this.disabled=true;__doPostBack(this.name,'');" OnClick="imgBtnUDFDelete_Click" ImageUrl="../Assignment/imgs/01.png" style="border:0"/>
                </td><td>
                <table id="tblUDFName" style="visibility:hidden" runat="server">
                    <tr>
                        <td><asp:TextBox runat="server" ID="txtName"></asp:TextBox></td>
                        <td><asp:Button runat="server" ID="btnUpdateUDFName" OnClick="btnUpdateUDFName_Click" Font-Size="10px" Text="Update Name" /></td>
                    </tr>
                </table>
                </td></tr></table>
                </telerik:RadPane>
                 <telerik:RadPane runat="server" ID="udfstreepane" Scrolling="Both">
                        <telerik:RadTreeView CheckBoxes="true" MultipleSelect="false" runat="server" ID="rtvUDF" Skin="IUSASkin"  EnableEmbeddedSkins="false" OnClientNodeDropping="onTreeViewNodeDropping" OnClientNodeDropped="onTreeViewNodeDropped"
                        EnableDragAndDrop="true" OnClientNodeClicking="OnUDFNodeClicking" OnClientLoad="OnUDFClientLoad" DragAndDropBetweenNodes="false" AllowDrag="true" AllowDrop="true">
                        </telerik:RadTreeView>
                        </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>

                </telerik:RadPane>
                </telerik:RadSplitter>

Any help would be greatly appreciated.
Thank you,
Phani

[Svetlina Anati]

Hello Phani,
 

I am not completley sure what is the exact problem biut I assuem that it comes from the fact that you have a RadTabStrip in one of the RadPanes and at the same time you have a RadMultiPage which is set to 100% Height. This means that the MultiPage will occupy exactly 100% of the pane and because the tabstrip has also some height, it will push the multipage down with this height.

Basically, to solve this you should use some javascript to calculate the actual height of the multipage which should be 100% of the viewport substracted with the height of the tabstrip. However, I suggest to take advantage of the built in automatic calculations teh splitter provides and to insert an additional RadSplitter there - the first pane should have the height of the tabstrip and the second one should not have an explicit height and thus it will automatically calculate it.

Note, also the following things:

1) Do not set any sizes to the nested splitters if they are directly nested in a RadPane  - when a RadSplitter is directly nested in a RadPane, it automatically resizes itself to occupy 100% of the parent pane. If you set width, height, fullscreenmode, the splitters will make a lot of calculations to resize themselves and this is not necessary and slows down the performance significantly.

2)  If the nested splitters are not directly nested in a RadPane but in another element (in your case - page view), set their sizes and also set the ResizeWithParentPane property to false.

3)  If you have a Radpane in a vertical splitter do not set its height explicitly to 100% (respectively the width for horizontal splitter) due to similar reasons as explained in 1)

I hope that my explanations and suggestions are detailed enough and helpful and for your convenience I modified and attached your demo page to the thread - let me know how it goes.

 All the best,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.