Resizing issues with nested Splitters/Panes in UI for ASP.NET AJAX Splitter

Nick

13 posts

Member since:
Oct 2007

Posted 18 Mar 2008 Link to this post

In my development, I've run into situations whenin certain panes are collapsed and their containing splitters/panes get resized. When these panes get expanded again, their contents remain the same size as before they had been collapsed even though the pane itself has grown in size.

For a clearer explanation of the issue, I've whipped up a little example using three levels of nested panes/splitters. If someone could take a look at it and let me know if there's some way I can prevent this from happening, I'd appreciate it.

    
            <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="RadTabStrip.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
                <script type="text/javascript">  
        
                    function toggle(pane){  
        
                        pane = $find(pane);  
        
                        if (!pane) return;  
        
                        if (pane.get_Collapsed()){  
        
                            pane.expand(Telerik.Web.UI.SplitterDirection.Forward);  
        
                        } else {  
        
                            pane.collapse(Telerik.Web.UI.SplitterDirection.Forward);  
        
                        }  
        
                    }  
        
                </script> 
        
            </head> 
        
            <body scroll="no">  
        
                <form id="form1" runat="server">  
        
                <div> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                    <telerik:RadSplitter ID="LeftRightSplitter" runat="server" FullScreenMode="true" Orientation="Vertical">  
        
                        <telerik:RadPane ID="Left" runat="server" Scrolling="None">  
        
                            <telerik:RadSplitter ID="TopBottomSplitter" runat="server" Orientation="Horizontal">  
        
                                <telerik:RadPane ID="Top" runat="server" BackColor="Red" Scrolling="None">  
        
                                    <telerik:RadSplitter ID="InnerSplitter" ResizeWithParentPane="true" runat="server" Width="100%" Height="100%" Orientation="Horizontal">  
        
                                        <telerik:RadPane ID="InnerPane" runat="server"  BackColor="Silver">  
        
                                        </telerik:RadPane>     
        
                                    </telerik:RadSplitter> 
        
                                </telerik:RadPane> 
        
                                <telerik:RadSplitBar ID="TopBottomSplitBar" runat="server" /> 
        
                                <telerik:RadPane ID="Bottom" runat="server" BackColor="Gold" Scrolling="None">  
        
                                </telerik:RadPane> 
        
                            </telerik:RadSplitter> 
        
                        </telerik:RadPane> 
        
                        <telerik:RadSplitBar ID="LeftRightSplitBar" runat="server" /> 
        
                        <telerik:RadPane ID="Right" runat="server" Scrolling="None">  
        
                            This page is split (using a RadSplitter/SplitBar) into two halves verticaly (Pane IDs: "Left" & "Right"). <br /> 
        
                            The left half of the page is split again into two halves horizontaly (Pane IDs: "Top" & "Bottom"). The pane "Top" is colored <span style="color:red;">Red</span> and the pane "Bottom" is colored <span style="color:gold;">Gold</span>. <br /> 
        
                            The upper-left pane ("Top") contains a RadSplitter (width/height 100%), which contains one pane (Pane ID: "InnerPane"), colored <span style="color:silver;">Silver</span>.<br /> 
        
                            <br /> 
        
                            <b>Repro Steps:</b> 
        
                            <ol> 
        
                            <li>Collapse the Upper-Left pane by clicking <a style="color:blue; cursor:pointer;" onclick="toggle('Top');">Here</a></li>  
        
                            <li>Drag the vertical splitter to the right (increase the size of the left panes)</li> 
        
                            <li>Expand the Upper-Left pane by clicking <a style="color:blue; cursor:pointer;" onclick="toggle('Top');">Here</a>.</li> 
        
                            </ol> 
        
                            <br /> 
        
                            <b>Expected Result:</b><br /> 
        
                            The splitter/pane contained inside the upper-left pane (ID: "Top") should resize along with the upper left pane itself. Only the Silver pane should be visible.  
        
                            <br /> 
        
                            <br /> 
        
                            <b>Actual Result:</b><br /> 
        
                            The inner splitter/pane remain the same size as when its containing panel was collapsed, while its containing panel adjusts to the new size (shown by the visibility of the red pane). Resizing the horizontal splitter has no effect, while resizing the vertical splitter fixes the issue.  
        
                        </telerik:RadPane> 
        
                    </telerik:RadSplitter> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Svetlina Anati

