Hello Telerik team,

Our customer uses RadMenu as a navigation menu and utilizes https://hub.accessible360.com/ to guide their accessibility checks. Based on the results, they have shared the following suggestions for improving accessibility:

Navigation menus that open on hover must also be operable by keyboard and screen reader users. Depending on the desired functionality of the top-level navigation items, there are two recommended approaches:

• If the top-level item only triggers a submenu and does not navigate to a new page, it should be marked up as a <button>. Refer to the appropriate code sample for implementation guidance ( code sample )

• If the top-level item must both navigate to a page and open a submenu, an adjacent <button> should be added to control the submenu. Refer to the corresponding code sample for details ( code sample )

• If visual design constraints prevent displaying a separate visible button, the button can be visually hidden by default and revealed on focus, as demonstrated in the linked code sample (code sample)

Is there a way to implement these recommendations using RadMenu?

Thanks in advance,

Lan

Hello Telerik Team,

Our customers are using the Telerik Menu component, but they have noticed that its keyboard functionality does not align with the web accessibility standards outlined in the W3C ARIA Authoring Practices. You can review these guidelines at the following link: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/. The page also includes a demo that showcases the expected keyboard behavior for menus.

Is there a way to address these keyboard accessibility issues? If not, are there any planned updates or changes in upcoming releases that will resolve this?

Thanks in advance,

Judy

Hello Telerik Team,

Our customers have found that using the tab and arrow keys for navigation through the radmenu is inconsistent.

For example, when a user tabs into a radmenu item, uses the arrow keys to navigate to other menu items, and then hits the tab key again, the selection jumps to the last tab location instead of the current arrow key location.

Is there any way to make the arrow keys behave the same as the tab key, please?

Thanks in advance,

Lan

Dear All,

I'm using radcontextmenu with radgrid. Normally right click event on all rows of radgrid is showing menus. It is ok. But after i drag and group roomtype column, some rows right click event is showing radcontextmenus and some rows right click event is showing browser default menus. When i debug in browser, showing "TypeError: Cannot read properties of undefined (reading 'getDataKeyValue')"  in  RadGridID.get_masterTableView().get_dataItems()[currentSelectedRowIndex].getDataKeyValue("ReservationKey")) of javascript file. I searched in google, but not found. Please ask me. What I need to change or code?

.aspx

<telerik:RadGrid ID="RadGrid1" EnableViewState="true" ViewStateMode="Enabled" GridLines="None" MasterTableView-GroupLoadMode="Server"
    runat="server" ShowStatusBar="false" AllowSorting="true" ShowGroupPanel="true" ShowFooter="true"
    OnNeedDataSource="grdReservation_NeedDataSource" OnSortCommand="grdReservation_SortCommand" OnItemDataBound="grdReservation_ItemDataBound" OnItemCommand="grdReservation_ItemCommand">
    <MasterTableView AutoGenerateColumns="false" DataKeyNames="ReservationKey" ItemStyle-Wrap="true" Width="100%" GroupsDefaultExpanded="false"
        ClientDataKeyNames="ReservationKey,Status,Remark,SubFolioBalance">
        <Columns>            
            <telerik:GridBoundColumn DataField="Status" HeaderStyle-Width="25px" SortExpression="Status" UniqueName="Status">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ReservationType" HeaderStyle-Width="25px" SortExpression="ReservationType" UniqueName="Type">
            </telerik:GridBoundColumn>                      
            <telerik:GridBoundColumn DataField="Company" HeaderStyle-Width="160px" HeaderText="Group Name/Company" SortExpression="Company" ItemStyle-Wrap="false"
                UniqueName="GroupNameCompany">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="RoomType" HeaderText="RoomType" SortExpression="RoomType" HeaderStyle-Width="80px"
                UniqueName="RoomType">
            </telerik:GridBoundColumn>            
            <telerik:GridBoundColumn DataField="Balance" HeaderStyle-Width="70px" HeaderText="Balance" SortExpression="Balance" ItemStyle-HorizontalAlign="Right"
                UniqueName="Balance">
            </telerik:GridBoundColumn>            
        </Columns>
        <NoRecordsTemplate>
            No Records
        </NoRecordsTemplate>
    </MasterTableView>
    <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" AllowDragToGroup="true" EnableRowHoverStyle="true" AllowGroupExpandCollapse="false"  AllowRowsDragDrop="true">
        <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
        <Resizing AllowColumnResize="True" AllowRowResize="false" ResizeGridOnColumnResize="false" ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="380px" SaveScrollPosition="true" />
        <ClientEvents OnRowDblClick="rowDblClick" OnRowSelected="OnRwSelected" OnRowMouseOver="OnRowMouseOver" OnRowContextMenu="rowContextMenu" />
    </ClientSettings>
