RadMenu Sub Menus Expand onClick but not onMouseHover

[Rajender]

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

[Shinu]

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.

[Mukesh]

[quote]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.[/quote]

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.

[Peter Milchev]

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:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/executing-javascript-code-from-server#when-using-aspnet-ajax

Regards, Peter Milchev
Progress Telerik

[Mukesh]

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!