This is a migrated thread and some comments may be shown as answers.

RadMenu Sub Menus Expand onClick but not onMouseHover

4 Answers 130 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Rajender
Top achievements
Rank 1
Rajender asked on 05 Nov 2013, 07:34 AM
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

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 05 Nov 2013, 12:18 PM
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.
0
Mukesh
Top achievements
Rank 1
answered on 20 Aug 2019, 08:15 AM

[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.

0
Peter Milchev
Telerik team
answered on 23 Aug 2019, 08:14 AM

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.
0
Mukesh
Top achievements
Rank 1
answered on 23 Aug 2019, 11:04 AM

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!

Tags
Menu
Asked by
Rajender
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Mukesh
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or