How to open Syncfusion Blazor Kanban edit dialog from context menu?

In order to open the Blazor kanban card dialog to edit it from a context menu, you can follow the steps below:

1. Save the left and top value from BeforeOpenCloseMenuEventArgs of the OnOpen event which gets or sets an event callback that is raised before opening the menu item of the context menu.
2. Use the position values to get the Card Details using the GetTargetDetailsAsync public method.
3. With the card details, you can edit the data using the OpenDialogAsync public method.

Here is a sample code snippet demonstrating the context menu integration:

<SfKanban @ref="KanbanRef" KeyField="Status" DataSource ="@cardData">
    <KanbanColumns>
        @foreach (ColumnModel item in columnData)
        {
            <KanbanColumn headertext="@item.HeaderText" keyfield="@item.KeyField">
        }
    </KanbanColumn></KanbanColumns>
    <KanbanCardSettings HeaderField="Title" Contentfield="Summary" GrabberField="Color" FootercssField="ClassName" TagsField="CardTags">
</KanbanCardSettings></SfKanban>
<SfContextMenu Target=".e-card" TValue="MenuItem"  >
    <MenuItems>
        <MenuItem Text="Edit" Id="EditBtn" IconCss="e-icons e-edit"></MenuItem>
        <MenuItem Text="Add" Id="AddBtn" IconCss="e-icons e-plus"></MenuItem>
    </MenuItems>
    <MenuEvents TValue="MenuItem" ItemSelected="OnItemSelect" OnOpen="OnItemOpen" />
</SfContextMenu>

In the above code, the OnItemOpen method saves the left and top values, and the OnItemSelect method uses these values to get the card details and open the dialog for editing or adding data.

private async Task OnItemOpen(BeforeOpenCloseMenuEventArgs<MenuItem> args)
    {
        left = (int)args.Left;
        top = (int)args.Top;
    }
    private async Task OnItemSelect(MenuEventArgs<MenuItem> args)
    {
        MouseEventArgs mouseEvent = (MouseEventArgs)args.Event;
        var targetDetails = await KanbanRef.GetTargetDetailsAsync(left, top);
        List<KanbanDataModel> filteredData = cardData.Where(item => item.Title == targetDetails.CurrentCardId).ToList();
        if (args.Item.Id == "EditBtn")
        {
            await KanbanRef.OpenDialogAsync(CurrentAction.Edit, filteredData[0]);
        }
        else if (args.Item.Id == "AddBtn")
        {
            await KanbanRef.OpenDialogAsync(CurrentAction.Add, filteredData[0]);
        }
    }

API References

• GetTargetDetailsAsync
• OpenDialogAsync

Conclusion

I hope you enjoyed learning how to open Syncfusion Blazor Kanban Edit Dialog from context menu.

You can refer to our Blazor kanban feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor kanban example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!