I have been trying to use the collapse method with the splitter. My first try has left me with a strange visual problem: when I click open the slidingzonepane, it shows me the content of the pane, namely a button which triggers the pane's collapse() method.
When I click on the button, the icon for the frame disappears but the content remains. Shouldn't it disappear too?
This was tested on IE7 and a machine running ,NET 3.5 SP1. There is nothing in the code behind.
My code:
<%
@ 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></title>
</
head>
<
body>
<form id="form1" runat="server">
<div id="dvError">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<div>
<telerik:RadSplitter BackColor="Transparent" ID="Radsplitter1" runat="server" Height="707px"
Width="940" Skin="Default" BorderSize="0" BorderStyle="None" PanesBorderSize="0">
<telerik:RadPane BorderStyle="None" ID="MiddlePane" runat="server" BorderWidth="0px">
<div id="reportPane">
REPORT GOES HERE
</div>
</telerik:RadPane>
<telerik:RadPane BorderStyle="None" ID="RightPane" BackColor="Transparent" runat="server"
Width="32" Scrolling="none">
<telerik:RadSlidingZone ID="RightSlidingZone1" runat="server" BorderStyle="None"
ClickToOpen="True" SlideDirection="left" Width="32">
<telerik:RadSlidingPane ID="RightSlidingPane1" runat="server" EnableTheming="true"
IconUrl="Images/expandpanel-label-closed.gif" Scrolling="None" Width="910px">
<div id="divTest" style="display: block">
<table>
<tr>
<td>
<input type="button" onclick="testfunction()" value="collapse" />
</td>
</tr>
</table>
</div>
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
</telerik:RadSplitter>
</div>
</form>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
var slidingZone = <%= RightSlidingZone1.ClientID %>;
var splitter = <%= Radsplitter1.ClientID %>;
var slidingpane = <%=RightPane.ClientID %>
function testfunction()
{
paneId =
"<%= RightPane.ClientID %>";
var splitter = $find("<%= RadSplitter1.ClientID %>");
var pane = splitter.getPaneById(paneId);
if (pane)
{
alert(pane);
pane.collapse();
//$get("divTest").style.display = "none";
}
else
{
alert(
"Pane with ID '" + paneId + "' not found.");
}
}
</script>
</telerik:RadCodeBlock>
</
body>
</
html>