diff --git a/MAUI/DataGrid/Images/context-menu/group-caption-contextmenu.png b/MAUI/DataGrid/Images/context-menu/group-caption-contextmenu.png new file mode 100644 index 000000000..8a3acc02f Binary files /dev/null and b/MAUI/DataGrid/Images/context-menu/group-caption-contextmenu.png differ diff --git a/MAUI/DataGrid/Images/context-menu/group-summary-contextmenu.png b/MAUI/DataGrid/Images/context-menu/group-summary-contextmenu.png new file mode 100644 index 000000000..8b70c7840 Binary files /dev/null and b/MAUI/DataGrid/Images/context-menu/group-summary-contextmenu.png differ diff --git a/MAUI/DataGrid/Images/context-menu/header-contextmenu.png b/MAUI/DataGrid/Images/context-menu/header-contextmenu.png new file mode 100644 index 000000000..4803ec895 Binary files /dev/null and b/MAUI/DataGrid/Images/context-menu/header-contextmenu.png differ diff --git a/MAUI/DataGrid/Images/context-menu/record-context-menu.png b/MAUI/DataGrid/Images/context-menu/record-context-menu.png new file mode 100644 index 000000000..e7525c534 Binary files /dev/null and b/MAUI/DataGrid/Images/context-menu/record-context-menu.png differ diff --git a/MAUI/DataGrid/Images/context-menu/table-summary-contextmenu.png b/MAUI/DataGrid/Images/context-menu/table-summary-contextmenu.png new file mode 100644 index 000000000..21034f933 Binary files /dev/null and b/MAUI/DataGrid/Images/context-menu/table-summary-contextmenu.png differ diff --git a/MAUI/DataGrid/context-menu.md b/MAUI/DataGrid/context-menu.md new file mode 100644 index 000000000..3be39dda0 --- /dev/null +++ b/MAUI/DataGrid/context-menu.md @@ -0,0 +1,371 @@ +--- +layout: post +title: Context menu in .NET MAUI DataGrid control | Syncfusion +description: Learn how to show and customize context menu in Syncfusion .NET MAUI DataGrid (SfDataGrid) for header, record, group caption, group summary, and table summary. +platform: MAUI +control: SfDataGrid +documentation: ug +keywords: maui datagrid context menu, maui grid context menu, .net maui datagrid right click, .net maui datagrid long press, maui datagrid header context menu, record context menu, group caption context menu, group summary context menu, table summary context menu +--- + +# Context Menu in .NET MAUI DataGrid (SfDataGrid) + +## Overview + +The `SfDataGrid` control allows you to display a customizable context menu when a user performs a secondary click (right-click on Windows and Mac Catalyst) or a long-press gesture (on Android and iOS) on different parts of the DataGrid. + +### Types of Context Menus + +You can define context menus for the following elements: + +- **Header**: Context menu for column headers. +- **Record (Row)**: Context menu for data rows. +- **Group Caption**: Context menu for group caption rows. +- **Group Summary**: Context menu for group summary rows. +- **Table Summary**: Context menu for table summary rows. + +Each context menu type provides specific options tailored to the DataGrid element it is associated with. + +## Customize Header Context Menu + +The header context menu is displayed when the user invokes the context menu on a column header.You can customize the menu items by adding `MenuItem` objects to the `SfDataGrid.HeaderContextMenu` collection. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + +{% endhighlight %} +{% highlight c# %} +this.dataGrid.HeaderContextMenu = new MenuItemCollection +{ + new MenuItem("Sort Ascending") , + new MenuItem("Sort Descending"), + new MenuItem("Clear Sorting") , + new MenuItem("Group by Column"), + new MenuItem("Best Fit"), +}; +{% endhighlight %} +{% endtabs %} + + +Column header context menu + +## Header Context Menu with Commands + +When binding a menu item using a `Command`, you can access the command parameter as `HeaderContextInfo`. This object provides contextual information such as the `DataGrid` instance, the `Column` clicked, and its `RowIndex` and `ColumnIndex`. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + +{% endhighlight %} +{% highlight c# %} +private void SortAscending(object obj) +{ + if (obj is HeaderContextInfo context && context.Column != null) + { + dataGrid.SortColumnDescriptions.Clear(); + dataGrid.SortColumnDescriptions.Add(new SortColumnDescription { ColumnName = context.Column.MappingName }); + } +} +{% endhighlight %} +{% endtabs %} + +## Customize Record Context Menu + +The record context menu is displayed when the user invokes the context menu on a data row. You can customize the menu items by adding `MenuItem` objects to the `SfDataGrid.RecordContextMenu` collection. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + +{% endhighlight %} +{% highlight c# %} +this.dataGrid.RecordContextMenu = new MenuItemCollection +{ + new MenuItem("Copy") , + new MenuItem("Paste") , + new MenuItem("Cut") , + new MenuItem("Delete"), +}; +{% endhighlight %} +{% endtabs %} + +Record context menu + +## Record Context Menu with Commands + +When binding a menu item using a `Command`, you can access the command parameter as `RowContextMenuInfo`. This object contains the `RowData` of the corresponding row, along with the `DataGrid` instance and the `RowIndex`. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + +{% endhighlight %} +{% highlight c# %} +private void CopyCellContent(object obj) +{ + if (obj is RowContextMenuInfo context && context.RowIndex >= 0) + { + context.DataGrid?.CopyPasteController.Copy(); + } +} +{% endhighlight %} +{% endtabs %} + +## Customize Group Caption Context Menu + +The group caption context menu is displayed when the user invokes the context menu on a group caption row. You can customize the menu items by adding `MenuItem` objects to the `SfDataGrid.GroupCaptionContextMenu` collection. + +{% tabs %} +{% highlight xaml %} + + + + + + + + +{% endhighlight %} +{% highlight c# %} +this.dataGrid.GroupCaptionContextMenu = new MenuItemCollection +{ + new MenuItem("Expand All") , + new MenuItem("Collapse All"), +}; +{% endhighlight %} +{% endtabs %} + + +Group caption context menu + +## Group Caption Context Menu with Commands + +When binding a menu item using a `Command`, you can access the command parameter as `GroupCaptionContextInfo`. This object provides access to the `DataGrid` instance, the `Group` object, and the `RowIndex` of the clicked group caption. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} +{% highlight c# %} +private void ExpandAll(object obj) +{ + if (obj is GroupCaptionContextInfo groupInfo && groupInfo.DataGrid != null && groupInfo.Group != null) + { + groupInfo.DataGrid.ExpandGroup(groupInfo.Group); + } +} +{% endhighlight %} +{% endtabs %} + +## Customize Group Summary Context Menu + +The group summary context menu is displayed when the user invokes the context menu on a group summary row. You can customize the menu items by adding `MenuItem` objects to the `SfDataGrid.GroupSummaryContextMenu` collection. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} +{% highlight c# %} +this.dataGrid.GroupSummaryContextMenu = new MenuItemCollection +{ + new MenuItem("Clear Summary") , +}; +{% endhighlight %} +{% endtabs %} + +Group summary context menu + +## Group Summary Context Menu with Commands + +When binding a menu item using a `Command`, you can access the command parameter as `GroupSummaryContextInfo`. This object includes the `DataGrid` instance, the `SummaryRow`, the `Group` object, and the `RowIndex`. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} +{% highlight c# %} + private void ClearSummary(object obj) + { + if (DataGrid?.GroupSummaryRows.Count > 0) + DataGrid.GroupSummaryRows.Clear(); + } +{% endhighlight %} +{% endtabs %} + +## Customize Table Summary Context Menu + +The table summary context menu is displayed when the user invokes the context menu on a table summary row. You can customize the menu items by adding `MenuItem` objects to the `SfDataGrid.TableSummaryContextMenu` collection. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + +{% endhighlight %} +{% highlight c# %} +this.dataGrid.TableSummaryContextMenu = new MenuItemCollection +{ + new MenuItem("Count") , + new MenuItem("Minimum") , + new MenuItem("Maximum") , + new MenuItem("Sum") , + new MenuItem("Average") , +}; +{% endhighlight %} +{% endtabs %} + +Table summary context menu + +## Table Summary Context Menu with Commands + +When binding a menu item using a `Command`, you can access the command parameter as `TableSummaryContextInfo`. This object provides the `DataGrid` instance, the relevant `Column`, the `SummaryRow`, and the `RowIndex`. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} +{% highlight c# %} + private void AddCountSummary(object obj) + { + if (obj is TableSummaryContextInfo context && context.DataGrid != null && context.Column != null) + { + var row = new DataGridTableSummaryRow + { + ShowSummaryInRow = false, + Position = SummaryRowPosition.Bottom, + SummaryColumns = new ObservableCollection + { + new DataGridSummaryColumn + { + Name = "Count", + MappingName = context.Column.MappingName, + SummaryType = SummaryType.CountAggregate, + Format = "Count: {Count}" + } + } + }; + context.DataGrid.TableSummaryRows.Clear(); + context.DataGrid.TableSummaryRows.Add(row); + } + } +{% endhighlight %} +{% endtabs %} + +## Events + +The DataGrid exposes events to customize and react to the context menu life cycle. + +### ContextMenuOpening + +The `ContextMenuOpening` event occurs before the context menu is displayed, allowing you to customize its content or cancel its display. The event handler receives `ContextMenuOpeningEventArgs` with the following properties: + +- **Cancel**: Set to `true` to cancel the display of the context menu. +- **Column**: Represents the column for which the context menu is opening. This property will be `null` if the context menu is not opened for a column header. +- **MenuItems**: Provides access to the collection of `MenuItem` objects that will be displayed in the context menu. You can add, remove, or modify these items to customize the menu. + +### ContextMenuOpened + +The `ContextMenuOpened` event occurs immediately after the context menu has been displayed. The event handler receives `ContextMenuOpenedEventArgs` with the following properties: + +- **Column**: Represents the column that triggered the context menu. This property will be `null` if the context menu was not opened for a column header. +- **MenuItems**: Provides access to the collection of `MenuItem` objects that are currently displayed in the context menu. + +### ContextMenuItemClicked + +The `ContextMenuItemClicked` event occurs when a menu item within the context menu is clicked. The event handler receives `ContextMenuItemClickedEventArgs` with the following property: + +- **MenuItem**: Represents the `MenuItem` object that was clicked by the user. + +### ContextMenuClosing + +The `ContextMenuClosing` event occurs before the context menu is closed, allowing you to prevent its closure. The event handler receives `ContextMenuClosingEventArgs` with the following properties: + +- **Cancel**: Set to `true` to keep the context menu open and prevent its closure. +- **Column**: Represents the column for which the context menu is closing. This property will be `null` if the context menu is not associated with a column header. +- **MenuItems**: Provides access to the collection of `MenuItem` objects that are currently displayed in the context menu. + +### ContextMenuClosed + +The `ContextMenuClosed` event occurs after the context menu has been closed. The event handler receives `ContextMenuClosedEventArgs` with the following properties: + +- **Column**: Represents the column that was associated with the closed context menu. This property will be `null` if the context menu was not opened for a column header. +- **MenuItems**: Provides access to the collection of `MenuItem` objects that were displayed in the closed context menu. diff --git a/maui-toc.html b/maui-toc.html index 1a7368b05..5db759b1c 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -570,6 +570,7 @@
  • Grouping
  • Summaries
  • Selection
  • +
  • Context Menu
  • Clipboard Operations
  • Master Details View
  • Record Template View