This is a migrated thread and some comments may be shown as answers.

RadMenu inside RadPanelBar ItemTemplate

2 Answers 174 Views

This is a migrated thread and some comments may be shown as answers.

Richard asked on 08 Feb 2013, 09:25 PM

Hi,

I have a RadPanelBar that uses an ItemTemplate. Inside of this ItemTemplate I have a radMenu which has an ItemTemplate of its own containing a checkboxlist and a radbutton. I am dynamically populating the checkboxlist, and have found that if the checkboxlist contains several items, it causes the menu to be larger than the panelbaritem that contains it. When this happens, the radmenu is cut off by the next panelbaritem. I have seen several tips about setting z-index but nothing seems to work. I have tried setting the z-index on the radmenu, the radmenuitem (via a cssclass), and I have tried wrapping my inner template with a div with the z-index set to a high value. I have also tried using the mouseover client event to set the menu z-index. None of these have any affect. Below is some sample code. If you set the checkboxlist to contain several items the problem should occur. Any suggestions would be greatly appreciated.

Thanks!
Richard

<telerik:RadPanelBar runat="server" ID="pbPanelBar" Width="100%" Skin="Office2007"

AllowCollapseAllItems="true"

ExpandMode="MultipleExpandedItems" >

<ItemTemplate>

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="LoadingPanel1">

<telerik:RadMenu ID="MyMenu" runat="server" Style="float: right" EnableScreenBoundaryDetection="true"

EnableRoundedCorners="true">

<Items>

<telerik:RadMenuItem Text="Copy" GroupSettings-ExpandDirection="Left">

<Items>

<telerik:RadMenuItem Text="Copy" GroupSettings-ExpandDirection="Left">

<ItemTemplate>

<div style="z-index:5000000003">

<asp:CheckBoxList runat="server" ID="cblList" Width="300px">

</asp:CheckBoxList>

<telerik:RadButton style="z-index:inherit" ID="btnButton1"

runat="server" Text="Test Button" />

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</telerik:RadAjaxPanel>

</ItemTemplate>

</RadPanelBar>

RadMenu inside RadPanelBar ItemTemplate

2 Answers, 1 is accepted