HOW-TO : Dock a RadSlidingPane on expand


SOLUTION:

 


You can easily force the RadSlidingPane control to dock on expand by using its client-side API.

For this purpose you should go through the following steps:

1. Hook up the OnClientBeforeExpand event of the RadSlidingPane:
   
   

   <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="RadSlidingPane1" OnClientBeforeExpand="beforeExpand">

   </telerik:RadSlidingPane>

2. In the function which handles the event you should dock the RadSlidingPane and also cancel the event to prevent the RadSlidingPane's expansion which is not necessary anymore in this case. You can do this in the following manner:
   
   

   function beforeExpand(sender,eventArgs)

   {

   var slidingZone = $find("<%= RadSlidingZone1.ClientID %>");

   slidingZone.dockPane(sender.get_id());

   eventArgs.set_cancel(true);

   }

 You can find a working project which demonstrates the described approach in the attached archive file. 


NOTE:  In the Q3 2009 Beta release a new property was introduced which offers the above explained functionality out of the box. The property is called DockOnOpen and it belongs to the RadSlidingPane.

The official Q3 2009 release offrs a sample online demo which shows the DockOnOpen property effect and which is available below:

http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_dockonopen/defaultcs.aspx