How to: Implement Custom Menu in XtraGrid Control

• Nov 13, 2018
• 4 minutes to read

This example demonstrates how to handle the GridView.PopupMenuShowing event to create a custom popup menu and display it within the WinForms Data Grid control.

The menu is displayed when the user right-clicks within a data row or group row. The menu includes:

• Rows submenu with the Delete this row item that calls the ColumnView.DeleteRow method.
• Cell Merging check item that toggles the GridOptionsView.AllowCellMerge option.

Note

The example displays SVG images within menu items. Drop the SvgImageCollection component onto your Form (svgImageCollection1) and add two SVG icons to the collection (at design time).

C#

using System;
using System.Windows.Forms;
using DevExpress.XtraGrid.Views.Grid;
using DevExpress.Utils.Menu;
using DevExpress.XtraEditors;

namespace DXApplication8 {
    public partial class Form1 : XtraForm {
        public Form1() {
            InitializeComponent();
            gridView1.PopupMenuShowing += GridView1_PopupMenuShowing;
        }

        private void GridView1_PopupMenuShowing(object sender, PopupMenuShowingEventArgs e) {
            GridView view = sender as GridView;
            if (e.MenuType == GridMenuType.Row) {
                int rowHandle = e.HitInfo.RowHandle;
                // Deletes existing menu items, if any.
                e.Menu.Items.Clear();
                // Adds the 'Rows' submenu with the 'Delete Row' command to the context menu.
                e.Menu.Items.Add(CreateSubMenuRows(view, rowHandle));
                // Adds the 'Cell Merging' check item to the context menu.
                DXMenuItem item = CreateMenuItemCellMerging(view, rowHandle);
                item.BeginGroup = true;
                e.Menu.Items.Add(item);
            }
        }
        DXMenuItem CreateSubMenuRows(GridView view, int rowHandle) {
            DXSubMenuItem subMenu = new DXSubMenuItem("Rows");
            string deleteRowsCommandCaption;
            if (view.IsGroupRow(rowHandle))
                deleteRowsCommandCaption = "&Delete rows in this group";
            else
                deleteRowsCommandCaption = "&Delete this row";

            // Drop the 'svgImageCollection' component onto the Form1 and add two SVG icons to the collection.
            DXMenuItem menuItemDeleteRow = new DXMenuItem(deleteRowsCommandCaption, new EventHandler(OnDeleteRowClick), svgImageCollection1[1], DXMenuItemPriority.Normal);
            menuItemDeleteRow.Tag = new RowInfo(view, rowHandle);
            menuItemDeleteRow.Enabled = view.IsDataRow(rowHandle) || view.IsGroupRow(rowHandle);
            subMenu.Items.Add(menuItemDeleteRow);
            return subMenu;
        }

        DXMenuCheckItem CreateMenuItemCellMerging(GridView view, int rowHandle) {
            DXMenuCheckItem checkItem = new DXMenuCheckItem("Cell &Merging",
              view.OptionsView.AllowCellMerge, null, new EventHandler(OnCellMergingClick));
            checkItem.Tag = new RowInfo(view, rowHandle);
            checkItem.ImageOptions.SvgImage = svgImageCollection1[0];
            return checkItem;
        }

        void OnDeleteRowClick(object sender, EventArgs e) {
            DXMenuItem menuItem = sender as DXMenuItem;
            RowInfo ri = menuItem.Tag as RowInfo;
            if (ri != null) {
                string message = menuItem.Caption.Replace("&", "");
                if (XtraMessageBox.Show(message + " ?", "Confirm the operation", MessageBoxButtons.YesNo) != DialogResult.Yes)
                    return;
                ri.View.DeleteRow(ri.RowHandle);
            }
        }

        void OnCellMergingClick(object sender, EventArgs e) {
            DXMenuCheckItem item = sender as DXMenuCheckItem;
            RowInfo info = item.Tag as RowInfo;
            info.View.OptionsView.AllowCellMerge = item.Checked;
        }

        class RowInfo {
            public RowInfo(GridView view, int rowHandle) {
                RowHandle = rowHandle;
                View = view;
            }
            public GridView View;
            public int RowHandle;
        }
    }
}