Admin

2795 posts

Posted 21 Mar 2008 Link to this post

Hi Nick,

I tested your sample code and was able to reproduce the problem. First I strongly recommend you to set all your splitters' sizes at least in percentages because the sizes calculation of nested splitters at runtime is a very complicated process. What I can suggest to improve the resizing behavior is:

Implement a javascript function which will force resizing of nested splitters and execute it in the load event of your main splitter.
We recently found a problem with the VisibleDuringInit property when used with nested RadSplitters. The problem that I refer to is the following - the nested RadSplitter initializes first and becomes visible. After that, the parent RadSplitter calculates its size (at this point it is not visible) and resizes its child splitter (at this point it is visible). We have prepared a workaround that you can use for the time being until we are able to fix the problem.

You can find your project with these modifications applied in the attached archive file.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

NestedSplitters.zip

Lyle Groome

22 posts

Member since:
Dec 2005

Posted 26 Mar 2008 Link to this post

I could really use some help getting the following working with nested splitters across MasterPages/ContentPage:

I have a MasterPage with a FullScreen Horizontal Splitter with 2 panes.
In my Content Page (in the "bodyContent" ContentPlaceHolder) contains a 2-pane horizontal splitter where the bottom pane contains a RadGrid that I want to be 100% height and width.

Currently the pane with the grid overflows the sides of the browser which I had thought the MasterPage's Splitter was enforcing the boundaries for.

MASTERPAGE

<telerik:RadSplitter ID="RadSplitter1" runat="server"

FullScreenMode="true" Orientation="Horizontal" LiveResize="true"

BorderStyle="None" BorderSize="0" BorderColor="Transparent">

<telerik:RadPane ID="masterHeaderPane" runat="server"

Height="80px" Scrolling="None" Locked="true" CssClass="masterHeaderPane">

<%-- Page Header --%>

<asp:Panel ID="pageHeader" runat="server" CssClass="pageHeader">

<tr>

<td>

<asp:ImageButton ID="lnkHome" runat="server" AlternateText="Logo" ToolTip="Go To Home Page" CssClass="productLogo" ImageAlign="AbsMiddle" ImageUrl="~/Images/Logo.png" BorderStyle="None" BorderWidth="0px" />

</td>

<asp:Label ID="lblContextTitle" runat="server" Text="context label" CssClass="contextTitle" />

</td>

</tr>

</table>

</asp:Panel>

<%-- Main menu Here --%>

</telerik:RadPane>

<telerik:RadPane ID="masterContentPane" runat="server" CssClass="masterContentPane">

<asp:ContentPlaceHolder id="bodyContent" runat="server" />

</telerik:RadPane>

</telerik:RadSplitter>

CONTENTPAGE

<asp:Content ID="Content2" ContentPlaceHolderID="bodyContent" Runat="Server">

<table style="padding:0 0 2 2" width="100%">

<tr>

<td>

<asp:Image runat="server" ID="imgFormIcon" ImageUrl="~/Images/MenuItemIcons/ACRRules.png" AlternateText="" ImageAlign="AbsMiddle" Style="margin-right: 10px;" />

<asp:Label ID="FormTitle" runat="server" SkinID="FormTitle" style="font-family:Arial; font-size:16pt; font-weight:bold;">Automatic Course Request Rules</asp:Label>

</td>

<td valign="bottom" align="right" nowrap="nowrap">

