After several private emails, we have clarified the problem and came up with a solution. Here's a summary.
Requirements:
The developer wants to have a horizontally split WebSplitterContainer with 4 panels (let's call them panel A to panel D), with the following requirements:
- The first one (panel A) will always be visible
- Only one of the remaining three panels (panel B to D) is visible at a time (so when the end user clicks the Expand button of a panel, that panel will be expanded, and the one originally displaying will be collapsed)
- End user can drag the splitter bar to resize the 2 visible panels (panel A and one of panels B to D)
- End user can collapse the lower panel (one of panels B to D)
Analysis:
If there is only one WebSplitterContainer with 4 panels, then when the middle 2 panels are collapsed, end user will only be able to expand them, but will not be able to drag the splitter bar to resize the 2 panels that remain visible (i.e. panels A and D). This is because panels A and D are actually not adjacent panels, they are separated by 2 collapsed panels.
Solution:
So instead of having one WebSplitterContainer, we add a nested container. In our solution, the top-level container contains 2 panels (panel A, and a lower panel that contains a nested container). The nested container then contains panel B to D.
End user will be able to resize the 2 panels of the top-level container, and collapse the lower panel of the top-level container. (So requirements 1, 3 and 4 are satisfied)
A JavaScript handler is written to handle the OnClientPanelStateChanged event in the nested container. Whenever one of the panels B to D is expanded, the JavaScript handler will collapse the other 2 panels. (So requirement 2 is satisfied)
Source code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sample._Default" %>
<%@ Register Assembly="ZettaCube.ZeeControls" Namespace="ZettaCube.ZeeControls" TagPrefix="cc1" %>
<!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>
</head>
<body>
<script type="text/javascript">
var insideFunction = false;
function PanelOnStateChanged(panelId,oState,nState) {
if (!insideFunction) {
insideFunction = true;
var panels = [
ZCWS.GetPanel('<%= Panel2.ClientID %>'),
ZCWS.GetPanel('<%= Panel3.ClientID %>'),
ZCWS.GetPanel('<%= Panel4.ClientID %>')
];
var currentPanelIndex = panelId.substring(panelId.length-1) - 2;
for (var i = 0; i < panels.length; i++) {
if (i != currentPanelIndex) {
// SetState will trigger PanelOnStateChanged, so use the insideFunction flag to prevent endless loop.
panels[i].SetState((currentPanelIndex == 0) ? 1 : 2);
}
}
insideFunction = false;
}
}
</script>
<form id="form1" runat="server">
<div>
<cc1:WebSplitterContainer ID="WebSplitterContainer1" runat="server" Height="580px" Width="765px" Orientation="Horizontal">
<Panels>
<cc1:WebSplitterPanel runat="server" PreferredSize="200">
<Content>
Panel 1
</Content>
</cc1:WebSplitterPanel>
<cc1:WebSplitterPanel runat="server" Filled="True" CanCollapse="Forward">
<Content>
<cc1:WebSplitterContainer ID="WebSplitterContainer2" runat="server" Height="694px" Width="926px" Orientation="Horizontal" OnClientPanelStateChanged="PanelOnStateChanged" FitParent="FitParentContainer">
<Panels>
<cc1:WebSplitterPanel ID="Panel2" runat="server" CanCollapse="Backward">
<Content>
Panel 2
</Content>
</cc1:WebSplitterPanel>
<cc1:WebSplitterPanel ID="Panel3" runat="server" CanCollapse="Both" State="ForwardCollapsed">
<Content>
Panel 3
</Content>
</cc1:WebSplitterPanel>
<cc1:WebSplitterPanel ID="Panel4" runat="server" CanCollapse="Forward" State="ForwardCollapsed">
<Content>
Panel 4
</Content>
</cc1:WebSplitterPanel>
</Panels>
</cc1:WebSplitterContainer>
</Content>
</cc1:WebSplitterPanel>
</Panels>
</cc1:WebSplitterContainer>
</div>
</form>
</body>
</html>