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.
- 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.
- $(function() {
- $("#listContainer").dxList({
- // ...
- menuMode: "context" // or "slide"
- });
- });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.