</telerik:RadGrid>
<telerik:RadContextMenu ID="RadContextMenu1" runat="server" EnableRoundedCorners="true" RenderMode="Lightweight" SkinID="MinimalSetOfTools" CssClass="centered-editor" Width="300px" EnableShadows="true"
    OnClientItemClicking="onContextMenuItemClick"
    OnClientShowing="onClientContextMenuShowing">
    <DefaultGroupSettings ExpandDirection="Auto" Flow="Vertical" />
</telerik:RadContextMenu>

<script src="../JavaScripts/util/Utilities.js" type="text/javascript"></script>
<script src="../JavaScripts/util/WrapperRadGrid.js" type="text/javascript"></script>
<script src="../JavaScripts/bal/Reservation.js" type="text/javascript"></script>
<script src="../../JavaScripts/lib/jquery.blockUI.min.js" type="text/javascript"></script>

<script type="text/javascript">

function ReloadSelectedRow() {
    var grid = $find("<%=grdReservation.ClientID%>");
    var master = grid.get_masterTableView();

    var scrollArea = document.getElementById(grid.get_element().id + "_GridData");
    var row = master.get_selectedItems()[0];
    currentSelectedRowIndex = row.get_itemIndex();
    GlobalObjectControls.ResKey = row.getDataKeyValue("ReservationKey");
    if (row) {
        if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
            //scroll down to selected row                     
            scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
                row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight + 150;
        }
        //if the position of the the selected row is above the viewable grid area  
        else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
            //scroll the selected row to the top                   
            scrollArea.scrollTop = row.get_element().offsetTop;
        }
    }
}

</script>

 <script type="text/javascript" id="commonMethods">
     var GlobalObjectControls = {};

     Sys.Application.add_load(
         function loadHandler() {
             Sys.Application.remove_load(loadHandler);             
             ReloadSelectedRow();
         });

</script>

<script>

function rowContextMenu(sender, eventArgs) {
    currentSelectedRowIndex = eventArgs.get_itemIndexHierarchical();    
    eventArgs.get_tableView().selectItem(eventArgs.get_itemIndexHierarchical());
    var menu = GlobalObjectControls.ContextMenu;    
    var evt = eventArgs.get_domEvent();
    menu.show(evt);
    evt.cancelBubble = true;
    evt.returnValue = false;
    if (evt.stopPropagation) {
        evt.stopPropagation();
        evt.preventDefault();
    }
}

function OnRwSelected(sender, args) {
    GlobalObjectControls.ResKey = args.getDataKeyValue('ReservationKey');
    currentSelectedRowIndex = args.get_itemIndexHierarchical();        
}

function onClientContextMenuShowing(sender) {    
    enabledisableMenuItems();
}

