Menu is hidden behind a RadPane

4 posts, 0 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 26 Nov 2014 Link to this post

    Hello,

    I am working on a project with a RadSplitter and a RadMenu.
    The RadMenu is located inside a RadPane.

    When I open the Drop-Down menu, it is hidden by the RadPane.
    How can I get the RadMenu to appear above the RadPane?

    I have used the code example from here

    My code of the RadMenu: 
             <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
     
            function itemOpened(s, e) {
                if ($telerik.isIE8) {
                    // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
                    $telerik.$("li", e.get_item().get_element())
                        .each(function () { this.style.cssText = this.style.cssText; });
                }
            }
        </script>
        <script id="telerikClientEvents2" type="text/javascript">
     
     
            function RadMenu_MouseOut(sender, args) {
     
                if (args.get_item().get_parent() == sender) {
                    sender.set_clicked(false);
                }
            }
     
            function OnClientItemClicking(sender, args) {
                if (args.get_item().get_isOpen() == true) {
                    args.set_cancel(true);
                    args.get_item().close();
                }
     
            }
     
            function AutoResubmit() {
     
                document.forms["form1"].submit();
     
            }
     
     
            function openMenu() {
                var men = $find("<%=RadMenu1.ClientID%>");
                var item = men.findItemByValue("t1");
                item.open();
            }
     
            function openMenu_new(itemText) {
                $find("RadMenu1").findItemByValue(itemText).open();
            }
        </script>
       
     
     
    </telerik:RadScriptBlock>
     
                        <telerik:RadMenu ID="RadMenu1" runat="server" Style="top: 0px; left: -2px; height: 35px; z-index: 1000"
                        Skin="MenuFilter"
                        Flow="Vertical"
                        ClickToOpen="true"
                         
                        OnClientItemOpened="itemOpened"
                        OnClientItemClicking="OnClientItemClicking" OnClientMouseOut="RadMenu_MouseOut"
                        EnableShadows="true"
                        EnableEmbeddedSkins="false">
                        <Items>
                            <telerik:RadMenuItem runat="server" PostBack="true" Text="RadMenuItem1" Value="t1" CssClass="btn  btn-primary btn-menu-filter-size">
                                <ContentTemplate>
                                    <div id="Div1" class="Wrapper">
                                        <asp:Label ID="Label1" runat="server" Text="AAAAAAAAAAAAA" Font-Size="Large"></asp:Label>
                                        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="500px" Width="500px"></telerik:RadAjaxPanel>
                                    </div>
                                </ContentTemplate>
                            </telerik:RadMenuItem>
     
                            <telerik:RadMenuItem IsSeparator="true" Value="Separator"></telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="RadMenuItem2" Value="t2" CssClass="btn btn-primary btn-menu-filter-size">
                                <ContentTemplate>
                                    <div id="Div2" class="Wrapper">
                                        <asp:Label ID="Label2" runat="server" Text="BBBBBBBBBBBBBB" Font-Size="Large"></asp:Label>
                                        <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" Height="500px" Width="500px"></telerik:RadAjaxPanel>
                                    </div>
                                </ContentTemplate>
                            </telerik:RadMenuItem>
     
                                 <telerik:RadMenuItem IsSeparator="true" Value="Separator"></telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="RadMenuItem3" Value="t3" CssClass="btn btn-primary btn-menu-filter-size">
                                <ContentTemplate>
                                    <div id="Div3" class="Wrapper">
                                        <asp:Label ID="Label3" runat="server" Text="CCCCCCCCCCCCCCC" Font-Size="Large"></asp:Label>
                                        <telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" Height="500px" Width="500px">
                                            <telerik:RadGrid ID="RadGrid1" runat="server" ShowGroupPanel="true">
                                                <ClientSettings AllowDragToGroup ="true"></ClientSettings>
                                            </telerik:RadGrid>
     
     
                                        </telerik:RadAjaxPanel>
                                    </div>
                                </ContentTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenu>


    p.s.
    I have attached the following video that shows the problem:
    http://youtu.be/nMVddEnjNgI

    Thanks,
    Daniel.
  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 27 Nov 2014 Link to this post

    Hello Daniel,

    The RadMenu cannot appear above the RadPane, because by design the RadPane has to be a container for its children and so it keeps them inside its bounds. In order to achieve the desired sliding content scenario I would suggest you to try the SlidingPanes functionality of the RadSplitter:
    Sliding Panes

    I hope this solution will be applicable for your scenario.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 01 Dec 2014 in reply to Vessy Link to this post

    Hello Vessy,

    Thank you for your reply!

    Indeed I am considering using the Sliding Panes.
    However at the moment I found another satisfying solution:
    <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="200" Scrolling="None" CssClass="Show_DD_Menu">
       .Show_DD_Menu {
        overflow:visible !important;
    }


    (I added: overflow: visible! Important;  to the LeftPane)


    Sincerely,
    Daniel.
  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 03 Dec 2014 Link to this post

    Hi Daniel,

    Thank you for sharing your solution with us. Let us know should we can be in any further assistance.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top