Reproduction - http://somup.com/crVYIDot19
Setup to reproduce:
<telerik:RadContextMenu ID="RadContextMenu1" runat="server">
<Targets>
<telerik:ContextMenuDocumentTarget />
</Targets>
<Items>
<telerik:RadMenuItem Text="item">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" />
</ItemTemplate>
</telerik:RadMenuItem>
</Items>
</telerik:RadContextMenu>
<telerik:RadButton runat="server" ID="RadButton2" Text="Postback" AutoPostBack="true" />
Steps to reproduce:
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>
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">
RadContextMenu does not appear when there are more than one forms on the page and one of them is hidden.
Steps to reproduce:
<!DOCTYPE html>
<%@ Register Namespace="Telerik.Web.UI.Debug" TagPrefix="debug" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="searchform" style="display:none">aaa</form>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<telerik:RadEditor ID="radEditor1" runat="server">
<Content>
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<br />
</Content>
</telerik:RadEditor>
</form>
</body>
</html>
<
telerik:RadMenu
ID
=
"RadMenu1"
RenderMode
=
"Mobile"
runat
=
"server"
></
telerik:RadMenu
>
protected
void
Page_Load(
object
sender, EventArgs e)
{
RadMenu1.RenderMode = RenderMode.Mobile;
RadMenu1.Width = 300;
for
(
int
i = 0; i < 10; i++)
{
var radmenuItem =
new
RadMenuItem();
radmenuItem.Text =
"demo radmenu item "
+ i.ToString();
for
(
int
j = 0; j < 10; j++)
{
var radmenuItemChild =
new
RadMenuItem();
radmenuItemChild.Text =
"demo radmenu item child "
+ j.ToString();
radmenuItem.Items.Add(radmenuItemChild);
}
RadMenu1.Items.Add(radmenuItem);
}
}
RadMenu renders unneeded scroll button to its nested items in high DPI monitor. The problem can be reproduced with in 4K monitor (the zoom level does not matter). Steps to reproduce: 1. Open https://demos.telerik.com/aspnet-ajax/menu/examples/overview/defaultcs.aspx?page=tables in high DPI monitor (4K) 2. Hover the Products item Result: A scroll button is shown over the last 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>
the scroll arrows do not have a proper z-index and get hidden when an item that is half-shown behind them is hovered, because this item gets a higher z-index. attached is a video of the problem WORKAROUND: - set z-index to the arrows: .RadMenu .rmBottomArrow, .RadMenu .rmTopArrow { z-index: 31 !important; }
Video: https://www.screencast.com/t/lyemH3IjT JavaScript error "unable to get property 'handleEvent' of undefined or null reference" from Telerik.Web.Ui.WebResource.axd is thrown.
A workaround is to set <DefaultGroupSettings OffsetX="WIDTH OF THE ROOT MENU" ExpandDirection="Left" />
Go to http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/rendermodes/defaultcs.aspx?Skin=Glow Switch to RenderMode="Classic" and select some menu item. It will become gray colorized instead of yellow. The gradient should be removed. Workaround: Put the following style on the page with the menu control: <style> .rmLink.rmSelected { background-color: #db9810 !important; } </style>
Due to recent changes to the keyboard accessibility of the RadMenu (i.e. it is now only accessible using the arrow keys instead of moving around using tabs), mega menus are no longer keyboard accessible. We have designed a mega menu using a telerik RadSiteMap embedded in a RadMenu control, as suggested in the Telerik Demo site: http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultcs.aspx However, this is no longer accessible. Previously, you could open the dropdown by pressing the down button, then move around in the dropdown using tab. Now, however, pressing tab just closes the dropdown. We need the menu to be accessible in one way or another.