<asp:LinkButton ID="lnkToggleFilterPane" runat="server" Text="<img src='/SilkAdministration/Images/advfiltersort.gif' originalAttribute="src" originalPath="/SilkAdministration/Images/advfiltersort.gif" originalAttribute="src" originalPath="/SilkAdministration/Images/advfiltersort.gif" originalAttribute="src" originalPath="/SilkAdministration/Images/advfiltersort.gif" originalAttribute="src" originalPath="/SilkAdministration/Images/advfiltersort.gif" originalAttribute="src" originalPath="/SilkAdministration/Images/advfiltersort.gif" originalAttribute="src" originalPath="/SilkAdministration/Images/advfiltersort.gif" border='0' title='Toggle Showing/Hiding the Advanced Grid Filter/Sort Pane' align='absMiddle' alt='' />Adv. Sort/Filter" ToolTip="Toggle Showing/Hiding the Advanced Grid Filter/Sort Pane" OnClientClick="ToggleShowFilter();return false;" CssClass="gridLink" />

</td>

</tr>

</table>

<telerik:RadSplitter id="Radsplitter1" runat="server" height="470px" width="100%" Skin="WebBlue" Orientation="Horizontal" LiveResize="true" BorderStyle="None" BorderSize="0" BorderWidth="0" BorderColor="Transparent">

<telerik:RadPane id="FilterPane" runat="server" MaxHeight="80" Height="80" OnClientCollapsed="ClientCollapsed" OnClientExpanded="ClientExpanded" Collapsed="true">

<table class="fieldlabelSmall" width="100%" cellpadding="0" style="padding:0px 5px 0px 5px;">

<tr>

<td valign="top">

Column:

<br />

<asp:DropDownList SkinID="GridItemField" ID="lstCol1" runat="server" style="margin:1px" ToolTip="Select a column to sort and/or filter on" /><br />

<asp:DropDownList SkinID="GridItemField" ID="lstCol2" runat="server" style="margin:1px" ToolTip="Select a column to sort and/or filter on" /><br />

<asp:DropDownList SkinID="GridItemField" ID="lstCol3" runat="server" style="margin:1px" ToolTip="Select a column to sort and/or filter on" />

</td>

<td valign="top">

Sort:

<br />

<asp:DropDownList SkinID="GridItemField" ID="lstColSort1" runat="server" style="margin:1px" ToolTip="None = no sort">

<asp:ListItem Value="None" Selected="True">No Sort</asp:ListItem>

<asp:ListItem Value="Ascending">Ascending</asp:ListItem>

<asp:ListItem Value="Descending">Descending</asp:ListItem>

</asp:DropDownList><br />

<asp:DropDownList SkinID="GridItemField" ID="lstColSort2" runat="server" style="margin:1px" ToolTip="None = no sort">

<asp:ListItem Value="None" Selected="True">No Sort</asp:ListItem>

<asp:ListItem Value="Ascending">Ascending</asp:ListItem>

<asp:ListItem Value="Descending">Descending</asp:ListItem>

</asp:DropDownList><br />

<asp:DropDownList SkinID="GridItemField" ID="lstColSort3" runat="server" style="margin:1px" ToolTip="None = no sort">

<asp:ListItem Value="None" Selected="True">No Sort</asp:ListItem>

<asp:ListItem Value="Ascending">Ascending</asp:ListItem>

<asp:ListItem Value="Descending">Descending</asp:ListItem>

</asp:DropDownList>

</td>

<td valign="top">

Filter (case sensitive):

<br />

<asp:TextBox SkinID="GridItemField" ID="txtColFilter1" runat="server" ToolTip="Blank = no filter, text is case-sensitive"></asp:TextBox><br />

<asp:TextBox SkinID="GridItemField" ID="txtColFilter2" runat="server" ToolTip="Blank = no filter, text is case-sensitive"></asp:TextBox><br />

<asp:TextBox SkinID="GridItemField" ID="txtColFilter3" runat="server" ToolTip="Blank = no filter, text is case-sensitive"></asp:TextBox>

</td>

<td valign="bottom">

<asp:Button ID="btnAddExpressions" runat="server" SkinID="RoundButton" Text="Apply" OnClick="btnAddExpressions_Click" ToolTip="Apply Filter And Sort Settings" /></td>

<td align="right" valign="bottom" style="padding-left:40px;width:100%;">

<div style="overflow:auto;height:65px;">

