Angular List - Item Context Menu
If you want to offer the user a set of commands related to a List item, you can do so with the context menu. To specify the commands, use the menuItems array. Each object in this array configures a single command.
- <dx-list
- [dataSource]="fruits"
- >
- <div *dxTemplate="let data of 'item'">
- <b>{{data.fruit}}</b>
- </div>
- <dxi-menu-item
- text="Add to Cart"
- [action]="addToCart">
- </dxi-menu-item>
- <dxi-menu-item
- text="View Details"
- [action]="showDetails">
- </dxi-menu-item>
- <dxi-menu-item
- text="Register a Complaint"
- [action]="complain">
- </dxi-menu-item>
- </dx-list>
- import { DxListModule } from "devextreme-angular";
- import notify from "devextreme/ui/notify";
- // ...
- export class AppComponent {
- fruits = [
- { fruit: "Apples", count: 10 },
- { fruit: "Oranges", count: 12 },
- { fruit: "Lemons", count: 15 }
- ];
- addToCart (e) {
- // ...
- notify(e.itemData.fruit + " are added to cart");
- }
- showDetails (e) {
- // ...
- }
- complain (e) {
- // ...
- }
- }
- @NgModule({
- imports: [
- // ...
- DxListModule
- ],
- // ...
- })
The user can access the commands in one of the following ways depending on the value of the menuMode property.
"context"
The user right-clicks or performs a long tap on an item to open the context menu with the commands."slide"
The user swipes an item to access the commands. If the menuItems array contains a single command, swiping the item reveals the button executing this command. If there are several commands in the menuItems array, swiping the item reveals the "More" button that opens a pop-up window with these commands.
- <dx-list
- menuMode="context"> <!-- or "slide" -->
- </dx-list>
- import { DxListModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxListModule
- ],
- // ...
- })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.