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

jQuery
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) {
                // ...
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-list
    [dataSource]="fruits"
    [menuItems]="menuItems">
    <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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList
        :data-source="fruits"
        item-template="list-item">
        <template #list-item="{ data }">
            <b>{{ data.fruit }}</b>
        </template>
        <DxMenuItem
            text="Add to Cart"
            :action="addToCart"
        />
        <DxMenuItem
            text="View Details"
            :action="showDetails"
        />
        <DxMenuItem
            text="Register a Complaint"
            :action="complain"
        />
    </DxList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxList, {
    DxMenuItem
} from 'devextreme-vue/list';
import notify from 'devextreme/ui/notify';

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

export default {
    components: {
        DxList,
        DxMenuItem
    },
    data() {
        return {
            fruits
        }
    },
    methods: {
        addToCart (e) {
            // ...
            notify(e.itemData.fruit + " are added to cart");
        },
        showDetails (e) {
            // ...
        },
        complain (e) {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import List, {
    MenuItem
} from 'devextreme-react/list';
import notify from 'devextreme/ui/notify';

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

const ListItem = (data) => {
    return (
        <b>{ data.fruit }</b>
    );
};

const addToCart = (e) => {
    // ...
    notify(e.itemData.fruit + " are added to cart");
};
const showDetails = (e) => {
    // ...
};
const complain = (e) => {
    // ...
};

export default function App() {
    return (
        <List
            dataSource={fruits}
            itemRender={ListItem}>
            <MenuItem
                text="Add to Cart"
                action={addToCart}
            />
            <MenuItem
                text="View Details"
                action={showDetails}
            />
            <MenuItem
                text="Register a Complaint"
                action={complain}
            />
        </List>
    );
}

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.

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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList ...
        menu-mode="context"> <!-- or "slide" -->
        <!-- ... -->
    </DxList>
</template>

<script>
// ...
</script>
React
App.js
// ...
export default function App() {
    return (
        <List ...
            menuMode="context"> {/* or "slide" */}
            {/* ... */}
        </List>
    );
}
See Also