Currently, as mobile browsers scroll bars are transparent and initially not visible, there is no indication to suggest to users that a mobile RadMenu can be scrolled down to see items not currently displayed.
The suggestion it to add a mobile RadMenu visual indicator which shows to users that there are more items to be seen on scrolling the menu. It would enable customers to set a mobile RadMenu height that does not fit all items, and indicate to users that the expanded menu is scrollable.

While it is possible to set the item image using the item's CssClass property (http://www.telerik.com/help/aspnet-ajax/menu-appearance-item-images.html), it would be great to be able to set that directly to the span element with class rmLeftImage.

Otherwise, it's necessary to use JavaScript or a CSS pre-processor like LESS to assign font-based images via classes (LESS would be required only to avoid duplicating CSS).

The same would apply to just about any control that supports item images, e.g. TreeView.

Basically, I would like to be able to set a default state for the menu (which menu is open and which menu item has focus) in code behind (like the Page Load event).

The menu would start off showing the designated menu as open and the designated menu item would have focus but the user would still be able to hover over other menus to open them (the default open menu would then collapse).

If the user ends up moving the mouse off the menu without clicking anything, the menu would then automatically revert to the default state set in Page Load.

Currently, the only way to implement this functionality is to use hidden fields to store the open menu/focused menu item info (on Page Load) and then capture a bunch of JavaScript client events to setup the default menu state, collapse the menu when a different menu is hovered over and reset the menu to the default state when the mouse moves away without clicking.

It works but it's a lot of client code and occasionally the JavaScript events don't fire correctly (or in the correct sequence) and the menu won't reset properly or maybe the sub menus will overdraw each other.

It's a lot of work for something that I think should be built into the core RadMenu control. I'm also concerned about using so much JavaScript because I've been developing web apps for 15 years (using Telerik for 10 years) and every few years all my JavaScript code breaks (due to browser changes) and has to be rewritten. I'd much rather just set the relevant properties in code behind and let you guys worry about updating the client code.

It would be great to just set the default state in code behind and have the menu reset to that state when it loses focus. You could also have a reset timeout so that the menu will reset after the mouse is off the menu for a set number of seconds.

A quick Google search shows that people have been asking for an easy way to implement this for years.

The default behavior of the mobile menu is the following: when popup with root items is opened, its height is calculated depend on root items count and their height. After opening a sub-menu, where items count is different, the popup height is not updated.

The suggestion is to add a functionality to popup menu to update its height every time after opening a next item.

Hovering over the RadMenu sub-item toggle arrow icon does not expand its sub-item.

Can be reproduced with the following configuration:



<telerik:RadMenu ID="RadMenu2" _OnClientLoad="OnClientLoad" runat="server" RenderMode="Auto" ShowToggleHandle="true">
    <Items>
        <telerik:RadMenuItem Text="Main Menu">
            <Items>
                <telerik:RadMenuItem Text="Item 1">
                    <Items>
                        <telerik:RadMenuItem Text="Sumbenu 1"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sumbenu 2"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Item 2">
                    <Items>
                        <telerik:RadMenuItem Text="Sumbenu 3"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sumbenu 4"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>



Workaround:

                <script>
                    var menuItem = null;
     
                    function OnClientLoad(sender) {
                        $telerik.$(".rmToggle,.rmToggle *").on("mouseover", ExpandMenu);
                    }
                    function ExpandMenu() {
                        var item = $telerik.$(this).closest('.rmItem')[0]._item
                        if (!item.get_isOpen()) {
                            item.open()
                        }
                    }
                </script>

This can be achieved if the role=menubar is set to the <ul> element containing the <li> menu items instead of the wrapper <div> element.

In this example from the WAI-ARIA Practices site, JAWS announces "1 of 3", "2 of 3", and "3 of 3" as the top-level menus are navigated.

https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html

 Workaround from Admin:

<script>
    function OnClientLoad(sender, args) {
        $telerik.$(sender.get_element()).removeAttr("role").find(">").attr("role", "menubar")
    }
</script>
<telerik:RadMenu runat="server" ID="RadMenu1" EnableAriaSupport="true"  RenderMode="Lightweight" OnClientLoad="OnClientLoad" TabIndex="1">

The boundary detection is not applied to the ContentTemplate of a ContextMenu item:

<telerik:RadContextMenu runat="server" ID="RadContextMenu1" EnableScreenBoundaryDetection="true"  >
	<Items>
		<telerik:RadMenuItem Text="Item 1" Value="1">
		</telerik:RadMenuItem>
		<telerik:RadMenuItem Text="Item 2" Value="2" >
			<GroupSettings Width="400px" />
			<ContentTemplate>
				<div style="width: 400px;">
				some content here
				</div>
			</ContentTemplate>
		</telerik:RadMenuItem>
	</Items>
</telerik:RadContextMenu>