Skip to content

Commit 980c0db

Browse files
friedcucumberfriedcucumber
committed
Lena's Update #2 
1 parent 938645a commit 980c0db

1 file changed

Lines changed: 66 additions & 29 deletions

File tree

‎README.md‎

Lines changed: 66 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,61 +7,98 @@
77

88
# Blazor Grid - Customize Context Menu
99

10-
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.
10+
This example shows how to enable, customize, and implement context menus in Blazor Grid and Toolbar components. It demonstrates the following tasks:
11+
* Enable built-in context menus for DxGrid's predefined areas: header, footer, data row, group panel, group row, and group footer.
12+
* Customize context menu items for header, footer, and data rows using DxGrid APIs.
13+
* Define custom context menus for areas that do not include built-in context menus.
1114

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

1417
## Implementation Details
1518

16-
### Display Context Menus for All Built-in Areas
19+
### Enable Context Menus for All Predefined Areas
1720

18-
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.
21+
Set the [ContextMenus](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.ContextMenus) property to `All` to allow users to use built-in context menus in the following Grid areas: header, footer, data row, group panel, group row, and group footer.
1922

20-
File to Review: [Index.razor](./CS/GridWithContextMenu/Pages/Index.razor#L14)
23+
```
24+
<DxGrid @ref="Grid"
25+
...
26+
ContextMenus="GridContextMenus.All">
27+
</DxGrid>
28+
```
2129

22-
### Customize Context Menu Items Using Grid's Built-in API
30+
### Customize Context Menu Items Using Grid APIs
2331

24-
DxGrid Component includes built-in APIs to customize context menu items. Follow the steps below to implement them:
32+
The `DxGrid` component includes built-in APIs used to customize context menu items. This scenario affects the following Grid areas: header, footer, and data rows.
2533

26-
1. Add the [oncontextmenu:preventDefault](./CS/GridWithContextMenu/Pages/Index.razor#L14) to disable the standard browser context menu.
27-
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.
34+
In the Grid's [CustomizeContextMenu](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.CustomizeContextMenu) event handler, call the helper method defined in the [GridContextMenuHelper.cs](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs#L298-L365) class to customize the built-in context menu items.
2835

29-
This scenario affects the following DxGrid areas: Header, Footer, and Data Rows.
36+
```
37+
<DxGrid @ref="Grid"
38+
CustomizeContextMenu="Grid_CustomizeContextMenu"
39+
... >
40+
<!-- ... -->
41+
</DxGrid>
3042
31-
Files to Review:
32-
* [Index.razor](./CS/GridWithContextMenu/Pages/Index.razor#L64)
33-
* [GridContextMenuHelper.cs](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs#L298-L365)
43+
@code {
44+
IGrid Grid { get; set; }
45+
// ...
3446
35-
### Add Custom Context Menus
36-
37-
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:
47+
void Grid_CustomizeContextMenu(GridCustomizeContextMenuEventArgs args) => GridContextMenuHelper.CustomizeContextMenu(args);
48+
}
49+
```
3850

39-
1. Add the [oncontextmenu:preventDefault](./CS/GridWithContextMenu/Pages/Index.razor#L14) to disable the standard browser context menu.
40-
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.
41-
42-
This scenario affects the following application areas: Toolbar Component, DxGrid's Edit Row, and DxGrid's Pager.
51+
### Add Custom Context Menus
4352

53+
Follow the steps below to display custom context menus for the toolbar component, Grid's edit row, and Grid's pager:
54+
55+
1. In the [GridContextMenuContainer](./CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor#L4-L28) component, define the context menu components.
56+
2. In the [GridContextMenuHelper](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs#L31-L59) class, implement context menu item generation, state management, and click handlers. The Blazor [Grid API](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid._methods) uses them to execute commands.
57+
3. Add the [oncontextmenu:preventDefault](./CS/GridWithContextMenu/Pages/Index.razor#L14) directive to disable the standard browser context menu.
58+
4. 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.
59+
60+
```
61+
<DxGrid @ref="Grid"
62+
...
63+
CustomizeElement="Grid_CustomizeElement"
64+
@oncontextmenu:preventDefault>
65+
<!-- ... -->
66+
</DxGrid>
67+
68+
<GridContextMenuContainer Grid="Grid" @ref="ContextMenuContainer" />
69+
70+
@code {
71+
IGrid Grid { get; set; }
72+
GridContextMenuContainer ContextMenuContainer { get; set; }
73+
// ...
74+
75+
void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
76+
if(GridContextMenuHelper.IsContextMenuElement(e.ElementType)) {
77+
e.Attributes["oncontextmenu"] = EventCallback.Factory.Create<MouseEventArgs>(
78+
this,
79+
async mArgs => await ContextMenuContainer.Grid_ContextMenu(e, mArgs)
80+
);
81+
}
82+
}
83+
}
84+
```
85+
86+
### Video
4487

45-
Files to Review:
46-
* [Index.razor](./CS/GridWithContextMenu/Pages/Index.razor#L66)
47-
* [GridContextMenuContainer.razor](./CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor#L4-L28)
48-
* [GridContextMenuHelper.cs](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs#L31-59)
88+
- [Adding a Context Menu to a Grid](https://www.youtube.com/watch?v=TfBR77ARnf8&t)
4989

50-
<!--
5190
## Files to Review
5291

5392
- [Index.razor](./CS/GridWithContextMenu/Pages/Index.razor)
5493
- [GridContextMenuHelper.cs](./CS/GridWithContextMenu/Data/GridContextMenuHelper.cs)
55-
- [GridContextMenuContainer.razor](./CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor) -->
94+
- [GridContextMenuContainer.razor](./CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor)
5695

5796
## Documentation
5897

5998
- [DxContextMenu](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu)
6099
- [DxGrid](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid)
61-
62-
## Video
63-
64-
- [Adding a Context Menu to a Grid](https://www.youtube.com/watch?v=TfBR77ARnf8&t)
100+
- [DxGrid.CustomizeElement](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.CustomizeElement)
101+
- [DxGrid.CustomizeContextMenu](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.CustomizeContextMenu)
65102

66103
## More Examples
67104

0 commit comments

Comments
 (0)