How to expand the sliding pane from server side

[Bhavya]

Hi,
I am creating sliding zone and sliding panes dynamically.I want to expand one of the sliding panes on one button click event at server side for the dynamically created zone.
I have created the zones and sliding panes on OnInit method and I used the property ExpandPaneID of sliding zone in the page load method to expand a particular sliding pane in the page postback.
I dont see any pane getting expanded.
Can you please suggest how we can do that?
Thanks in advance.

Regards,
Bhavya

[Dobromir]

Hi Bhavya,

I am not quite sure what may be causing this issue. I have tried to recreate the scenario using the provided information and it is working as expected on my side. I have attached my test page, could you please modify it to a point where the problem occurs and send it back so we can investigate it further?

All the best,
Dobromir
the Telerik team

[Bhavya]

Hi Dobromir,
I have modified the sample what you have sent,according to my requirement and the problem is reproducible there.
Please find the Default.aspx and the code behind files below and suggest how can i make sure that the sliding pane get expanded on button click?

Default.aspx:

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

 

<%

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

 

<!

 

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

 

 

<

 

script type="text/javascript">

 

 

function

 

DisplayVideo() {

 

 

 

debugger

 

 

 

 

 

var Arguments = "abs";

 

 

__doPostBack(

"<%=PostBackButton.ClientID %>", Arguments);

 

 

}

</

 

script>

 

 

<

 

head id="Head1" runat="server">

 

 

<title></title>

 

 

</

 

head>

 

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<div>

 

 

<asp:ScriptManager ID="scmngr" runat="server">

 

 

</asp:ScriptManager>

 

 

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%"

 

 

Orientation="Vertical" PanesBorderSize="0" VisibleDuringInit="false" BorderWidth="0px">

 

 

<telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None" BorderColor="AliceBlue"

 

 

BorderWidth="1" BorderStyle="Dashed" Width="540px">

 

 

<input id="Button2" runat="server" type="button" value="button" onclick="javascript:DisplayVideo();" />

 

 

</telerik:RadPane>

 

 

<telerik:RadSplitBar ID="VideoSplitter" runat="server">

 

 

</telerik:RadSplitBar>

 

 

<telerik:RadPane ID="RadPane1" runat="server" Width="20px" MaxWidth="20" BackColor="#383838"

 

 

Visible="true">

 

 

 

<asp:UpdatePanel ID="Test" runat="server">

 

 

<ContentTemplate>

 

 

<asp:Panel ID="Video0" runat="server">

 

 

<input id="PostBackButton" runat="server" onclick="PostbackButton_Click" type="hidden" />

 

 

<input id="DynamicUserControlID" runat="server" type="hidden" EnableViewState="true" />

 

 

<input id="serversideVideoIDHolder" runat="server" type="hidden" enableviewstate="true" />

 

 

</asp:Panel>

 

 

</ContentTemplate>

 

 

</asp:UpdatePanel>

 

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

</div>

 

 

</form>

 

 

</

 

body>

 

 

</

 

html>



Default.aspx.cs:

 

using

 

System;

 

using

 

System.Collections.Generic;

 

using

 

System.Linq;

 

using

 

System.Web;

 

using

 

System.Web.UI;

 

using

 

System.Web.UI.WebControls;

 

using

 

Telerik.Web.UI;

 

public

 

partial class _Default : System.Web.UI.Page

 

{

 

protected void Page_Load(object sender, EventArgs e)

 

 

{

 

 

var abc=(RadPane1.FindControl("RadSlidingZone1") as RadSlidingZone);

 

 

 

if (abc != null)

 

 

{

 

abc.ExpandedPaneId =

"RadSlidingPane2";

 

 

}

 

}

 

 

protected void Page_Init(object sender, EventArgs e)

 

 

{

 

 

if (IsPostBack)

 

 

{

 

 

if (Request.Form.Get("__EVENTTARGET") == PostBackButton.ClientID.Replace("_", "$"))

 

 

{

 

 

RadSlidingZone zone1 = new RadSlidingZone();

 

 

zone1.ID =

"RadSlidingZone1";

 

 

 

RadSlidingPane pane1 = new RadSlidingPane();

 

 

pane1.ID =

"RadSlidingPane1";

 

 

pane1.Title =

"Pane1";

 

 

zone1.Items.Add(pane1);

 

 

RadSlidingPane pane2 = new RadSlidingPane();

 

 

pane2.ID =

"RadSlidingPane2";

 

 

pane2.Title =

"Pane2";

 

 

zone1.Items.Add(pane2);

 

 

RadSlidingPane pane3 = new RadSlidingPane();

 

 

pane3.ID =

"RadSlidingPane3";

 

 

pane3.Title =

"Pane3";

 

 

zone1.Items.Add(pane3);

 

Video0.Controls.Add(zone1);

 

}

 

}

 

}

 

}

Regards,
 Bhavya

[Dobromir]

Hi Bhavya,

The problem occurs because of the way sliding zone is ajaxified. In order to programmatically expand sliding pane on AJAX call you need to update the whole RadSplitter, thus wrapping the splitter in an UpdatePanel.

Also, in the provided sample page I noticed that the sliding zone is added to a Panel as a child control, please note that this is invalid configuration, RadSlidingZone can be nested only inside a RadPane as a direct child.

For your convenience I have attached modified page.

All the best,
Dobromir
the Telerik team

[Bhavya]

Hi Dobromir,
Thanks for your reply. That works fine. But i dont want my middle panel in the code(see code snippet) to get refreshed on postback as i will be having one of my silverlight application hosted there.Is there any way i can achieve it?

<telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None" BorderColor="AliceBlue"

 

 

 

 

BorderWidth="1" BorderStyle="Dashed" Width="540px">

 
///// code to host silverlight will come here///

 

 

 

 

 

 

</telerik:RadPane>

[Dobromir]

Hi Bhavya,

Unfortunately, the required scenario cannot be achieved using RadSplitter because of the way the control is designed. Have you considered having predefined sliding panes and expand/collapse them using the client-side API of RadSplitter?

More detailed information regarding the client-side API is available in our online documentation.

Greetings,
Dobromir
the Telerik team