function enabledisableMenuItems() {
    var menu = GlobalObjectControls.ContextMenu;
    alert("ok" + currentSelectedRowIndex);    // this is ok, index is showing
   

var reservationkey = GlobalObjectControls.GridReservation.get_masterTableView().get_dataItems([currentSelectedRowIndex]

.getDataKeyValue("ReservationKey");  // this row is showing error "can't read properties of undefined

    var status = GlobalObjectControls.GridReservation.get_masterTableView().get_dataItems()[currentSelectedRowIndex].getDataKeyValue("Status");
    var reservationType = getReservationType();

menu.enable();

}

function onContextMenuItemClick(sender, args) {

}

</script>

I am attempting to show a 'tooltip'-like window/div on the RadGrid Columns context menu panel that slides out when you hover over 'Columns'. 

The div is shown on the 'mouseenter' event, and then removed on the 'mouseout' event.  The issue I'm experiencing is that the 'Columns' context menu will hide itself shortly after the 'tooltip' div is shown, thus causing the window to immediately be removed from the DOM. 

Is there a more effective way to produce this kind of behavior?  Additionally, I'm targeting the 'li.rmitem.rmtemplate' class, and I'm also wondering if that is the most appropriate one?

In this code snippet from the ClientEvents OnGridCreated event, I'm populating the 'tooltip' div with the column heading, but it will eventually be replaced with dynamic data based upon which column heading is hovered over.

let columnSlideOutItems = document.querySelectorAll('li.rmitem.rmtemplate');

columnSlideOutItems.forEach(function (c) {
	let thisNode = c.childNodes[0];
	let tooltip = document.createElement('div');
	tooltip.style.position = 'absolute';
	tooltip.style.backgroundColor = '#fff';
	tooltip.style.border = '1px solid #000';
	tooltip.style.padding = '10px';

	tooltip.innerHTML = thisNode.innerText;
	document.body.appendChild(tooltip2);

	thisNode.addEventListener('mouseenter', function (e) { 
		console.log(this.innerText);
		tooltip.style.left = e.pageX + 'px';
		tooltip.style.top = (e.pageY - 22) + 'px';
		tooltip.style.zIndex = 99999;
	});

	thisNode.addEventListener('mouseout', function (e) {
	    if (tooltip) tooltip.remove();
	});
});

Hi all,

I encountered a really strange problem. After updating the project to use the latest version of the ASP.NET AJAX controls an error saying "Cannot use a leading .. to exit above the top directory" when a toolbar button is pressed or when an edit form is closing. After some investigation I found out that the issue is being caused by the RadMenu, as when I removed all the buttons, using the Chrome inspector, and clicked the toolbar icon, the application worked as expected.

Otherwise the menu itself is fully functional.

This is the stack trace of the exception if it is going to help:

[HttpException (0x80004005): Cannot use a leading .. to exit above the top directory.] System.Web.Util.UrlPath.ReduceVirtualPath(String path) +12081723 System.Web.Util.UrlPath.Reduce(String path) +60 System.Web.UI.Control.ResolveClientUrl(String relativeUrl) +259 Telerik.Web.UI.RadButton.DescribeClientProperties(IScriptDescriptor descriptor) +2227 Telerik.Web.UI.RadWebControl.DescribeComponent(IScriptDescriptor descriptor) +233 Telerik.Web.UI.RadButton.DescribeComponent(IScriptDescriptor descriptor) +27 Telerik.Web.UI.ScriptRegistrar.GetScriptDescriptors(Control control) +171 Telerik.Web.UI.RadWebControl.GetScriptDescriptors() +9 System.Web.UI.ScriptControlManager.RegisterScriptDescriptors(IScriptControl scriptControl) +166 Telerik.Web.UI.RadWebControl.RegisterScriptDescriptors() +159 Telerik.Web.UI.RadWebControl.Render(HtmlTextWriter writer) +122 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 Telerik.Web.UI.Menu.Renderers.MenuItemRenderer.RenderTemplateContent(HtmlTextWriter writer, Action`1 action) +288 Telerik.Web.UI.Menu.Renderers.MenuItemRenderer.RenderContents(HtmlTextWriter writer) +171 System.Web.UI.WebControls.WebControl.Render(HtmlTextWriter writer) +50 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 Telerik.Web.UI.Menu.Renderers.MenuItemRendererBase.RenderChildGroup(HtmlTextWriter writer, IList`1 items, String groupCssClass, Action action) +203 Telerik.Web.UI.Menu.Renderers.MenuItemRenderer.RenderColumns(HtmlTextWriter writer, IList`1 itemsToRender, String groupCssClass) +587 Telerik.Web.UI.Menu.Renderers.MenuItemRenderer.RenderContentWrapper(HtmlTextWriter writer, Action`1 action) +77 Telerik.Web.UI.Menu.Renderers.MenuItemRendererBase.RenderContents(HtmlTextWriter writer) +133 System.Web.UI.WebControls.WebControl.Render(HtmlTextWriter writer) +50 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 Telerik.Web.UI.Menu.Renderers.MenuRendererBase.RenderRootGroup(HtmlTextWriter writer, Action`1 action) +263 Telerik.Web.UI.Menu.Renderers.MenuRenderer.RenderContents(HtmlTextWriter writer) +703 System.Web.UI.WebControls.WebControl.Render(HtmlTextWriter writer) +50 Telerik.Web.UI.RadDataBoundControl.Render(HtmlTextWriter writer) +94 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +247 System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) +47 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +247 System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) +47 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +247 System.Web.UI.HtmlControls.HtmlForm.RenderChildren(HtmlTextWriter writer) +131 System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) +47 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 System.Web.UI.HtmlControls.HtmlForm.RenderControl(HtmlTextWriter writer) +50 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +247 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +247 System.Web.UI.Page.Render(HtmlTextWriter writer) +39 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 Telerik.Web.UI.RadAjaxControl.RenderPageInAjaxMode(HtmlTextWriter writer, Control page) +959 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +114 System.Web.UI.Page.Render(HtmlTextWriter writer) +39 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +79 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +8817

When initializing a RadScheduler control on a mobile browser (examples are iOS Safari and Android Edge), the javascript plugins code crashes when trying to call `add_hiding` (assuming an event handler).

On the mobile browser, the issue isn't present when to toggle `View Desktop Site`.

From the error stack trace, the second line for `Plugin.js` points to:

Which looks like there's some handling to make context menus work on mobile device.

Any clues as to why `add_hiding` fails on mobile view?

I am attempting to put a radmenu inside of a radgrid gridTemplateColumn. The radmenu appears to have a vertical separator at the end that I have been unable to identify and remove which is underlined in red in the image below. 

Markup is as follows. CSS below.

<!--grid markup removed other than relevant column -->
<telerik:GridTemplateColumn UniqueName="ParentGridMenu" HeaderStyle-Width="24px">
    <ItemTemplate>
        <telerik:RadMenu ID="menuParentRow" runat="server" Width="24px" ClickToOpen="true">
            <Items>
                <telerik:RadMenuItem ImageUrl="~/images/vertical-ellipsis-24.png" runat="server" Height="24px" Width="24px">
                    <Items>
                        <!--items removed as not relevant -->
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </ItemTemplate>
</telerik:GridTemplateColumn>

    .rmRootGroup
   {
       border:none !important;
       background-color:transparent !important;
       background-image:none !important;
   },
.RadMenu_Default .rmVertical a.rmLink:hover,
.RadMenu_Default .rmVertical a.rmFocused,
.RadMenu_Default .rmVertical a.rmSelected,
.RadMenu_Default .rmVertical a.rmExpanded,
.RadMenu_Default .rmVertical a.rmExpanded:hover {
   border:0 !important;
   padding-bottom:1px !important;
   padding-top:1px !important;
   background-color:transparent !important;
   background-image:none !important;
}

Hi,

I am updating a JQuery version  3.7.0 on our website. I have gotten many errors.

Using RadMenu's, submenu is getting expanded on click but if I click on other submenu previous one is not getting collapsed and it remain open only.

 I tried below javascript, got it from Telerik forums. It is working for level 1 menu items not for submenu items (level 2 menu items) and sub-submenu items(level 3 items) also.

I have to click twice on level 2 items to open level 3 items.

Code:

    <script type="text/javascript">

        function onClientItemClicked(sender, args) {
            sender.close(true);
        }
        function OnClientMouseOverHandler(sender, eventArgs) {
            if (eventArgs.get_item().get_parent() == sender) {
                sender.set_clicked(false);
            }
        }
     </script>