Context Menus
- 3 minutes to read
In This Article
The GridControl includes built-in context menus that you can customize according to your needs. These menus contain the most frequent user actions.
The table below lists grid elements that support context menus:
Element | Default Content | Property that Specifies the Context Menu |
---|---|---|
Group Panel | ![]() |
Grid |
Column Header | ![]() |
Grid |
Grouped Column Header | ![]() |
Grid |
Data cells, rows, and row indicator cells | - | Grid |
Empty space within the grid | - | Grid |
The following table lists context menu events. You can use them to customize the menu content and behavior:
Event | Description |
---|---|
Grid |
Occurs before a user opens a context menu. |
Grid |
Occurs after a user opens a context menu. |
Grid |
Occurs after a user closes a context menu. |
#Define a Custom Context Menu
The following code sample creates a custom context menu for grid rows:
- Create a MenuFlyout control.
- Fill it with MenuFlyoutItem objects.
- Assign this control to the GridControl.RowCellMenu property.
<dxg:GridControl ...>
<dxg:GridControl.RowCellMenu>
<MenuFlyout>
<MenuFlyoutItem Text="Delete"
Command="{x:Bind ViewModel.DeleteRowCommand}"
CommandParameter="{Binding Cell.CellData.Row}"/>
<MenuFlyoutItem Text="Duplicate"
Command="{x:Bind ViewModel.DuplicateRowCommand}"
CommandParameter="{Binding Cell.CellData.Row}"/>
</MenuFlyout>
</dxg:GridControl.RowCellMenu>
</dxg:GridControl>
public class MainViewModel : ViewModelBase {
public MainViewModel() {
// ...
DeleteRowCommand = new DelegateCommand<Product>(DeleteRow);
DuplicateRowCommand = new DelegateCommand<Product>(DuplicateRow);
}
// ...
public DelegateCommand<Product> DeleteRowCommand { get; private set; }
public DelegateCommand<Product> DuplicateRowCommand { get; private set; }
public void DeleteRow(Product product) {
Source.Remove(product);
}
public void DuplicateRow(Product product) {
var index = Source.IndexOf(product);
Source.Insert(index, product);
}
}
#Add Items to the Context Menu
The code sample below uses the GridControl.ContextMenuOpening event to add the Show Search Panel and Hide Search Panel items to the group panel‘s context menu:
<dxg:GridControl ...
ShowGroupPanel="True"
ContextMenuOpening="grid_ContextMenuOpening">
<!-- ... -->
</dxg:GridControl>
using DevExpress.WinUI.Grid;
using Microsoft.UI.Xaml.Controls;
// ...
void grid_ContextMenuOpening(object sender, DevExpress.WinUI.Core.Internal.ContextMenuOpeningEventArgs e) {
var menuInfo = e.Info as GridGroupPanelContextMenuInfo;
if (menuInfo != null) {
var contextMenu = menuInfo.MenuContent;
contextMenu.Items.Add(new MenuFlyoutSeparator());
contextMenu.Items.Add(new MenuFlyoutItem() {Text = "Show Search Panel", Command = menuInfo.Commands.ShowSearchPanel});
contextMenu.Items.Add(new MenuFlyoutItem() {Text = "Hide Search Panel", Command = menuInfo.Commands.HideSearchPanel});
}
}