Context Menu

• Oct 29, 2020
• 4 minutes to read

The ASPxGridView context menu is a popup menu displayed when an end-user right-clicks a grid element. The following context menu types are available.

• Browser context menu is a browser-dependent menu allowing you to perform commands related to your browser functionality. This type of menu is displayed by default.
• Grid context menu is a built-in context menu that provides a capability to perform the most popular grid commands (e.g., data editing, sorting). You can enable this menu by setting just one property. The menu default items can be easily shown or hidden, or supplemented with custom items.
• Custom context menu can be provided for a grid by implementing a popup menu manually.

Browser Context Menu

The browser context menu is displayed in a grid by default. The menu appearance and content depend on an end-user’s browser.

The image above provides an example of a browser’s context menu. You can see that it does not relate to grid functionality and provides browser-related commands only. To provide a grid-related context menu - enable the built-in grid context menu.

It might not be required (for some reason) to display the built-in grid menu for particular elements (such as for group rows) and display the browser menu instead. This particular scenario is demonstrated in the given code.

ASPX

// Displays a browser menu for group rows 
<ClientSideEvents ContextMenu="function(s, e) {
     if(e.objectType == 'grouprow')    
          e.showBrowserMenu = true;
}" />

Grid Context Menu

The grid’s built-in context menu provides different context menu types for the following elements.

• row
• column
• footer
• group panel
• group footer

To enable the grid’s built-in context menu, set the ASPxGridViewContextMenuSettings.Enabled property to true.

ASPX

<dx:ASPxGridView runat="server" ID="Grid" >
     <SettingsContextMenu Enabled="true" />
</dx:ASPxGridView>

Note that you can enable only menus of a particular type (e.g. hide the context menu for a group panel), as well as show/hide specific menu items. The corresponding properties are listed in a table below.

Grid Menu Type	Menu Availability Member	Items Visibility Settings
Row Menu	ASPxGridViewContextMenuSettings.EnableRowMenu	ASPxGridViewContextMenuSettings.RowMenuItemVisibility
Column Menu	ASPxGridViewContextMenuSettings.EnableColumnMenu	ASPxGridViewContextMenuSettings.ColumnMenuItemVisibility
Footer Menu	ASPxGridViewContextMenuSettings.EnableFooterMenu	ASPxGridViewContextMenuSettings.FooterMenuItemVisibility
Group Panel Menu	ASPxGridViewContextMenuSettings.EnableGroupPanelMenu	ASPxGridViewContextMenuSettings.GroupPanelMenuItemVisibility
Group Footer Menu	ASPxGridViewContextMenuSettings.EnableGroupFooterMenu	ASPxGridViewContextMenuSettings.GroupFooterMenuItemVisibility

Custom Context Menu Items

You can populate a grid context menu with custom items using the ASPxGridView.FillContextMenuItems event. The event is raised after default context menu items are created and before the context menu is shown; and enables you to customize the item collection.

The code sample below demonstrates how to provide the default grid context menu with two custom items. To add the items to the item collection, the ASPxGridView.FillContextMenuItems event is used. On the client-side, the ASPxClientGridView.ContextMenuItemClick event is handled to respond to a custom item click.

The image below demonstrates a context menu with the custom items.

ASPX

<dx:ASPxGridView ID="MyGridView" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource" ClientInstanceName="myGrid" KeyFieldName="ProductID" OnFillContextMenuItems="MyGridView_FillContextMenuItems">
     <ClientSideEvents ContextMenuItemClick="function(s, e) {
          switch(e.item.name) { 
               case 'SelectAll':
                    myGrid.SelectRows();
                    break;
               case 'DeselectAll':
                    myGrid.UnselectRows();
                    break;
          }
     }" />
     <Columns>
          ...
     </Columns>
     <SettingsBehavior AllowSelectByRowClick="True" />
     <SettingsContextMenu Enabled="True">
     </SettingsContextMenu>
</dx:ASPxGridView>

C#

protected void MyGridView_FillContextMenuItems(object sender, ASPxGridViewContextMenuEventArgs e) {
     e.Items.Add("Select All", "SelectAll");
     e.Items.Add("Deselect All", "DeselectAll");
}

VB.NET

Protected Sub MyGridView_FillContextMenuItems(ByVal sender As Object, ByVal e As ASPxGridViewContextMenuEventArgs)
     e.Items.Add("Select All", "SelectAll")
     e.Items.Add("Deselect All", "DeselectAll")
End Sub

Custom Context Menu

You can provide a custom context menu for a grid by handling the ASPxClientGridView.ContextMenu event.

In the example below, the ASPxClientGridView.ContextMenu menu is handled to display a context menu when an end-user right-clicks within the column header panel.

The image below shows the result.

JS

<ClientSideEvents ContextMenu="function(s, e) {
            if(e.objectType == 'header') 
                headerMenu.ShowAtPos(ASPxClientUtils.GetEventX(e.htmlEvent), ASPxClientUtils.GetEventY(e.htmlEvent));
}" />

Note

If the ASPxClientGridViewContextMenuEventArgs.showBrowserMenu event argument property is set to true, or a grid context menu is enabled for the current element, the custom context menu is not displayed.

How to Determine a Type of Context Menu That Will be Displayed for a Grid Element

When you enable different types of context menus for a grid, it can be difficult to determine which of the menus will be displayed for a particular element. The diagram below helps you to determine the displayed menu type.