Slidesplitter docking state

[Moustafa]

I have an asp.net master page that contains RadSplitter .
the RadSplitter contains  the following

 - RadSlidingPane that contains asp menu items, and
 - RadPane that contains asp.net contentPlaceHolder.

when the user click the menu item it navigates to the corresponding page.
this is work fine.

what i need is to save the docking state of the RadSlidingPane during postbacks.

Notes: if  you make an action in a content page this will not affect the docking, but when yo clicking a menu item (that causes a navigation to another  url) in the master page the docking resets to its original state which i does not need that.

please help me

[Tsvetie]

Hello Moustafa,
I suppose your configuration of the ASP Menu is something like the following:

<asp:Menu ID="Menu1" runat="server">
    <Items>
        <asp:MenuItem Text="Item 1" NavigateUrl="~/Default2.aspx"></asp:MenuItem>
        <asp:MenuItem Text="Item 2" NavigateUrl="~/Default3.aspx"></asp:MenuItem>
    </Items>
</asp:Menu>

Generally, the RadSlidingPanes preserve their expanded/docked state across postbacks - please check our Save State online example for additional information. In your case however, you are not performing a regular postback, but are redirecting to another page. That is why the state of the RadSlidingPanes is not preserved. This behavior is expected - you can check with a standard ASP ListBox control - the control will preserve its selected state across postbacks, but when redirecting to another page the way you do, its selected state is lost (I have added this control to the master page in the attached test project so that you can test with it).

That is why your question is rather a general ASP.NET question, than a question connected to our controls. The approach to such a question depends on your specification and your specific implementation. A very simple way you can approach the problem is to expend the RadSlidingPane in the Page_Load handler of your child pages - demonstrated in the attached test project. Apart from this, you can use the same approach to save the state of the RadSlidingPanes, as the one you use to save the state of your other controls on the master page.

All the best,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Moustafa]

thanks for  your reply
yes i know that but the solution you provide  make the interface flickering so i can never consider  it as a user friendly

[Tsvetie]

Hi Moustafa,
The RadSlidingPane is initialized as collapsed, that is hidden, and it is expanded on the client. The only way you could prevent this, is not to dispose the RadSlidingPane. This however, would require a change in the way you have implemented the site - e.g. use UserControls instead of child pages and load the user controls with AJAX in the RadPane, without refreshing the whole page - just the RadPane.

Another approach you could take that only reduces the flickering however, is to:

1. Set VisibleDuringInit="false" for the RadSplitter.
2. Set SlideDuration of the RadSlidingZone to a very small number (10 for example).

This however will cause the expand animation of the RadSlidingPane to run faster every time you expand it, not only when you navigate to a different page. In order to reset the SlideDuration to the default 300 milliseconds once the RadSplitter is initialized, you need to do the following additionally:

1. In the OnClientLoaded client event of the RadSlidingZone, set the SlideDuration to 300:

   <script type="text/javascript">
   function OnClientLoaded(sender, args)
   {
       sender.set_slideDuration(300);
   }
   </script>

2. Overwrite the private _expandSlidingContainer method of the RadSlidingPane class, the following way:

   <script type="text/javascript">
   Telerik.Web.UI.RadSlidingPane.prototype._oldExpandSlidingContainer = Telerik.Web.UI.RadSlidingPane.prototype._expandSlidingContainer;
   Telerik.Web.UI.RadSlidingPane.prototype._expandSlidingContainer = function()
   {
       if(this._animation)
       {
           this._animation._expandAnimation.set_duration(this._zone._slideDuration);
       }
       this._oldExpandSlidingContainer();
   };
   
   </script>

I have attached a modified version of my test project, demonstrating my second suggestion.

Kind regards, Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.