All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery 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.

JavaScript
  • const 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: "View Details",
  • action: function (e) {
  • // ...
  • }
  • }, {
  • text: "Register a Complaint",
  • action: function (e) {
  • // ...
  • }
  • }]
  • });
  • });

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.

JavaScript
  • $(function() {
  • $("#listContainer").dxList({
  • // ...
  • menuMode: "context" // or "slide"
  • });
  • });
See Also