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> |