ContextMenu: No way to disable menu items

Radzen.Blazor Components
1

There's no way to disable context menu items based on target data.

Example of what it should look like:

image
image305×175 3.77 KB

Sample code:
@inject ContextMenuService ContextMenuService
@inject DialogService DialogService

ShowContextMenuWithItems(args, data.FirstOrDefault())) ButtonStyle="ButtonStyle.Secondary" Size="ButtonSize.Large" />

@code {
EventConsole console;

class SampleData
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsSpecial { get; set; }
}

IEnumerable<SampleData> data = new List<SampleData> 
{ 
    new SampleData { Id = 1, Title = "Data Item 1", IsSpecial = true }, 
    new SampleData { Id = 2, Title = "Data Item 2", IsSpecial = false } 
};

void ShowContextMenuWithItems(MouseEventArgs args, SampleData dataItem)
{
    //ContextMenuService.Open(args,
    //    new List<ContextMenuItem> {
    //        new ContextMenuItem(){ Text = "Context menu item 1", Value = 1, Icon = "home" },
    //        new ContextMenuItem(){ Text = "Context menu item 2", Value = 2, Icon = "search" },
    //        new ContextMenuItem(){ Text = "Context menu item 3", Value = 3, Icon = "info" },
    // }, OnMenuItemClick);

    var items = new List<ContextMenuItem>();

    ContextMenuService.OpenContextMenu(args, 
        new List<ContextMenuItem>
        {
            new ContextMenuItem() { Text = "Delete", /*Disabled = dataItem.IsSpecial, */ Icon = "delete", Value = EventCallback.Factory.Create<MenuItemEventArgs>(this, () => OnMenuItemDeleteClickAsync(dataItem)) }, 
            new ContextMenuItem() { Text = "Report", Icon = "bug_report", Value = EventCallback.Factory.Create<MenuItemEventArgs>(this, () => OnMenuItemReportClickAsync(dataItem)) }
        });
}

//void OnMenuItemClick(MenuItemEventArgs args)
//{
//    console.Log($"Menu item with Value={args.Value} clicked");
//    if(!args.Value.Equals(3) && !args.Value.Equals(4))
//    {
//        ContextMenuService.Close();
//    }
//}

async Task OnMenuItemDeleteClickAsync(SampleData dataItem)
{
    bool confirmed = await DialogService.Confirm($"Delete '{dataItem.Title}'?", "Delete Data Item", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" }) ?? false;
    ContextMenuService.Close();
    if (!confirmed)
    {
        return;
    }
    
    // TODO: Delete 
}

async Task OnMenuItemReportClickAsync(SampleData dataItem)
{
    bool confirmed = await DialogService.Confirm($"Report '{dataItem.Title}'?", "Report Data Item", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" }) ?? false;
    ContextMenuService.Close();
    if (!confirmed)
    {
        return;
    }

    // TODO: Report
}

}

2

You can add different menu items depending on your data item:

image
image1920×1080 296 KB

3

Thank you very much for the quick response.

That is exactly what I have already done. However, all context menu items should always be present and then either activated or deactivated (based on data).

So it should work like this: Blazor Context Menu - Data Binding Overview - Telerik UI for Blazor

4

There is no Disabled property for the menu item however we are open to pull requests!