Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > Preserve Dock/UnDock state with 1 RadSlidingPane.

• Vijay

  Posted on May 7, 2009 (permalink)

  Dear Telerik Support Member,
  
  I have only one RadSlidingPane in a master page and that can be docked/undocked by the user. When the user docks/undocks the slidingPane and then the page refreshes the state is lost and its collapsed all the time. I would need to maintain the last user selected dock/undocked state. I have seen your examples and all explains about having more than 1 sliding Pane (may be thats by design). I only need one slidingpane and need to preserve the state. And also, this master page will be inside another frame and the entire page will be refreshed often. i have tried the javascript methods onClientCollapsed, onClientdocked methods and did not help.
  
  
  I have copied just the simple splitter sample alone and let me know if you need more.
  ....
  

  1	<rad:RadSplitter ID="RadSplitter" runat="server" Visible="true"  Width="100%" Height="1000" BorderSize="0" BorderWidth="0" ResizeWithParentPane="true" OnClientLoaded="splitterLoaded" Skin="Inox">
  2	<rad:RadPane ID="LeftPane1" runat="server" Scrolling="None" Width="100%" >
  3	<div id="PageContent">
  4	<asp:ContentPlaceHolder ID="BCCContentPlaceHolder" runat="server">
  5	</asp:ContentPlaceHolder>
  6	<div class="PageFooter" style="height: 30px;"></div>
  7	</div>
  8	</rad:RadPane>
  9	<rad:RadPane ID="RightPane1" runat="server" Scrolling="none" Width="22px" Height="500" MaxHeight="500">
  10	<rad:RadSlidingZone ID="RightSlidingZone" runat="server" Width="22px" Height="500" ExpandedPaneId="RightSlidingPane1" DockedPaneId="RightSlidingPane1"  SlideDirection="left" >
  11	<rad:RadSlidingPane ID="RightSlidingPane1" Title="BCC Admin Menu" runat="server" MaxHeight="500" EnableResize="True" BackColor="White" Width="210px" Height="500" >
  12	<asp:ContentPlaceHolder ID="BCCRightNavMenuPlaceHolder" runat="server">
  13	<asp:Panel ID="RightNavMenuPanel" runat="server" CssClass="RightNavMenuPanel" Height="500" >
  14	<rad:RadTreeView id="RightNavRadTreeView" runat="server" Height="500" >
  15	</rad:RadTreeView>
  16	</asp:Panel>
  17	</asp:ContentPlaceHolder>
  18	</rad:RadSlidingPane>
  19	</rad:RadSlidingZone>
  20	</rad:RadPane>
  21	</rad:RadSplitter>
  22	....
  23	</contentpage>
  24	</masterpage>.

• Vijay

  Posted on May 7, 2009 (permalink)

  Alright, I have figured out. Thought it would help someone else...posting the solution here...
  1. Added events OnClientDocked="OnClientPaneDocked" OnClientUndocked="OnClientPaneUnDocked" and OnClientLoaded="OnClientPaneLoaded"
  
  2. set cookies on expand and collapse. And then based on the cookie

  sender.ExpandPane('<%= RightSlidingPane1.ClientID %>');

  sender.DockPane('<%= RightSlidingPane1.ClientID %>');

  
  
  
  

  <rad:RadSplitter ID="RadSplitter" runat="server"

  Visible="true"

  Width="100%" Height="1000" BorderSize="0"

  BorderWidth="0" ResizeWithParentPane="true" OnClientLoaded="splitterLoaded" Skin="Inox">

  <rad:RadPane ID="LeftPane1" runat="server" Scrolling="None" Width="100%" >

  <div id="PageContent">

  <asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server">

  </asp:ContentPlaceHolder>

  <div class="PageFooter" style="height: 30px;"></div>

  </div>

  </rad:RadPane>

  <rad:RadPane ID="RightPane1" runat="server" Scrolling="none" Width="22px" Height="500" MaxHeight="500" >

  <rad:RadSlidingZone ID="RightSlidingZone" runat="server" Width="22px" Height="500" OnClientLoaded="OnClientPaneLoaded"

  SlideDirection="left" >

  <rad:RadSlidingPane ID="RightSlidingPane1" Title="Menu" runat="server" MaxHeight="500"

  EnableResize="True" BackColor="White" Width="210px" Height="500" OnClientDocked="OnClientPaneDocked" OnClientUndocked="OnClientPaneUnDocked" >

  <asp:ContentPlaceHolder ID="RightNavMenuPlaceHolder" runat="server">

  <asp:Panel ID="RightNavMenuPanel" runat="server" CssClass="RightNavMenuPanel" Height="500" >

  <rad:RadTreeView id="RightNavRadTreeView" runat="server" Height="500"  >

  </rad:RadTreeView>

  </asp:Panel>

  </asp:ContentPlaceHolder>

  </rad:RadSlidingPane>

  </rad:RadSlidingZone>

  </rad:RadPane>

  </rad:RadSplitter>

  ....

  ...

  ....

  //dock and undock javascript functions

  function OnClientPaneDocked(sender, args)

  {

  createCookie("slidingpane","dock",1);

  }

  function OnClientPaneUnDocked(sender, args)

  {

  createCookie("slidingpane","Undock",1);

  }

  function OnClientPaneLoaded(sender, eventArgs)

  {

  var pane = readCookie("slidingpane")

  if(pane!=null)

  {

  if(pane == 'dock')

  {

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

  var slidingPaneElement = slidingZone.getPaneById('<%= RightSlidingPane1.ClientID %>');

  sender.ExpandPane('<%= RightSlidingPane1.ClientID %>');

  sender.DockPane('<%= RightSlidingPane1.ClientID %>');

  }

  }

  }

  function createCookie(name,value,days) {

  if (days) {

  var date = new Date();

  date.setTime(date.getTime()+(days*24*60*60*1000));

  var expires = "; expires="+date.toGMTString();

  }

  else var expires = "";

  document.cookie = name+"="+value+expires+"; path=/";

  }

  function readCookie(name) {

  var namenameEQ = name + "=";

  var ca = document.cookie.split(';');

  for(var i=0;i < ca.length;i++) {

  var c = ca[i];

  while (c.charAt(0)==' ') cc = c.substring(1,c.length);

  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

  }

  return null;

  }

  function eraseCookie(name) {

  createCookie(name,"",-1);

  }

  
  
  
  
  

