Example of Context Menu in Blazor DataGrid Component
This example shows how to use the context menu in the DataGrid component. To access the context menu, right-click anywhere on the DataGrid.
Order ID | Customer ID | Order Date | Freight | Ship Country |
---|
10001 | ALFKI | 5/15/1991 | $2.30 | Denmark |
10002 | ANATR | 4/4/1990 | $3.30 | Brazil |
10003 | ANTON | 11/30/1957 | $4.30 | Germany |
10004 | BLONP | 10/22/1930 | $5.30 | Austria |
10005 | BOLID | 2/18/1953 | $6.30 | Switzerland |
10006 | ALFKI | 5/15/1991 | $4.60 | Denmark |
10007 | ANATR | 4/4/1990 | $6.60 | Brazil |
10008 | ANTON | 11/30/1957 | $8.60 | Germany |
10009 | BLONP | 10/22/1930 | $10.60 | Austria |
10010 | BOLID | 2/18/1953 | $12.60 | Switzerland |
10011 | ALFKI | 5/15/1991 | $6.90 | Denmark |
10012 | ANATR | 4/4/1990 | $9.90 | Brazil |
When you right-click on the Blazor DataGrid, you can choose to display the context menu. To configure the items in the context menu, set the ContextMenuItems property to either default or custom. Each item will be displayed in accordance with its target. The following are the default context menu items:
- Edit - Edit the current record.
- Delete - Delete the current record.
- Save - Save the edited record.
- Cancel - Cancel the edited state.
- Copy - Copy the selected records.
- PdfExport - Export the DataGrid as PDF file format.
- ExcelExport - Export the DataGrid as Excel file format.
- CsvExport - Export the DataGrid as CSV file format.
- SortAscending - Sort the current column in ascending order.
- SortDescending - Sort the current column in descending order.
- FirstPage - Go to the first page.
- PrevPage - Go to the previous page.
- LastPage - Go to the last page.
- NextPage - Go to the next page.
The context menu feature is enabled in this demo by setting the ContextMenuItems
property to the default items.
More information about the Context menu feature can be found in this documentation section.