RadMenu inside RadPanelBar ItemTemplate

[Richard]

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>

[Kate]

Hello Richard,

Please take a look at the styles applied in this demo where the same scenario is being implemented.

All the best,
Kate
the Telerik team

[Richard]

Thank you that worked perfectly!