RadMenu used within a RadDock titlebar

[noahshipley]

I am building an Ad-Hoc reporting application and would like to be able to add a customized menu to each RadDock presented to the user.  Through expirimentation the best I've been able to do is embed a menu into the RadGrid which will be within each dock's command template however this has numerous problems, such as the command template not being displayed when the grid has no data (My menu is intended to allow the user to choose columns which will in turn toggle their visibility).

When I try setting the titlebar template to a custom ITemplate which adds a menu it works in the most primitive sense of actually adding the menu, however the menu items appear to be rendering in the background regardless of any attempts by me to set their z-index.  Also, the skin of the dock is lost and the title renders in an odd yellow color.  Also, adding multiple controls within the template doesn't appear to work as I want the title to read something along the lines of: 
Service Entry Grid           <Menu Here>                      <Minimize Button Here>

Is there a way to have multiple control in the header template correct render along with the skin and the menuitems rendering on the top layer of the page?

Some simple code:

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

// create the rad menu

RadMenuItem chooseItem = new RadMenuItem("Choose Columns");

foreach (ColumnInformation column in (Session[ReadOnlyColumns] as ReadOnlyCollection<ColumnInformation>))

{

RadMenuItem item = new RadMenuItem(column.Name);

foreach (ColumnInformation c in (List<ColumnInformation>) Session[ChosenColumns])

{

if (c.Name == column.Name)

{

item.ImageUrl = "~/images/check.gif";

}

}

item.Style[HtmlTextWriterStyle.ZIndex] = "0";

chooseItem.Items.Add(item);

}

RadMenu menu = new RadMenu();

menu.Style[HtmlTextWriterStyle.ZIndex] = "0";

menu.Skin = "Outlook";

menu.ItemClick += new RadMenuEventHandler(menu_ItemClick);

menu.Items.Add(chooseItem);

RadDock1.TitlebarTemplate = new ColumnMenuTemplate(menu);

}

public class ColumnMenuTemplate : ITemplate     {         public ColumnMenuTemplate(RadMenu menu)         {             m_Menu = menu;         }         private RadMenu m_Menu;         #region ITemplate Members         public void InstantiateIn(Control container)         {             Label label = new Label();             label.ID = "foo";             label.Text = "Service Entry Grid";             container.Controls.Add(label);             container.Controls.Add(m_Menu);         }         #endregion     } public class ColumnMenuTemplate : ITemplate { public ColumnMenuTemplate(RadMenu menu) { m_Menu = menu; } private RadMenu m_Menu; #region ITemplate Members public void InstantiateIn(Control container) { Label label = new Label(); label.ID = "foo"; label.Text = "Service Entry Grid"; container.Controls.Add(label); container.Controls.Add(m_Menu); } #endregion }

[Valeri Hristov]

Hi Noah,

Attached is a simple page, demonstrating how to accomplish your requirement. In two words, since the wrapper DIV element of RadMenu is with style float:left, to align it properly with the RadDock's titlebar EM element you need to float the EM. There are several visual problems, caused by overflow:hidden styles in RadDock, but they could be workarounded by adding overflow:visible to some classes, as shown in the attached page.

I hope this helps, do not hesitate to contact us again if you need additional information.

Greetings,

Valeri Hristov (Senior Developer, MCSD)
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[noahshipley]

Unfortunately this does not solve the issue.  Any content within the dock is still on top of the menu and the menu does not float above the dock in the sense that if the menu has more content then the dock's size the menu is cutoff within the dock.  If you expand your menu to include a few more items  (or reduce the size of the dock's height) and stick a grid inside the dock you will see the behavior I am speaking of.

[noahshipley]

My apologies, I just noticed the style="overflow:visible;" on the RadDock in the ASPX page.  This does appear to fix the issue in some ways, but causes numerous other issues.  The menu still hides behind other raddocks on the same page and when a menuitem is clicked the entire raddock moves to the position clicked as though it was dragged there.  Can you try an example with a few raddocks in a a zone with a menu with enough items to overlap them?

[Valeri Hristov]

Hi noahshipley,

I saw the problem. I will consult with our front end developer who is in charge for RadDock's CSS and I will get back to you tomorrow. I am sorry for the inconvenience.

Best wishes,
Valeri Hristov (Senior Developer, MCSD)
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Valeri Hristov]

Hi noahshipley,

Here is the updated CSS, which should work in most of the cases:
<style type="text/css">
.rdSideBorders
{
 overflow:visible !important;
}
.rdTitlebar
{
 z-index:1; /*This should be larger than rdContent*/
}
.rdBottomBorder,.rdContent
{
 z-index:0;
}
</style>

I should mention that there is no universal method for making a RadMenu which is inside a RadDock control to appear on top of all other RadDock controls. This is because the browser calculates the Z-Index relatively to its DOM tree, e.g. RadMenu's Z-Index is relative to its parent, e.g. RadMenu could be on top of all children of its parent RadDock, but cannot be on top of the children of another RadDock, which has higher Z-Index of RadMenu's parent. If we make all RadDock controls to have equal Z-Index, the browser stacks the html elements by their order in the DOM tree. All this means that the RadMenu, which inside the topmost RadDock control will be displayed over the other RadDock controls, but their menus will appear below the RadDock controls which are with higher Z-Index.

All the best,
Valeri Hristov (Senior Developer, MCSD)
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[noahshipley]

Unfortunately this doesn't appear to really act is in a workable fashion that I can rely upon for any sort of producible product so I am going to revert to a UI where menus cannot overlap docks (which is really disappointing as I feel it'd be a far superior GUI metaphor).  Have you guys considered making some of your controls more aware of each other and adjusting their internal styles accordingly?  IE at render time have your control check it's position relative to its parent and sibling controls and attempt to deal with fallout?

[Valeri Hristov]

Hi Noah,

Unfortunately making the controls to be aware of each other and automatically adjust themselves for proper operation is nearly impossible, having in mind the count of the possible scenarios which could be implemented with 20+ controls and countless number of other third party controls. HTML is quite restrictive for rich interfaces and we could not do much to improve the current operation RadMenu/RadDock for your case, mainly because this is the expected behavior from the browser.

Regards,
Valeri Hristov (Senior Developer, MCSD)
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center