All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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