RadMenu and Dock problem

4 posts, 0 answers
  1. Farshad heidary
    Farshad heidary avatar
    53 posts
    Member since:
    Oct 2009

    Posted 29 May 2010 Link to this post

    hi guys.

    i have a Dock that contain a user control that this usercontrol contain a radMenu.
    when sub menu is open, menu goes under radDock and some times scrolling.
    how i can fix it that dont goes under DIV?


    tnx

    regards
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 03 Jun 2010 Link to this post

    Hi Farshad,

    Please note that this is expected behavior. The menu is rendered as a <div/> element with position: absolute, and the dock's content container is a <div/> with overflow: auto. If the height of the inner <div/> (i.e. the menu is the inner <div/>) is greater than its parent <div/>, the scrollbar will be shown. To demonstrate this I created a sample that uses two <div/>s with the same CSS that is applied to the dock and the menu. The code is pasted below.
    You can use some of the following suggestions to avoid the issue:
    • Set the height of the dock, so it is always greater than the one of the menu.
    • Handle the OnClientItemOpening and OnClientItemClosed client-side events of the menu, and set overflow: visible and overflow: auto to the menu's parent node. This, however, will make all content within the dock, hidden by the scroll bar, to be shown also.
    • Handle the OnClientItemOpening and OnClientItemClosed client-side events of the menu, and append the menu <div/> to the parent element of the dock, and place it at the same position as it would appear in the dock. You will find an example demo in the code below.

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
     
        <script type="text/javascript">
            var position = null;
            var top = null;
            var left = null;
            var originalParent = null;
            function OnClientItemOpening(menu, args)
            {
                var dock = $find("RadDock1");
                dock.set_enableDrag(false);
     
                var menuElement = menu.get_element();
                originalParent = menuElement.parentNode;
     
                var parent = dock.get_element().parentNode;
                parent.appendChild(menuElement);
                 
                position = menuElement.style.position;
                top = menuElement.style.top;
                left = menuElement.style.left;
                menuElement.style.position = "absolute";
                menuElement.style.top = 31 + dock.get_top();
                menuElement.style.left = 11 + dock.get_left();
            }
     
            function OnClientItemClosed(menu, args)
            {
                var dock = $find("RadDock1");
                dock.set_enableDrag(true);
     
                var menuElement = menu.get_element();
     
                menuElement.style.position = position;
                menuElement.style.top = top;
                menuElement.style.left = left;
                originalParent.appendChild(menuElement);
            }
        </script>
     
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            </Scripts>
        </asp:ScriptManager>
        <div style="width: 400px; height: 100px; position: absolute; overflow: auto; border: 1px solid red;
            left: 600px;">
            <div style="background: green; border: 2px solid black; width: 200px; height: 200px;
                position: absolute; overflow: hidden; z-index: 1000;">
            </div>
        </div>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                        Height="60px">
                        <ContentTemplate>
                            <telerik:RadMenu ID="Menu1" runat="server" ClickToOpen="true" OnClientItemOpening="OnClientItemOpening"
                                OnClientItemClosed="OnClientItemClosed">
                                <Items>
                                    <telerik:RadMenuItem Text="Item1">
                                        <Items>
                                            <telerik:RadMenuItem Text="Child1">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Child1">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Child1">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Child1">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Child1">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Child1">
                                            </telerik:RadMenuItem>
                                        </Items>
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenu>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>


    Sincerely yours,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hugo Augusto
    Hugo Augusto avatar
    55 posts
    Member since:
    Jul 2004

    Posted 15 Dec 2010 Link to this post

    Hi, I already posted a Support Ticket but I forgot to mention that when you say this is the expected effect, you are forgetting about menus that open to the sides. The expected effect is to hide the submenus behind the zone div or even to force the zone to expand to show the submenus? Please check this example at ComponentArt and you will see that with their own zones, submenus don't get hidden. They overlap the zone div. That should be the expected behavior. Hope you can show how to overcame this "limitation" without scripts.

    heres's the url with the demo: http://aspnetajax.componentart.com/control-specific/snap/features/menu_insideSnap/WebForm1.aspx

    You had this working in RadControls for ASP.NET. Please change this behavior!
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 16 Dec 2010 Link to this post

    Hello Hugo,

    When I said that "it is expected behavior", I meant that it is expected HTML-wise. The Menu is rendered as a <div/> with position: absolute, and the dock as a <div/> with overflow: auto. When a <div/> with position: absolute is placed in a <div/> with overflow: auto, and the first <div/> has greater size (width, and height), the scrollbars will be shown on the second (i.e. this is the expected behavior). Since the dock is usually placed in a zone, which is also rendered as a <div/> configured to hide the horizontal scrollbar and show the vertical, the content that is shown over the dock will not be shown over the zone, because the dock's content is also zone's content.

    The user would expect that the menu will be shown over every other element on the page, but the user would also expect that the content inside the dock would not be shown outside of the dock. With the current implementation of the RadDock and the RadMenu controls, it is not possible to show the Menu outside the dock, if the menu resides in the dock. That's why our suggestion is to use the following code to work around this behavior. To integrate the workaround in your project, you only need to place the client scripts below the ScriptManager of the page where the docks and the menus are added, and add the CSS in the <head/> of the page:


     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .RadDockZone
            {
                position: static !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            if (Telerik.Web.UI.RadMenuItem)
            {
                Telerik.Web.UI.RadMenuItem.prototype._open = function (e)
                {
                    var $T = Telerik.Web.UI;
                    var menu = this.get_menu();
                    var openingArgs = new $T.RadMenuItemOpeningEventArgs(this, e);
                    menu._raiseEvent("itemOpening", openingArgs);
     
                    //Configure dock for the menu to be shown
                    OnClientItemOpening(menu);
                    //Configure dock for the menu to be shown
     
                    if (openingArgs.get_cancel())
                    {
                        return;
                    }
     
                    if (this._isWebServiceCallNeeded())
                    {
                        this._loadChildrenFromWebService();
                        return;
                    }
     
                    this._doOpen(e);
                }
     
                Telerik.Web.UI.RadMenuItem.prototype._close = function (e)
                {
                    var $T = Telerik.Web.UI;
                    if (this.get_isSeparator() || this._state == $T.RadMenuItemState.Closed)
                    {
                        return;
                    }
     
                    var closingArgs = new $T.RadMenuItemClosingEventArgs(this, e);
                    this.get_menu()._raiseEvent("itemClosing", closingArgs);
     
                    //Rollback original dock settings
                    OnClientItemClosed(this.get_menu());
                    //Rollback original dock settings
     
     
                    if (closingArgs.get_cancel())
                    {
                        return;
                    }
     
                    if (this._openedItem)
                    {
                        this._openedItem._close(e);
                    }
     
                    var parent = this.get_parent();
                    parent._openedItem = null;
     
                    if (!this._getAnimationContainer())
                    {
                        return;
                    }
     
                    this._state = $T.RadMenuItemState.Closed;
     
                    var menu = this.get_menu();
                    if (this.get_level() == 0)
                    {
                        menu._aboutToCollapse = true;
                    }
     
                    // Clear the z-index, so other opening items can overlap us.
                    if (!this._getIsImageOnly())
                    {
                        // Only do so if we are not in image-only mode, otherwise the next item will overlap us.
                        this.get_element().style.zIndex = 0;
                    }
     
                    this._slide.collapse();
     
                    this._updateLinkClass();
                    this._updateImageSrc();
     
                    var closedArgs = new $T.RadMenuItemClosedEventArgs(this, e);
                    this.get_menu()._raiseEvent("itemClosed", closedArgs);
     
                    this._closeChildren(e);
                }
            }
     
            var dockGlobal = null;
            var zoneGlobal = null;
            function OnClientItemOpening(menu, args)
            {
                var parent = menu.get_parent();
                while (parent)
                {
                    if (Sys.UI.DomElement.containsCssClass(parent.get_element(), "RadDock"))
                    {
                        break;
                    }
                    parent = parent.get_parent();
                }
     
                var dock = parent;
                if (dock)
                {
                    dockGlobal = dock;
                    var dockElement = dock.get_element();
                    var dockContentContainerElement = dock.get_contentContainer();
                    var zone = dock.get_dockZone();
                    if (zone && dock.get_dockZoneID())
                    {
                        zone.get_element().style.overflowY = "visible";
                        zoneGlobal = zone;
                    }
                    dock.get_titleBar().parentNode.style.overflow = "visible";
                    dockContentContainerElement.style.overflow = "visible";
                    dockElement.style.overflow = "visible";
                }
            }
            function OnClientItemClosed(menu, args)
            {
                var dock = dockGlobal;
                if (dock)
                {
                    var dockElement = dock.get_element();
                    var dockContentContainerElement = dock.get_contentContainer();
     
                    setTimeout(function ()
                    {
                        var zone = zoneGlobal;
                        if (zone)
                        {
                            $find("RadDockZone1").get_element().style.overflowY = "auto";
                        }
                        dock.get_titleBar().parentNode.style.overflow = "hidden";
                        dockContentContainerElement.style.overflow = "auto";
                        dockElement.style.overflow = "hidden";
                        zoneGlobal = null;
                        dockGlobal = null;
                    }, 430);
                    //The 430 milliseconds are hardcoded (the time needed for the menu to close)
                    //You can change this value to your specific needs
                }
            }
        </script>
        <div>
            <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
                <table>
                    <tr>
                        <td style="vertical-align: top">
                            <telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="150px"
                                MinHeight="400px">
                                <telerik:RadDock ID="RadDock1" runat="server" Title="Blogs" Width="100px" EnableAnimation="true"
                                    EnableRoundedCorners="true" Resizable="true">
                                    <ContentTemplate>
                                        <telerik:RadMenu ID="RadMenu2" runat="server" EnableRoundedCorners="true" EnableShadows="true"
                                            ClickToOpen="true">
                                            <Items>
                                                <telerik:RadMenuItem Text="Tools" AccessKey="T">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="Spelling And Grammar..." AccessKey="S" />
                                                        <telerik:RadMenuItem Text="Research..." AccessKey="R" />
                                                        <telerik:RadMenuItem Text="Language" AccessKey="L" />
                                                        <telerik:RadMenuItem Text="Word Count..." AccessKey="W" />
                                                        <telerik:RadMenuItem IsSeparator="True" />
                                                        <telerik:RadMenuItem Text="Track Changes" AccessKey="T" />
                                                        <telerik:RadMenuItem Text="Compare And Merge Documents.." AccessKey="D" />
                                                    </Items>
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenu>
                                    </ContentTemplate>
                                </telerik:RadDock>
                            </telerik:RadDockZone>
                        </td>
                        <td style="vertical-align: top">
                            <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" Width="560px"
                                MinHeight="400px">
                                <telerik:RadDock ID="RadDock2" runat="server" Title="News" Width="100px" EnableAnimation="true"
                                    EnableRoundedCorners="true" Resizable="true">
                                    <ContentTemplate>
                                        RadDock Sample Content
                                    </ContentTemplate>
                                </telerik:RadDock>
                                <telerik:RadDock ID="RadDock3" runat="server" Title="News" Width="100px" EnableAnimation="true"
                                    EnableRoundedCorners="true" Resizable="true">
                                    <ContentTemplate>
                                        RadDock Sample Content
                                    </ContentTemplate>
                                </telerik:RadDock>
                                <telerik:RadDock ID="RadDock4" runat="server" Title="News" Width="100px" EnableAnimation="true"
                                    EnableRoundedCorners="true" Resizable="true">
                                    <ContentTemplate>
                                        RadDock Sample Content
                                    </ContentTemplate>
                                </telerik:RadDock>
                            </telerik:RadDockZone>
                        </td>
                    </tr>
                </table>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>


    Kind regards,
    Pero
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top