Displaying RadMenu behind RadSplitter sliding pane

Article information
Article relates to	Web.UI 2007.3 1425 or RadSplitter v1.x RadMenu v4.x
Created by	Tsvetelina, Telerik
Last modified by	Simon, Telerik

HOW-TO

How to display RadMenu behind RadSplitter sliding pane.

DESCRIPTION

Let us assume that you have placed a RadMenu inside one of the RadPanes of a RadSplitter object. 
In addition, you are using RadSlidingPanes that you want to slide over the content of the mentioned RadPane and thus over the RadMenu as well. This KB article will guide you though the steps to configuring the two controls so that you achieve the desired result.



SOLUTION

At the end of this article, you will find a simple downloadable project that demonstrates the approach covered here as well as screenshot of the problem for which we provide a solution. The details of the solution follow.

Let us assume that you have a RadSplitter with two RadPanes - in the first one ("RadPane1"), you have a RadSlidingZone with two RadSlidingPanes, and in the second ("RadPane2") - a RadMenu.

1. Add the following style definition in the HEAD tag of your page:
   
   

   <style type="text/css">

   .SetStyle

   {

   position: absolute;

   z-index: -1;

   }

   </style>

2. Wrap the RadMenu in a DIV tag - "menuDiv".
3. When a RadSlidnigPane slides out, set the "SetStyle" style for the DIV and when a RadSlidingPane collapses, remove the style from the DIV. In order to achieve this, you have to handle the OnClientBeforeExpand and the OnClientBeforeCollapse events that the RadSlidingPane fires.
   
   For every RadSlidingPane:
   

   <radspl:RadSlidingPane Title="Menu1" ID="RadSlidingPane1" runat="server"

   OnClientBeforeExpand="PaneExpandHandler" OnClientBeforeCollapse="PaneCollapseHandler">

   
   javascript:
   

   <script type="text/javascript">

   function PaneExpandHandler(sender, args)

   {

   var div = document.getElementById('<%= menuDiv.ClientID %>');

   div.className = "SetStyle";

   }

   function PaneCollapseHandler(sender, args)

   {

   var div = document.getElementById('<%= menuDiv.ClientID %>');

   div.className = "";

   }

   </script>

SOLUTION

At the end of this article, you will find a simple downloadable project that demonstrates the approach covered here as well as screenshot of the problem for which we provide a solution. The details of the solution follow.

Let us assume that you have a RadSplitter with two RadPanes - in the first one ("RadPane1"), you have a RadSlidingZone with two RadSlidingPanes, and in the second ("RadPane2") - a RadMenu.

1. Add the following style definition in the HEAD tag of your page:
   
   

   <style type="text/css">

   .SetStyle

   {

   position: absolute;

   z-index: -1;

   }

   </style>

2. Wrap the RadMenu in a DIV tag - "menuDiv".
3. When a RadSlidnigPane slides out, set the "SetStyle" style for the DIV and when a RadSlidingPane collapses, remove the style from the DIV. In order to achieve this, you have to handle the OnClientBeforePaneExpand and the OnClientBeforePaneCollapse events that the RadSlidingPane fires.
   
   For every RadSlidingPane:
   

   <radspl:RadSlidingPane Title="Menu1" ID="RadSlidingPane1" runat="server"

   OnClientBeforePaneExpand="PaneExpandHandler" OnClientBeforePaneCollapse="PaneCollapseHandler">

   
   javascript:
   

   <script type="text/javascript">

   function PaneExpandHandler(sender, args)

   {

   var div = document.getElementById('<%= menuDiv.ClientID %>');

   div.className = "SetStyle";

   }

   function PaneCollapseHandler(sender, args)

   {

   var div = document.getElementById('<%= menuDiv.ClientID %>');

   div.className = "";

   }

   </script>