Skip to content

Commit 55daab4

Browse files
karthikasf4617karthikasf4617
committed
Added ug content for data grid context menu feature
1 parent 9160601 commit 55daab4

File tree

7 files changed

+372
-0
lines changed

7 files changed

+372
-0
lines changed

‎MAUI/DataGrid/Images/context-menu/group-caption-contextmenu.png‎

40.9 KB
Loading

‎MAUI/DataGrid/Images/context-menu/group-summary-contextmenu.png‎

38.2 KB
Loading

‎MAUI/DataGrid/Images/context-menu/header-contextmenu.png‎

44.7 KB
Loading

‎MAUI/DataGrid/Images/context-menu/record-context-menu.png‎

37.4 KB
Loading

‎MAUI/DataGrid/Images/context-menu/table-summary-contextmenu.png‎

35.6 KB
Loading

‎MAUI/DataGrid/context-menu.md‎

Lines changed: 371 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,371 @@
1+
---
2+
layout: post
3+
title: Context menu in .NET MAUI DataGrid control | Syncfusion
4+
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.
5+
platform: MAUI
6+
control: SfDataGrid
7+
documentation: ug
8+
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
9+
---
10+
11+
# Context Menu in .NET MAUI DataGrid (SfDataGrid)
12+
13+
## Overview
14+
15+
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.
16+
17+
### Types of Context Menus
18+
19+
You can define context menus for the following elements:
20+
21+
- **Header**: Context menu for column headers.
22+
- **Record (Row)**: Context menu for data rows.
23+
- **Group Caption**: Context menu for group caption rows.
24+
- **Group Summary**: Context menu for group summary rows.
25+
- **Table Summary**: Context menu for table summary rows.
26+
27+
Each context menu type provides specific options tailored to the DataGrid element it is associated with.
28+
29+
## Customize Header Context Menu
30+
31+
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.
32+
33+
{% tabs %}
34+
{% highlight xaml %}
35+
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}">
36+
<syncfusion:SfDataGrid.HeaderContextMenu>
37+
<syncfusion:MenuItemCollection>
38+
<syncfusion:MenuItem Text="Sort Ascending"/>
39+
<syncfusion:MenuItem Text="Sort Descending"/>
40+
<syncfusion:MenuItem Text="Clear Sorting"/>
41+
<syncfusion:MenuItem Text="Group by Column"/>
42+
<syncfusion:MenuItem Text="Best Fit"/>
43+
</syncfusion:MenuItemCollection>
44+
</syncfusion:SfDataGrid.HeaderContextMenu>
45+
</syncfusion:SfDataGrid>
46+
{% endhighlight %}
47+
{% highlight c# %}
48+
this.dataGrid.HeaderContextMenu = new MenuItemCollection
49+
{
50+
new MenuItem("Sort Ascending") ,
51+
new MenuItem("Sort Descending"),
52+
new MenuItem("Clear Sorting") ,
53+
new MenuItem("Group by Column"),
54+
new MenuItem("Best Fit"),
55+
};
56+
{% endhighlight %}
57+
{% endtabs %}
58+
59+
60+
<img alt="Column header context menu" src="Images/context-menu/header-contextmenu.png" width="404"/>
61+
62+
## Header Context Menu with Commands
63+
64+
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`.
65+
66+
{% tabs %}
67+
{% highlight xaml %}
68+
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}">
69+
<syncfusion:SfDataGrid.HeaderContextMenu>
70+
<syncfusion:MenuItemCollection>
71+
<syncfusion:MenuItem Text="Sort Ascending"
72+
Command="{Binding Path=BindingContext.SortAscendingCommand, Source={x:Reference dataGrid}}">
73+
<syncfusion:MenuItem.Icon>
74+
<Label Text="&#xe711;" FontFamily="MauiSampleFontIcon" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
75+
</syncfusion:MenuItem.Icon>
76+
</syncfusion:MenuItem>
77+
</syncfusion:MenuItemCollection>
78+
</syncfusion:SfDataGrid.HeaderContextMenu>
79+
</syncfusion:SfDataGrid>
80+
{% endhighlight %}
81+
{% highlight c# %}
82+
private void SortAscending(object obj)
83+
{
84+
if (obj is HeaderContextInfo context && context.Column != null)
85+
{
86+
dataGrid.SortColumnDescriptions.Clear();
87+
dataGrid.SortColumnDescriptions.Add(new SortColumnDescription { ColumnName = context.Column.MappingName });
88+
}
89+
}
90+
{% endhighlight %}
91+
{% endtabs %}
92+
93+
## Customize Record Context Menu
94+
95+
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.
96+
97+
{% tabs %}
98+
{% highlight xaml %}
99+
<syncfusion:SfDataGrid x:Name="dataGrid"
100+
ItemsSource="{Binding Orders}">
101+
<syncfusion:SfDataGrid.RecordContextMenu>
102+
<syncfusion:MenuItemCollection>
103+
<syncfusion:MenuItem Text="Copy"/>
104+
<syncfusion:MenuItem Text="Paste"/>
105+
<syncfusion:MenuItem Text="Cut"/>
106+
<syncfusion:MenuItem Text="Delete"/>
107+
</syncfusion:MenuItemCollection>
108+
</syncfusion:SfDataGrid.RecordContextMenu>
109+
</syncfusion:SfDataGrid>
110+
{% endhighlight %}
111+
{% highlight c# %}
112+
this.dataGrid.RecordContextMenu = new MenuItemCollection
113+
{
114+
new MenuItem("Copy") ,
115+
new MenuItem("Paste") ,
116+
new MenuItem("Cut") ,
117+
new MenuItem("Delete"),
118+
};
119+
{% endhighlight %}
120+
{% endtabs %}
121+
122+
<img alt="Record context menu" src="Images/context-menu/record-context-menu.png" width="404"/>
123+
124+
## Record Context Menu with Commands
125+
126+
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`.
127+
128+
{% tabs %}
129+
{% highlight xaml %}
130+
<syncfusion:SfDataGrid x:Name="dataGrid"
131+
ItemsSource="{Binding Orders}"
132+
AutoGenerateColumns="True">
133+
<syncfusion:SfDataGrid.RecordContextMenu>
134+
<syncfusion:MenuItemCollection>
135+
<syncfusion:MenuItem Text="Copy"
136+
Command="{Binding Path=BindingContext.CopyContentCommand, Source={x:Reference dataGrid}}"
137+
CommandParameter="{Binding}">
138+
139+
</syncfusion:MenuItem>
140+
</syncfusion:MenuItemCollection>
141+
</syncfusion:SfDataGrid.RecordContextMenu>
142+
</syncfusion:SfDataGrid>
143+
{% endhighlight %}
144+
{% highlight c# %}
145+
private void CopyCellContent(object obj)
146+
{
147+
if (obj is RowContextMenuInfo context && context.RowIndex >= 0)
148+
{
149+
context.DataGrid?.CopyPasteController.Copy();
150+
}
151+
}
152+
{% endhighlight %}
153+
{% endtabs %}
154+
155+
## Customize Group Caption Context Menu
156+
157+
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.
158+
159+
{% tabs %}
160+
{% highlight xaml %}
161+
<syncfusion:SfDataGrid ...>
162+
<syncfusion:SfDataGrid.GroupCaptionContextMenu>
163+
<syncfusion:MenuItemCollection>
164+
<syncfusion:MenuItem Text="Expand All"/>
165+
<syncfusion:MenuItem Text="Collapse All"/>
166+
</syncfusion:MenuItemCollection>
167+
</syncfusion:SfDataGrid.GroupCaptionContextMenu>
168+
</syncfusion:SfDataGrid>
169+
{% endhighlight %}
170+
{% highlight c# %}
171+
this.dataGrid.GroupCaptionContextMenu = new MenuItemCollection
172+
{
173+
new MenuItem("Expand All") ,
174+
new MenuItem("Collapse All"),
175+
};
176+
{% endhighlight %}
177+
{% endtabs %}
178+
179+
180+
<img alt="Group caption context menu" src="Images/context-menu/group-caption-contextmenu.png" width="404"/>
181+
182+
## Group Caption Context Menu with Commands
183+
184+
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.
185+
186+
{% tabs %}
187+
{% highlight xaml %}
188+
<syncfusion:SfDataGrid ...>
189+
<syncfusion:SfDataGrid.GroupCaptionContextMenu>
190+
<syncfusion:MenuItemCollection>
191+
<syncfusion:MenuItem Text="Expand All"
192+
Command="{Binding Path=BindingContext.ExpandAllCommand, Source={x:Reference dataGrid}}"
193+
CommandParameter="{Binding}"/>
194+
</syncfusion:MenuItemCollection>
195+
</syncfusion:SfDataGrid.GroupCaptionContextMenu>
196+
</syncfusion:SfDataGrid>
197+
{% endhighlight %}
198+
{% highlight c# %}
199+
private void ExpandAll(object obj)
200+
{
201+
if (obj is GroupCaptionContextInfo groupInfo && groupInfo.DataGrid != null && groupInfo.Group != null)
202+
{
203+
groupInfo.DataGrid.ExpandGroup(groupInfo.Group);
204+
}
205+
}
206+
{% endhighlight %}
207+
{% endtabs %}
208+
209+
## Customize Group Summary Context Menu
210+
211+
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.
212+
213+
{% tabs %}
214+
{% highlight xaml %}
215+
<syncfusion:SfDataGrid>
216+
<syncfusion:SfDataGrid.GroupSummaryContextMenu>
217+
<syncfusion:MenuItemCollection>
218+
<syncfusion:MenuItem Text="Clear Summary"/>
219+
</syncfusion:MenuItemCollection>
220+
</syncfusion:SfDataGrid.GroupSummaryContextMenu>
221+
</syncfusion:SfDataGrid>
222+
{% endhighlight %}
223+
{% highlight c# %}
224+
this.dataGrid.GroupSummaryContextMenu = new MenuItemCollection
225+
{
226+
new MenuItem("Clear Summary") ,
227+
};
228+
{% endhighlight %}
229+
{% endtabs %}
230+
231+
<img alt="Group summary context menu" src="Images/context-menu/group-summary-contextmenu.png" width="404"/>
232+
233+
## Group Summary Context Menu with Commands
234+
235+
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`.
236+
237+
{% tabs %}
238+
{% highlight xaml %}
239+
<syncfusion:SfDataGrid>
240+
<syncfusion:SfDataGrid.GroupSummaryContextMenu>
241+
<syncfusion:MenuItemCollection>
242+
<syncfusion:MenuItem Text="Clear Summary"
243+
Command="{Binding BindingContext.ClearGroupSummaryCommand, Source={x:Reference dataGrid}}"
244+
CommandParameter="{Binding}"/>
245+
</syncfusion:MenuItemCollection>
246+
</syncfusion:SfDataGrid.GroupSummaryContextMenu>
247+
</syncfusion:SfDataGrid>
248+
{% endhighlight %}
249+
{% highlight c# %}
250+
private void ClearSummary(object obj)
251+
{
252+
if (DataGrid?.GroupSummaryRows.Count > 0)
253+
DataGrid.GroupSummaryRows.Clear();
254+
}
255+
{% endhighlight %}
256+
{% endtabs %}
257+
258+
## Customize Table Summary Context Menu
259+
260+
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.
261+
262+
{% tabs %}
263+
{% highlight xaml %}
264+
<syncfusion:SfDataGrid ...>
265+
<syncfusion:SfDataGrid.TableSummaryContextMenu>
266+
<syncfusion:MenuItemCollection>
267+
<syncfusion:MenuItem Text="Count"/>
268+
<syncfusion:MenuItem Text="Minimum"/>
269+
<syncfusion:MenuItem Text="Maximum"/>
270+
<syncfusion:MenuItem Text="Sum"/>
271+
<syncfusion:MenuItem Text="Average"/>
272+
</syncfusion:MenuItemCollection>
273+
</syncfusion:SfDataGrid.TableSummaryContextMenu>
274+
</syncfusion:SfDataGrid>
275+
{% endhighlight %}
276+
{% highlight c# %}
277+
this.dataGrid.TableSummaryContextMenu = new MenuItemCollection
278+
{
279+
new MenuItem("Count") ,
280+
new MenuItem("Minimum") ,
281+
new MenuItem("Maximum") ,
282+
new MenuItem("Sum") ,
283+
new MenuItem("Average") ,
284+
};
285+
{% endhighlight %}
286+
{% endtabs %}
287+
288+
<img alt="Table summary context menu" src="Images/context-menu/table-summary-contextmenu.png" width="404"/>
289+
290+
## Table Summary Context Menu with Commands
291+
292+
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`.
293+
294+
{% tabs %}
295+
{% highlight xaml %}
296+
<syncfusion:SfDataGrid ...>
297+
<syncfusion:SfDataGrid.TableSummaryContextMenu>
298+
<syncfusion:MenuItemCollection>
299+
<syncfusion:MenuItem Text="Count"
300+
Command="{Binding BindingContext.AddCountSummaryCommand, Source={x:Reference dataGrid}}"
301+
CommandParameter="{Binding}"/>
302+
</syncfusion:MenuItemCollection>
303+
</syncfusion:SfDataGrid.TableSummaryContextMenu>
304+
</syncfusion:SfDataGrid>
305+
{% endhighlight %}
306+
{% highlight c# %}
307+
private void AddCountSummary(object obj)
308+
{
309+
if (obj is TableSummaryContextInfo context && context.DataGrid != null && context.Column != null)
310+
{
311+
var row = new DataGridTableSummaryRow
312+
{
313+
ShowSummaryInRow = false,
314+
Position = SummaryRowPosition.Bottom,
315+
SummaryColumns = new ObservableCollection<ISummaryColumn>
316+
{
317+
new DataGridSummaryColumn
318+
{
319+
Name = "Count",
320+
MappingName = context.Column.MappingName,
321+
SummaryType = SummaryType.CountAggregate,
322+
Format = "Count: {Count}"
323+
}
324+
}
325+
};
326+
context.DataGrid.TableSummaryRows.Clear();
327+
context.DataGrid.TableSummaryRows.Add(row);
328+
}
329+
}
330+
{% endhighlight %}
331+
{% endtabs %}
332+
333+
## Events
334+
335+
The DataGrid exposes events to customize and react to the context menu life cycle.
336+
337+
### ContextMenuOpening
338+
339+
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:
340+
341+
- **Cancel**: Set to `true` to cancel the display of the context menu.
342+
- **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.
343+
- **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.
344+
345+
### ContextMenuOpened
346+
347+
The `ContextMenuOpened` event occurs immediately after the context menu has been displayed. The event handler receives `ContextMenuOpenedEventArgs` with the following properties:
348+
349+
- **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.
350+
- **MenuItems**: Provides access to the collection of `MenuItem` objects that are currently displayed in the context menu.
351+
352+
### ContextMenuItemClicked
353+
354+
The `ContextMenuItemClicked` event occurs when a menu item within the context menu is clicked. The event handler receives `ContextMenuItemClickedEventArgs` with the following property:
355+
356+
- **MenuItem**: Represents the `MenuItem` object that was clicked by the user.
357+
358+
### ContextMenuClosing
359+
360+
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:
361+
362+
- **Cancel**: Set to `true` to keep the context menu open and prevent its closure.
363+
- **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.
364+
- **MenuItems**: Provides access to the collection of `MenuItem` objects that are currently displayed in the context menu.
365+
366+
### ContextMenuClosed
367+
368+
The `ContextMenuClosed` event occurs after the context menu has been closed. The event handler receives `ContextMenuClosedEventArgs` with the following properties:
369+
370+
- **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.
371+
- **MenuItems**: Provides access to the collection of `MenuItem` objects that were displayed in the closed context menu.

‎maui-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -577,6 +577,7 @@
577577
<li><a href="/maui/DataGrid/grouping">Grouping</a></li>
578578
<li><a href="/maui/DataGrid/summaries">Summaries</a></li>
579579
<li><a href="/maui/DataGrid/selection">Selection</a></li>
580+
<li><a href="/maui/DataGrid/context-menu">Context Menu</a></li>
580581
<li><a href="/maui/DataGrid/clipboard-operations">Clipboard Operations</a></li>
581582
<li><a href="/maui/DataGrid/master-details-view">Master Details View</a></li>
582583
<li><a href="/maui/DataGrid/record-template-view">Record Template View</a></li>

0 commit comments

Comments
 (0)