VB.NET

Imports System
Imports System.Windows.Forms
Imports DevExpress.XtraGrid.Views.Grid
Imports DevExpress.Utils.Menu
Imports DevExpress.XtraEditors

Namespace DXApplication8
    Partial Public Class Form1
        Inherits XtraForm

        Public Sub New()
            InitializeComponent()
            AddHandler gridView1.PopupMenuShowing, AddressOf GridView1_PopupMenuShowing
        End Sub

        Private Sub GridView1_PopupMenuShowing(ByVal sender As Object, ByVal e As PopupMenuShowingEventArgs)
            Dim view As GridView = TryCast(sender, GridView)
            If e.MenuType = GridMenuType.Row Then
                Dim rowHandle As Integer = e.HitInfo.RowHandle
                ' Deletes existing menu items, if any.
                e.Menu.Items.Clear()
                ' Adds the 'Rows' submenu with the 'Delete Row' command to the context menu.
                e.Menu.Items.Add(CreateSubMenuRows(view, rowHandle))
                ' Adds the 'Cell Merging' check item to the context menu.
                Dim item As DXMenuItem = CreateMenuItemCellMerging(view, rowHandle)
                item.BeginGroup = True
                e.Menu.Items.Add(item)
            End If
        End Sub
        Private Function CreateSubMenuRows(ByVal view As GridView, ByVal rowHandle As Integer) As DXMenuItem
            Dim subMenu As New DXSubMenuItem("Rows")
            Dim deleteRowsCommandCaption As String
            If view.IsGroupRow(rowHandle) Then
                deleteRowsCommandCaption = "&Delete rows in this group"
            Else
                deleteRowsCommandCaption = "&Delete this row"
            End If

            ' Drop the 'svgImageCollection' component onto the Form1 and add two SVG icons to the collection.
            Dim menuItemDeleteRow As New DXMenuItem(deleteRowsCommandCaption, New EventHandler(AddressOf OnDeleteRowClick), svgImageCollection1(1), DXMenuItemPriority.Normal)
            menuItemDeleteRow.Tag = New RowInfo(view, rowHandle)
            menuItemDeleteRow.Enabled = view.IsDataRow(rowHandle) OrElse view.IsGroupRow(rowHandle)
            subMenu.Items.Add(menuItemDeleteRow)
            Return subMenu
        End Function

        Private Function CreateMenuItemCellMerging(ByVal view As GridView, ByVal rowHandle As Integer) As DXMenuCheckItem
            Dim checkItem As New DXMenuCheckItem("Cell &Merging", view.OptionsView.AllowCellMerge, Nothing, New EventHandler(AddressOf OnCellMergingClick))
            checkItem.Tag = New RowInfo(view, rowHandle)
            checkItem.ImageOptions.SvgImage = svgImageCollection1(0)
            Return checkItem
        End Function

        Private Sub OnDeleteRowClick(ByVal sender As Object, ByVal e As EventArgs)
            Dim menuItem As DXMenuItem = TryCast(sender, DXMenuItem)
            Dim ri As RowInfo = TryCast(menuItem.Tag, RowInfo)
            If ri IsNot Nothing Then
                Dim message As String = menuItem.Caption.Replace("&", "")
                If XtraMessageBox.Show(message & " ?", "Confirm the operation", MessageBoxButtons.YesNo) <> DialogResult.Yes Then
                    Return
                End If
                ri.View.DeleteRow(ri.RowHandle)
            End If
        End Sub

        Private Sub OnCellMergingClick(ByVal sender As Object, ByVal e As EventArgs)
            Dim item As DXMenuCheckItem = TryCast(sender, DXMenuCheckItem)
            Dim info As RowInfo = TryCast(item.Tag, RowInfo)
            info.View.OptionsView.AllowCellMerge = item.Checked
        End Sub

        Private Class RowInfo
            Public Sub New(ByVal view As GridView, ByVal rowHandle As Integer)
                Me.RowHandle = rowHandle
                Me.View = view
            End Sub
            Public View As GridView
            Public RowHandle As Integer
        End Class
    End Class
End Namespace