Skip to content

Context menu - Readme update #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
friedcucumber merged 8 commits into from
Jul 2, 2026
Merged

Context menu - Readme update #13

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cfb0d95
Readme Update
friedcucumber Jun 30, 2026
39b71f2
Lena's Edits
friedcucumber Jul 1, 2026
938645a
upd
friedcucumber Jul 1, 2026
980c0db
Lena's Update #2
friedcucumber Jul 1, 2026
5fdd48a
upd vale
friedcucumber Jul 1, 2026
f7e40f5
Apply suggestions from code review
friedcucumber Jul 1, 2026
0533099
Update
friedcucumber Jul 1, 2026
464e501
Edits
friedcucumber Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CS/GridWithContextMenu/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
DataItemDeleting="Grid_DataItemDeleting"
ContextMenus="GridContextMenus.All"
CustomizeContextMenu="Grid_CustomizeContextMenu"
@oncontextmenu:preventDefault>
@oncontextmenu:preventDefault
ShowGroupPanel="true">
<ToolbarTemplate>
<DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
<DxToolbarItem Text="New" Click="NewItem_Click" />
Expand Down
43 changes: 38 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,54 @@
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
<!-- default badges end -->

# Blazor Grid - Display a Context Menu
# Blazor Grid - Customize Context Menu

You can display a Context Menu when you right-click any Blazor Grid element. In this example, a click on a column header or row invokes the Context Menu.
This repository displays for various DxGrid areas, customizes their items using DxGrid's built-in APIs, and defines context menus for areas that do not include built-in context menus.
Comment thread
friedcucumber marked this conversation as resolved.
Outdated

![Grid with Context Menu for a column](result.png)

Add the **oncontextmenu:preventDefault** to disable the standard browser context menu. In the Grid's [CustomizeElement](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.CustomizeElement) event handler, subscribe to the **contextmenu** event (displays the custom Context Menu).
## Implementation Details

The [GridContextMenuContainer](./CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor) component contains Context Menu components. The [GridContextMenuHelper](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs) class implements Context Menu's item generation, manages state, and includes the click handlers that use the Blazor [Grid's API](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid._methods) to execute commands.
### Display Context Menus for All Built-in Areas
Comment thread
friedcucumber marked this conversation as resolved.
Outdated

Set the [ContextMenus](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.ContextMenus) property to `All` to enable DxGrid built-in context menus for the following areas: Header, Footer, Data Row, Group Panel, Group Row, and Group Footer.
Comment thread
friedcucumber marked this conversation as resolved.
Outdated

File to Review: [Index.razor](./CS/GridWithContextMenu/Pages/Index.razor#L14)
Comment thread
friedcucumber marked this conversation as resolved.
Outdated

### Customize Context Menu Items Using Grid's Built-in API
Comment thread
friedcucumber marked this conversation as resolved.
Outdated

DxGrid Component includes built-in APIs to customize context menu items. Follow the steps below to implement them:

@khamlyuk khamlyuk Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original phrase is ambiguous: do we implement APIs or context menu items?
I'll temporarily remove the second sentence, as I think we wouldn't need it when we rethink the text below.

Suggested change
DxGrid Component includes built-in APIs to customize context menu items. Follow the steps below to implement them:
The `DxGrid` component includes built-in APIs used to customize context menu items.


1. Add the [oncontextmenu:preventDefault](./CS/GridWithContextMenu/Pages/Index.razor#L14) to disable the standard browser context menu.

@khamlyuk khamlyuk Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This step is not required at this point. This is for the next section (see notes form Alex in the support card).

2. In the Grid's [CustomizeContextMenu](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.CustomizeContextMenu) event handler, subscribe to the **contextmenu** event to display the custom context menu items.

@khamlyuk khamlyuk Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which custom items? Provide some details. We can also mention the helper class here.


This scenario affects the following DxGrid areas: Header, Footer, and Data Rows.

@khamlyuk khamlyuk Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can mention this in the section intro.


Files to Review:
* [Index.razor](./CS/GridWithContextMenu/Pages/Index.razor#L64)
* [GridContextMenuHelper.cs](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs#L298-L365)
Comment thread
friedcucumber marked this conversation as resolved.
Outdated

### Add Custom Context Menus

The [GridContextMenuContainer](./CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor) component contains Context Menu components. The [GridContextMenuHelper](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs) class implements Context Menu's item generation, manages state, and includes the click handlers that use the Blazor [Grid's API](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid._methods) to execute commands. Follow the steps below to display custom context menus:
Comment thread
friedcucumber marked this conversation as resolved.
Outdated

1. Add the [oncontextmenu:preventDefault](./CS/GridWithContextMenu/Pages/Index.razor#L14) to disable the standard browser context menu.
2. In the Grid's [CustomizeElement](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.CustomizeElement) event handler, subscribe to the **contextmenu** event to display the custom Context Menu.

This scenario affects the following application areas: Toolbar Component, DxGrid's Edit Row, and DxGrid's Pager.


Files to Review:
* [Index.razor](./CS/GridWithContextMenu/Pages/Index.razor#L66)
* [GridContextMenuContainer.razor](./CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor#L4-L28)
* [GridContextMenuHelper.cs](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs#L31-59)
Comment thread
friedcucumber marked this conversation as resolved.
Outdated

<!--
Comment thread
friedcucumber marked this conversation as resolved.
Outdated
## Files to Review

- [Index.razor](./CS/GridWithContextMenu/Pages/Index.razor)
- [GridContextMenuHelper.cs](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs)
- [GridContextMenuContainer.razor](./CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor)
- [GridContextMenuContainer.razor](./CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor) -->

## Documentation

Expand Down
Binary file modified result.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading