Sticky pagination problem with Splitters and aspPanel

[Shlomi]

Hi
I have a problem, and describing it might be little complicated.
I have 3 different type of a Web-mail layout:

1. Preview pane on the right.
2. Preview pane at the bottom.
3. Disabled Preview pane.

My problem is like that: My pagination panel gets positioned wrong.
I have a splitters layout (web mail like) with titles, that are presented in the page using aspPanels.
These titles hurts the calculations of the splitter, and as a result the pagination bar get positioned wrong.
But in one layout of the screens - Bottom, the pagination bar gets positioned ok. It doesn't in two screens that have the same login - they r vertical. (please see attached files. The correct one is "at the bottom")

My .Net code is:

<div class="wrapper">
<telerik:RadSplitter ID="rsptMain" Runat="server" Skin="sunsetGreen" EnableAjaxSkinRendering="true" EnableEmbeddedSkins="false"  Width="100%" Height="100%" VisibleDuringInit="false">
    <telerik:RadPane ID="foldersPane" runat="server" Width="250" Height="100%" Scrolling="None">
        <telerik:RadSplitter ID="RadSplitter1" Runat="server" Skin="sunsetGreen" EnableEmbeddedSkins="false" EnableAjaxSkinRendering="true" EnableEmbeddedBaseStylesheet="false" Height="100%" Orientation="Horizontal" VisibleDuringInit="false">
            <telerik:RadPane ID="FolderTreePane" Width="250" runat="server" Scrolling="None">
                        <h2 class="PageLeftMainTitle" id="PageLeftMainTitle">Curriculus</h2>
                        <telerik:RadTreeView>........</telerik:RadTreeView>
            </telerik:RadPane>
                    <telerik:RadSplitBar ID="FolderPaneSplitBar" runat="server" CollapseMode="Backward" EnableResize="False" ></telerik:RadSplitBar>
                    <telerik:RadPane Width="250" Height="90" ID="BottomLeftMenuPane" runat="server" Scrolling="None" OnClientCollapsed="BottomLeftMenuPaneToggled" OnClientExpanded="BottomLeftMenuPaneToggled">
                        <uc1:BottomLeftMenu ID="BottomLeftMenu" runat="server" />
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="foldersSplitBar" runat="server" CollapseMode="Forward"></telerik:RadSplitBar>
            <telerik:RadPane ID="curriculumPane" runat="server" Height="100%" Scrolling=None>
<asp:Panel ID="pFolderInfoGrid" CssClass="CurriculusGridTitleEMenu" runat="server">
                    <h2>
                        <asp:Literal ID="ltFolderName" runat="server" Text="Todos filtros juntos"></asp:Literal>
                    </h2>
                    <div class="PainelDeLeitura" id="PainelDeLeituraButton">
                        <span class="subMenuTitle" onclick="ShowColumnHeaderMenu(event,'ReadPainel')">
                            <span>Painel de Leitura</span>
                        </span>
                    </div>
                </asp:Panel>
                <telerik:RadSplitter ID="rsptMainCurriculum" Runat="server" Skin="sunsetGreen" EnableAjaxSkinRendering="true" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" Width="100%" Height="100%" Orientation="Horizontal">
                    <telerik:RadPane ID="curriculumListPane" runat="server" CssClass="curriculumListPane" runat="server" Height="100%" Scrolling="None">
                        <telerik:RadGrid ID="rgridCurriculum" CssClass="rgridCurriculum" runat="server" AllowSorting="true" AllowPaging="true" PageSize="10" ViewStateMode="Enabled" OnNeedDataSource="rgridCurriculum_NeedDataSource" OnItemDataBound="rgridCurriculum_ItemDataBound" AllowMultiRowSelection="true" OnRowDrop="rgridCurriculum_RowDrop" Skin="sunsetGreen" EnableEmbeddedSkins="false" Height="100%">
                            <PagerStyle  Mode="NextPrevAndNumeric" />
                            <MasterTableView AutoGenerateColumns="false" DataKeyNames="Code" AllowPaging="true" TableLayout="Fixed">...........
                            </MasterTableView>
                            <ClientSettings EnableRowHoverStyle="true" AllowRowsDragDrop="true" EnablePostBackOnRowClick="false">
                                <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                                <ClientEvents OnRowDropping="rgridCurriculum_OnRowDropping" />
                                <ClientEvents OnRowDblClick="rgridCurriculum_OnRowDblClick" />
                                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                            </ClientSettings>
                        </telerik:RadGrid>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="curriculumSplitBar" runat="server" CollapseMode="Forward" Visible="false"></telerik:RadSplitBar>
                    <telerik:RadPane ID="curriculumViewPane" runat="server" Visible="false"></telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
</div>

My code block readability is terrible. I tried removing unnecessary parts from it.
the thing is that my asp:panel is inside the telerik:RadPane that has 100% and is holding the main big vertical splitter, and than under it the telerik:RadSplitter appears.

it looks like that

<telerik:RadPane
   <asp:Panel
   <telerik:RadSplitter

In the "at the bottom" everything works fine. The splitter calculate the height without the AspPanel height. But in the "on the right" & "disabled" screen it joins them.

Why? The order of my DOM is equall in the 3 files. What can create this difference?

I hope I was clear, and I hope my code was some how readable :)

Thanks for any help.
Shlomi.

[Dobromir]

Hi Shlomi,

When RadSplitter is nested inside another splitter, the child splitter inherits the width and height of its parent pane and resize and does not take into account its Width and Height properties. To disable this behavior you need to set ResizeWithParentPane="false" property to the nested splitter.

The experienced problem is due to the fact that inside a pane with ID curriculumPane is placed additional control along with the splitter and this is causing the content of the pane to exceed the its height. To avoid this problem you need to set HeightOffset property to the nested splitter to match the height of the additional element, e.g.:

........
<telerik:RadPane ID="curriculumPane" runat="server" Height="100%" Scrolling="None">
    <asp:Panel ID="pFolderInfoGrid" CssClass="CurriculusGridTitleEMenu" runat="server">
        <h2>
            <asp:Literal ID="ltFolderName" runat="server" Text="Todos filtros juntos"></asp:Literal>
        </h2>
        <div class="PainelDeLeitura" id="PainelDeLeituraButton">
            <span class="subMenuTitle" onclick="ShowColumnHeaderMenu(event,'ReadPainel')"><span>
                Painel de Leitura</span> </span>
        </div>
    </asp:Panel>
    <telerik:RadSplitter ID="rsptMainCurriculum" runat="server" Skin="sunsetGreen" EnableAjaxSkinRendering="true"
        EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" ResizeWithParentPane="false"
        Width="100%" Height="100%" HeightOffset="90"
        Orientation="Horizontal">
        <telerik:RadPane ID="curriculumListPane" runat="server" CssClass="curriculumListPane"
            Scrolling="None">
........

I hope this helps.

Best wishes,
Dobromir
the Telerik team