Kendo Angular ContextMenu: Disable Item When Using [items] Binding

[Arnold]

Hi Telerik Team,

I'm currently using the <kendo-contextmenu> (@progress/kendo-angular-menu v15.3.0.) component in an Angular application, and I'm binding menu items dynamically using the [items] input.

I would like to conditionally disable a specific menu item based on a boolean variable. However, I’ve found that the disabled property on a MenuItem is not respected when using data-binding mode.


What I've tried so far:
Adding disabled: true and cssClass in the item definition

Using kendoContextMenuItemTemplate with custom ngClass to style the item

Preventing the (select) event manually

Styling with pointer-events: none

Injecting disabled attribute at runtime using requestAnimationFrame as a workaround

Problem:
None of the above approaches allow me to truly disable the menu item (i.e., prevent interaction at the <li> level) via a clean Angular-style directive or binding.

Question:

Is there an officially supported way (or recommended workaround) to disable items in a Kendo Angular ContextMenu when using the [items] binding?

If not currently supported, is this on the roadmap?

Any guidance or alternatives would be greatly appreciated.

Thank you!

[Martin Bechev]

Hello Arnold,

To disable an item when using the items binding property, enable the disabled property for the desired item:

  public items: MenuItem[] = [
    {
      text: 'Item1',
      disabled: true,
      items: [{ text: 'Item1.1' }, { text: 'Item1.2' }],
    },
    {
      text: 'Item2',
    },
    {
      text: 'Item3',
    },
  ];

You can also bind the Menu data through the kendoMenuHierarchyBinding directive and set the disabledField property to a field (or set of fields) that will contain the boolean value for the disabled state. Here is an example:

https://stackblitz.com/edit/angular-6xw1ap8q?file=src%2Fapp%2Fapp.component.ts

I hope this helps.

Regards,
Martin Bechev
Progress Telerik