Blazor Grid — How to Add a Context Menu (v22.1)

In this blog post, I’d like to demonstrate how you can display a Context (Popup) Menu when a user clicks a Blazor Grid element. For this example, the Context Menu will appear when you right-click a Grid column header or row. 

As you know, a context menu can help improve usability in several ways. For instance, it can replace an external toolbar component or a Grid command column (saving a lot of screen space). In general, a Data Grid’s context menu will include row-related (add a new row, delete, start editing) and column-related (hide a column, sort/group, etc) actions. You can also add other options, such as show filter row or display the Grid’s column chooser.

To associate a custom context menu with your DevExpress Blazor Grid, you’ll first need to disable the browser’s default context menu (when you right-click the DevExpress Blazor Grid). Specify the oncontextmenu:preventDefault attribute in the Grid’s markup to disable the browser’s default context menu.  

In our most recent release, we extended the Grid’s CustomizeElement event and you can now access 33 Grid elements in the event handler. Use these elements to subscribe to the oncontextmenu attribute and display your custom context menu: 

void Grid_CustomizeElement(GridCustomizeElementEventArgs e) { 
    if(GridContextMenuHelper.IsContextMenuElement(e.ElementType)) { 
        e.Attributes["oncontextmenu"] = EventCallback.Factory.Create<MouseEventArgs>( 
            this, 
            async mArgs => await ContextMenuContainer.Grid_ContextMenu(e, mArgs) 
        ); 
    } 
} 

The GridContextMenuContainer razor component contains all available context menus in the app. In this example, there are two context menus: for a column header and row. The GridContextMenuHelper class populates these context menus with items and reacts to item state changes (visible, enabled, selected). The GridContextMenuHelper class also implements Context Menu item click handlers. These handlers use our Blazor Grid's API to execute commands as needed:

public static void ProcessColumnMenuItemClick(ContextMenuItem item, IGridColumn column, IGrid grid) { 
    var dataColumn = column as IGridDataColumn; 
    grid.BeginUpdate(); 
    switch(item.ItemType) { 
        case GridContextMenuItemType.FullExpand: 
            grid.ExpandAllGroupRows(); 
            break; 
        case GridContextMenuItemType.FullCollapse: 
            grid.CollapseAllGroupRows(); 
            break; 
        /*...*/ 
    } 
    grid.EndUpdate(); 
} 

If you are ready to associate a custom context menu with your DevExpress Blazor Grid, please refer to the following repository for more information (includes complete source code): https://github.com/DevExpress-Examples/blazor-dxgrid-show-context-menu

Your Feedback Matters

As always, we appreciate your thoughts. 

Free DevExpress Products - Get Your Copy Today