<asp:Label ID="lblCurrentFilter" runat="server"></asp:Label>

</div>

</td>

</tr>

</table>

</telerik:RadPane>

<telerik:RadSplitBar id="Radsplitbar4" runat="server" BorderStyle="None" BorderSize="0" BorderWidth="0" BorderColor="Transparent" CollapseMode="Forward" EnableResize="false" CollapseExpandPaneText="Show/Hide The Advanced Sort & Filter" />

<telerik:RadPane id="MainPane" runat="server" Scrolling="None">

<table cellpadding="0" cellspacing="0" width="100%" class="fieldlabelSmall" style="table-layout:fixed; background-color:#D2D6DB;border-left:1px solid #898D8F;border-right:1px solid #898D8F;border-top:1px solid #898D8F">

<tr>

<td style="padding:1 0 2 5;">

<a href="#" onclick="return ShowInsertForm();" class="gridLink"><asp:Image ID="AddRecord1" runat="server" ImageUrl="~/Images/EditFormButtonIcons/new.gif" ImageAlign="AbsMiddle" AlternateText="Add Record" style="margin-right:5px" />Add an ACR Rule</a>

</td>

<td valign="bottom" align="right" nowrap="nowrap" style="padding:1 5 2 5;">

<a href="#" onclick="refreshGrid();return false;" class="gridLink"><asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Refresh.png" ImageAlign="AbsMiddle" AlternateText="Refresh the Grid" style="margin-right:3px" />Refresh</a>

</td>

</tr>

</table>

<telerik:RadGrid ID="RadGrid1" runat="server" ShowGroupPanel="True" Width="100%" AllowPaging="True" PageSize="16" AllowSorting="True" AutoGenerateColumns="False" GridLines="None" ShowStatusBar="true"

OnNeedDataSource="RadGrid1_NeedDataSource" OnDeleteCommand="RadGrid1_DeleteCommand" OnItemDataBound="RadGrid1_ItemDataBound">

<MasterTableView ClientDataKeyNames="ID" DataKeyNames="ID" CurrentResetPageIndexAction="SetPageIndexToFirst" Width="99.5%" Dir="LTR" Frame="Border" TableLayout="Auto" GroupLoadMode="Server" AllowMultiColumnSorting="True" >

<RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" Visible="False">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" Visible="False" Resizable="False">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"></EditColumn>

</EditFormSettings>

<Columns>

<telerik:GridTemplateColumn UniqueName="TemplateEditColumn" SortExpression="" HeaderText=" " AllowFiltering="false" Resizable="false" Reorderable="false" Groupable="false">

<ItemTemplate>

<asp:HyperLink ImageUrl="~/Images/EditFormButtonIcons/edit_icon.gif" ID="EditLink" runat="server" Text="Edit"></asp:HyperLink>

<asp:HyperLink ImageUrl="~/Images/EditFormButtonIcons/generic_document.gif" ID="ViewLink" runat="server" Text="View" Visible="false"></asp:HyperLink>

</ItemTemplate>

<ItemStyle Width="20px" />

<HeaderStyle Width="20px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="ACRLevelImage" SortExpression="SchoolName" HeaderText="Level" AllowFiltering="false" Resizable="false" Reorderable="false" Groupable="false">

<ItemTemplate>

<asp:Image ID="imgACRSchoolOrDistrictLevel" runat="server" ImageAlign="AbsMiddle" style="cursor:help;" />

<telerik:RadToolTip ID="acrSchoolOrDistrictLevelToolTip" runat="server" Skin="Vista" Width="250px" RelativeTo="Element" Position="MiddleRight" ShowEvent="OnMouseOver" />

</ItemTemplate>

<ItemStyle HorizontalAlign="Center" Width="35px" />

<HeaderStyle HorizontalAlign="Center" Width="35px" />

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="SchoolName" HeaderText="School" UniqueName="SchoolName" DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Name" HeaderText="ACR Rule Name" UniqueName="Name" DataType="System.String" >

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Start Year" UniqueName="StartYear" DataField="StartYear" DataType="System.Int32">