• Vijay

  Posted on May 7, 2009 (permalink)

  Resolved, need to be closed.

• Roman Shkenjov

  Posted on Jan 25, 2010 (permalink)

  Hy.
  
  But I have question - how to change javascript that set RightSlidingPane1 docked (opened) by default. Now by default RightSlidingPane1 is undocked. If I set DockedPaneId="RightSlidingPane1" then  pane  always = 'dock'   and I cannot save undock state.
  
  Regards,
  Roman

• Svetlina Anati Svetlina Anati

  Posted on Jan 25, 2010 (permalink)

  Hello Roman,
  
  I am afraid that we were not able to understand your explanations and your exact requirements - saving/loading RadSlidingPane's docked/undocked state works no matter you have set a sliding pane to be initially docked or not.
  
  That is why I believe that the best way to proceed is to prepare a simple reproduction demo (no need for complex custom logic, splitter's content or other controls on the page which are not relevant), open a new support ticket and send it to us along with very detailed reproduction steps and explanations of the exact actual and desired behavior and the differences between them. Provide also information about the exact version of the control you are using and browser information. Once we receive this, we will check it out and we will do our best to help.
  
  
  Sincerely yours,
  Svetlina
  the Telerik team

  
  Instantly find answers to your questions on the new Telerik Support Portal.
  Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

• Mukesh

  Posted on Apr 12, 2011 (permalink)

  Hello All,
  
  
  I am using vijay's post but getting script error in "readCookies()" method, please have a look below code and suggest me some solution.
  
  

  function readCookie(name) {

  var namenameEQ = name + "=";

  var ca = document.cookie.split(';');

  for(var i=0;i < ca.length;i++) {

  var c = ca[i];

  while (c.charAt(0)==' ') cc = c.substring(1,c.length);

  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

  }

  return null;

  }

  
  
  
  Thanks
  Mukesh

• Mukesh

  Posted on Apr 12, 2011 (permalink)

  Hello All,
  
  I sligtly modified the code as given below, and now I am not getting any script error.
  
  

  function readCookie(name) {

  var nameEQ = name + "=";

  var ca = document.cookie.split(';');

  for(var i=0;i < ca.length;i++) {

  var c = ca[i];

  while (c.charAt(0)==' ') c = c.substring(1,c.length);

  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

  }

  return null;

  }

  
  But now I am facing some another problem:
      On every page load both the methods (OnClientPaneDocked() & OnClientPaneUnDocked()) are getting fired.
  
  Please suggest me some solution, to prevent these method's calling on page load.
  
  Thanks
  Mukesh
  
  

• Dobromir Dobromir

  Posted on Apr 14, 2011 (permalink)

  Hi Mukesh,
  
  The reported behavior might occur if you are explicitly calling dock() and undock() methods. To be able to provide more to the point answer  we will need to examine and debug the code locally. Could you please provide a sample page reproducing the problem?
  
  All the best,
  Dobromir
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > Preserve Dock/UnDock state with 1 RadSlidingPane.