[Solved] [Angular] Custom Grid Column Menu not accessible using keyboard navigation

[Timon]

Hello,

I'm trying to get a custom column menu item list using the Angular Grid to work, but it does not seem to be accessible through the keyboard.

See following Stackblitz for a reproduction example: https://stackblitz.com/edit/angular-tzm2tpqt?file=src%2Fapp%2Fapp.component.ts

I navigated to a header column using tab to focus the grid and the arrow keys to select a specific header column, then pressed ALT + Arrow Down to open the column menu. The column menu opens as expected, but the initial menu item is not focussed and I cannot access the menu items using the keyboard. Instead, the grid is still focussed.

Any advice on what might be wrong in this example would very much be appreciated.

[Martin Bechev]

Hello Timon,

When creating custom components in the column menu, you need to set the kendoGridColumnMenuItem directive to the reference of the component itself:

https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu#customizing-the-content

 <kendo-grid-columnmenu-item
        #custom1
          [kendoGridColumnMenuItem]="custom1"
          [service]="service"
          (itemClick)="clickMenuItem(service)"
          text="Menu Item 1"
        />
        <kendo-grid-columnmenu-item>

Here is an updated example:

https://stackblitz.com/edit/angular-tzm2tpqt

I hope this helps.

Regards,
Martin Bechev
Progress Telerik