<HeaderStyle Width="60px" />

<ItemStyle HorizontalAlign="Center" Width="60px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="End Year" UniqueName="EndYear" DataField="EndYear" DataType="System.Int32">

<HeaderStyle Width="55px" />

<ItemStyle HorizontalAlign="Center" Width="55px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Courses" UniqueName="CourseIDList" DataField="CourseIDList">

<ItemTemplate>

<asp:Label ID="lblCIDList" runat="server" style="cursor:help"></asp:Label>

<telerik:RadToolTip ID="coursesToolTip" runat="server" Skin="Vista" Width="350px" RelativeTo="Element" Position="MiddleRight" ShowEvent="OnMouseOver" />

</ItemTemplate>

<ItemStyle Width="200px" Wrap="True" />

<HeaderStyle Width="200px" Wrap="True" />

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="SchoolTypes" HeaderText="School Types" UniqueName="SchoolTypes" DataType="System.String" >

<ItemStyle HorizontalAlign="Center" Width="80px" />

<HeaderStyle Width="80px" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="SQLText" HeaderText="Student Filter SQL" UniqueName="SQLText">

<ItemTemplate>

<asp:Label runat="server" ID="lblSQLText" style="cursor:help;min-width:100px;white-space:nowrap;text-overflow: ellipsis; overflow:hidden; width:100%"></asp:Label>

<telerik:RadToolTip ID="sqlToolTip" runat="server" Skin="Vista" Width="400px" RelativeTo="Element" Position="MiddleLeft" ShowEvent="OnMouseOver" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="ID" Display="False" HeaderText="ID" UniqueName="ID"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FilterXML" UniqueName="FilterXML" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SchoolNo" Display="false" UniqueName="SchoolNo" DataType="System.Int32"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="TemplateDeleteLinkColumn" HeaderText=" " AllowFiltering="false" Resizable="false" Reorderable="false" Groupable="false">

<ItemTemplate>

<asp:ImageButton runat="server" ID="DeleteLink" ToolTip="Delete Rule" ImageUrl = "~/Images/EditFormButtonIcons/delete_icon.gif" CommandName = "Delete"></asp:ImageButton>

<asp:Image runat="server" ID="imgCannotDelete" Visible="false" ImageAlign="AbsMiddle" ImageUrl="~/Images/EditFormButtonIcons/notallowed.png" ToolTip="Delete is not allowed" style="cursor:not-allowed" />

</ItemTemplate>

<ItemStyle Width="20px" />

<HeaderStyle Width="20px" />

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<PagerStyle Mode="Slider" AlwaysVisible="true" />

<ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True" ColumnsReorderMethod="Reorder">

<Resizing ResizeGridOnColumnResize="false" AllowColumnResize="true" EnableRealTimeResize="true" />

<Selecting AllowRowSelect="True" />

<Scrolling ScrollHeight="345" AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True" />

</ClientSettings>

</telerik:RadGrid>

</telerik:RadPane>

</telerik:RadSplitter>

</

asp:Content>

Svetlina Anati

Admin

2795 posts

Posted 01 Apr 2008 Link to this post

Hello Lyle Groome,

I already answered your support ticket and for your convenience I place the answer below:

Please, accept our sencere apologies for the delay.
To your questions:

By default, if you don't explicitely set the nested RadSplitter's ResizeWithParentPane property to false, it will stay with its default value, which is true. This being said, the nested RadSplitter resizes itself in order to fit its parent RadPane. In your case, you have applied a custom css class (masterContentPane) which has padding 10 px and this padding causes the nested RadSplitter to exceed the boundaries of the parent pane and scrollbars occur. Therefore you should remove the padding from the css class.

This is not related to the RadPanelBar, its a general issue - your expression does not get evaluated. You can test the same expression with a standard asp label and you will get the same result - an empty string. The correct approach is the following one:

    
                    <telerik:RadPanelItem Text="RadMenu" NavigateUrl="NotCurrentlyAvailable.aspx" Target="<%# contentPane.ClientID%>">

We hope that our suggestion would be helpful.

Kind regards,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center