DevExtreme jQuery/JS - 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
  • 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) {
  • // ...
  • }
  • }]
  • });
  • });

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.

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