RadMenu inside RadPanelBar ItemTemplate

3 posts, 0 answers
  1. Richard
    Richard avatar
    28 posts
    Member since:
    Jun 2010

    Posted 08 Feb 2013 Link to this post

    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>
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Richard
    Richard avatar
    28 posts
    Member since:
    Jun 2010

    Posted 14 Feb 2013 Link to this post

    Thank you that worked perfectly!
Back to Top