ContextMenuStrip

This document shares key information to enable, modify and use a ContextMenu out off browser's options.

The ContextMenuStrip implementation in the BlazorDCP project provides a seamless bridge between Windows Forms ContextMenuStrip functionality and Blazor applications using Telerik UI components. This implementation maintains full compatibility with existing Windows Forms event handling patterns while providing modern web-based context menu experiences.

Architecture Components

1. Core Model Class (Gap.Blazor.ContextMenuStrip)

Location: src\Gap.Blazor\Controls\ContextMenuStrip.cs

/// <summary>
/// ContextMenuStrip model implementation.
/// </summary>
/// <mapfrom>System.Windows.Forms.ContextMenuStrip</mapfrom>
public class ContextMenuStrip : ToolStripDropDownMenu
{
    public ContextMenuStrip(IContainer container) { /* ... */ }
    public ShowEventHandler ShowEventHandler { get; set; }
    public void Show(Control control, Point position) { /* ... */ }
    private void OnShow(ShowEventArgs e) { /* ... */ }
}

Key Features:

• Windows Forms Compatibility: Inherits from ToolStripDropDownMenu maintaining API compatibility

• Event-Driven Architecture: Uses ShowEventHandler for display coordination

• Position-Aware Display: Supports precise positioning via Point coordinates

• Cancellable Events: Implements Opening event with CancelEventArgs for conditional display

1. Blazor Component (WMContextMenuStrip)

Location: src\Gap.Blazor.Components\Components\ContextMenuStrip\WMContextMenuStrip.razor

<TelerikContextMenu @ref="@TemplateContextMenu" 
                   Data="@this.menuItems" 
                   ItemsField="SubItems" 
                   OnClick="@((MenuItem item) => OnClickHandler(item))">
    <ItemTemplate>
        <WMToolStripMenuItem UseDesignerStyles="@this.UseDesignerStyles" 
                           model="@context.ToolStripItem" />
    </ItemTemplate>
</TelerikContextMenu>

Component Properties:

• Model Integration: Directly binds to ContextMenuStrip model instance

• Hierarchical Support: Handles nested menu items through SubItems field

• Template-Based Rendering: Uses WMToolStripMenuItem for consistent item display

• Event Bridging: Connects Telerik events to Windows Forms event handlers.

Event flow architecture

Browser Context Menu Prevention

Challenge: Browser's native right-click context menu interferes with custom implementation.

Solution: Selective event prevention using JavaScript:

document.addEventListener('contextmenu', function (event) {
    if(event.target.parentElement.className.indexOf("cssclassofitemtopreventbrowserctxmenu") > -1 || 
       event.target.parentElement.className.indexOf("k-child-animation-container") > -1){
        event.preventDefault();
        event.stopPropagation();
    }
});