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

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 us to truly disable the menu item (i.e., prevent interaction at the li tag 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?

Any guidance or alternatives would be greatly appreciated.

Here's some snipped for visual guide

import { MenuItem } from '@progress/kendo-angular-menu';

export interface ContextMenuItemModel extends MenuItem {
menuKey: string;
}

getMenuItems(): ContextMenuItemModel[] {
return [
{ menuKey: 'Edit', text: 'Edit' },
{ menuKey: 'Delete', text: 'Delete', disabled: true },
];
}

<kendo-contextmenu
[items]="getMenuItems"
(select)="onContextMenuItemSelect($event)"
[kendoMenuHierarchyBinding]="getMenuItems"
[textField]="['text']"
>
</kendo-contextmenu>


Thank you!

Continue reading...