Using RadSplitter and RadMenu together

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

HOW-TO

Use RadSplitter and RadMenu together.

DESCRIPTION

It is a common task to use RadSplitter and RadMenu controls together in a single page while developing web applications. Consider that you have decided to use the RadSplitter to organize the whole page you are creating and that you want to place a RadMenu inside one of the RadSplitter panes to manage your page navigation. A side effect of this is that, when viewed under Mozilla, the items of the RadMenu that slide outside the RadSplitterPane that contains the RadMenu will not actually leave the boundaries of that pane. Instead, the pane will display scrollbars in order for you to be able to see its whole content.

This KB article aims to demonstrate the most common scenarios where these two controls can cooperate in order to always achieve the expected behavior. 

SOLUTION

At the end of this article, you will find a simple downloadable project for each of the scenarios that we cover here as well as screenshots of the problems for which we provide a solution. Below are the details of the scenarios:

1. You have a RadMenu inside a RadSplitterPane - "RadPane1", and you want the Items of that menu to slide over "RadPane2" of the RadSplitter. Depending on the expected size of the content of "PadPane2", we can introduce two variations of this: 
• If the content of "RadPane2" should not exceed its size, you can follow the steps below:
1. Set the position style property of the RadMenu to "absolute": 
   
   

   <radM:RadMenu ID="RadMenu1" runat="server" style="position:absolute;">

2. Apply the following style to "RadPane2" :
   
   

   .ApplyOverflow

   {

   overflow:visible !important;

   }

• In case you are not certain whether the content of "RadPane2" will exceed its size or not, you can take advantage of the following solution: 
1. If the content of "RadPane1" should not exceed its size, in the above scenario, apply the ApplyOverflow class to "RadPane1"
2. Otherwise:
• Take the RadMenu object out of "RadPane1".
• Apply the following style to the RadMenu object:
  
  

  <radM:RadMenu ID="RadMenu1" runat="server" style="position:absolute;top:[Absolute_Top_Position]px;left:[Absolute_Left_Position]px;">

   
  and adjust the position of the RadMenu so that it appears inside "RadPane1".
2. In case you intend to place the RadMenu inside a RadSlidingPane - "RadSlidingPane1", examine the following scenarios, which have different values set for the InitiallyDockedPaneId property of the RadSlidingZone:
• In case the InitiallyDockedPaneId property of the RadSlidingZone is not set to "RadSlidingPane1", just set the position style property of the RadMenu to "absolute":
  
  

  <radM:RadMenu ID="RadMenu1" runat="server" style="position:absolute;">

• Having the InitiallyDockedPaneId property of the RadSlidingZone set to "RadSlidingPane1", you should perform two additional steps:
• Take the RadMenu object out of "RadSlidingPane1".
• Set the top and left style properties of the RadMenu to appropriate values:
  
  

  <radM:RadMenu ID="RadMenu1" runat="server" style="position:absolute;top:[Absolute_Top_Position]px;left:[Absolute_Left_Position]px;">