DevExtreme Vue - 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.

jQuery
JavaScript
var fruits = [
    { fruit: "Apples", count: 10 },
    { fruit: "Oranges", count: 12 },
    { fruit: "Lemons", count: 15 }
];

$(function() {
    $("#listContainer").dxList({
        dataSource: fruits,
        itemTemplate: function(data, _, element) {
            element.append( $("<b>").text(data.fruit) );
        },
        menuItems: [{
            text: "Add to Cart",
            action: function (e) {
                // ...
                DevExpress.ui.notify(e.itemData.fruit + " are added to cart");
            }
        }, {
            text: "See Details",
            action: function (e) {
                // ...
            }
        }, {
            text: "Register a Complaint",
            action: function (e) {
                // ...
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-list
    [dataSource]="fruits"
    [menuItems]="menuItems">
    <div *dxTemplate="let data of 'item'">
        <b>{{data.fruit}}</b>
    </div>
</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 }
    ];
    menuItems = [{
        text: "Add to Cart",
        action: function (e) {
            // ...
            notify(e.itemData.fruit + " are added to cart");
        }
    }, {
        text: "See Details",
        action: function (e) {
            // ...
        }
    }, {
        text: "Register a Complaint",
        action: function (e) {
            // ...
        }
    }];
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

The user can access the commands in one of the following ways depending on the value of the menuMode option.

  • "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.

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        // ...
        menuMode: "context" // or "slide"
    });
});
Angular
HTML
TypeScript
<dx-list
    menuMode="context"> <!-- or "slide" -->
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
See Also