React 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.
- 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.
- // ...
- export default function App() {
- return (
- <List ...
- menuMode="context"> {/* or "slide" */}
- {/* ... */}
- </List>
- );
- }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.