RadMenu Sub Menus Expand onClick but not onMouseHover

5 posts, 0 answers
  1. Rajender
    Rajender avatar
    8 posts
    Member since:
    Apr 2013

    Posted 05 Nov 2013 Link to this post

    Hi,
    i need to expand sub menus onClick but not onMouserHover. i have tried it by adding a property ClickToOpen="True"  but while clicking on menu sub menus are opening, page is taking a postback and sub menus are closing again. Sub menus should be in open state but it is closing. Requesting to provide me some solution on this.

    Thanks and Regards
    A.Rajender
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Nov 2013 Link to this post

    Hi Rajender,

    If you have attached the OnItemClick server side event of the RadMenu, then postback happens on clicking the menu items and the RadMenu items remain closed. So if that is the case you can open the menu items by calling a script from the server side as shown in the following code.

    ASPX:

    <telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="true" OnItemClick="RadMenu1_ItemClick">
        <Items>
            <telerik:RadMenuItem Text="Menu1" runat="server">
                <Items>
                    <telerik:RadMenuItem Text="submenu1" runat="server">
                        <Items>
                            <telerik:RadMenuItem Text="submenu1.2" runat="server">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="submenu1.3" runat="server">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Menu2" runat="server">
                <Items>
                    <telerik:RadMenuItem Text="submenu1.1" runat="server">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="submenu1.2" runat="server">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

     C#:
    protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
    {
        if (e.Item.Items.Count > 0)
        {
            string menuItem = e.Item.Text;
            string script = "function f(){openMenu('" + menuItem + "'); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
        }
    }

    JavaScript:
    <script type="text/javascript">
        function openMenu(itemText) {
            $find("RadMenu1").findItemByText(itemText).open();
        }
    </script>

    Thanks,
    Shinu.
  3. Mukesh
    Mukesh avatar
    5 posts
    Member since:
    Dec 2018

    Posted 20 Aug Link to this post

    So if that is the case you can open the menu items by calling a script from the server side as shown in the following code.

    I am having same problem to solve and the code you posted is giving errors saying "Unknown Function openMenu"

    I didnt understand the quoted text. Could anyone please elaborate. I have already spent too many hours over this "RadMenu opening on click" thing.

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    589 posts

    Posted 23 Aug Link to this post

    Hello Mukesh,

    The code behind snippet that Shinu shared is actually registering a function that will be executed on page load on the client. This function, internally calls another function (called openMenu) that is share in the code snippet below. 

    As the openMenu function is relatively simple, you can combine it with the server-side function as demonstrated in the code snippet below:

    protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
    {
        if (e.Item.Items.Count > 0)
        {
            var menu = sender as RadMenu;
            var menuClientID = menu.ClientID;
            string menuItemText = e.Item.Text;
            string script = "function f(){"+
                    "$find('"+menuClientID+"').findItemByText('" + menuItemText + "').open(); "+
                    "Sys.Application.remove_load(f);" +
                "}Sys.Application.add_load(f);";
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
        }
    }

    Generally, this approach of loading a Client-side code from the Server-side is very common and more on it you can find here:

    Regards, Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Mukesh
    Mukesh avatar
    5 posts
    Member since:
    Dec 2018

    Posted 23 Aug Link to this post

    Thanks Peter Milchev,

    Actually there were many problems I had to overcome in order to get it working... I was able to get output but certain issues still remain.

    1) The click on menuitem does a postback and a menuopen on client side which causes an annoying blink of the screen.

    2) On a mobile the website displays a toggle handle which is too small to be able to click on. I would suggest not to have any navigate URL on menuitems with submenus and let user click on menuitems themselves to open.

    Other than these two minor issues, I would be very happy to use a radmenu in my projects and recommend others too.

    Cheers!

Back to Top