Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
$(() => {
$('#context-menu').dxContextMenu({
dataSource: contextMenuItems,
width: 200,
target: '.target-area',
onItemClick(e) {
if (!e.itemData.items) {
DevExpress.ui.notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500);
}
},
});
});
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.7/css/dx.light.css" />
<script src="js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="target-area"> Right click within this region to display the DevExtreme Context Menu</div>
<div id="context-menu"></div>
</div>
</body>
</html>
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
}
.demo-container {
height: 100%;
}
.target-area {
color: var(--dx-color-text);
background-color: var(--dx-color-border);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
const contextMenuItems = [
{
text: 'Electronics',
items: [
{
text: 'Computers',
items: [
{
text: 'Desktops',
},
{
text: 'Laptops',
},
{
text: 'Tablets',
},
{
text: 'Monitors',
},
{
text: 'Printers',
},
{
text: 'Scanners',
},
{
text: 'Servers',
},
{
text: 'Network Devices',
},
{
text: 'Warranties',
},
{
text: 'Projectors & Screens'
},
{
text: 'Computer Accessories',
},
]
},
{
text: 'Cell Phones',
items: [
{
text: 'Home & Office Phones',
},
{
text: 'Smart Phones & PDAs',
},
{
text: 'Senior Cell Phones'
},
{
text: 'Mobile Broadband Devices',
},
{
text: 'Cell Phone Accessories',
},
]
},
{
text: 'Camera & Photo',
items: [
{
text: 'Action Cameras',
},
{
text: 'Camcorders',
},
{
text: 'Digital Cameras',
},
{
text: 'Digital Picture Frames',
},
{
text: 'Film Cameras',
},
{
text: 'Professional Video Cameras',
},
{
text: 'Flashes',
},
{
text: 'Lenses',
},
{
text: 'Photo Printers',
},
{
text: 'Film & Slide Scanners',
},
{
text: 'Slide Projectors',
},
{
text: 'Slide Viewers',
},
{
text: 'Tripods & Monopods',
},
{
text: 'Underwater Video & Photography',
},
{
text: 'Camera Accessories',
},
]
},
{
text: 'Audio',
items: [
{
text: 'Boomboxes',
},
{
text: 'DVD & CD Player Bags',
},
{
text: 'Hi-Fi & Home Audio Accessories',
},
{
text: 'Media Streaming Devices',
},
{
text: 'MP3 & Digital Media Players',
},
{
text: 'MP3 Player Accessories',
},
{
text: 'Personal Cassette Players',
},
{
text: 'Personal CD Players',
},
{
text: 'Compact Stereos',
},
{
text: 'Speakers',
},
]
},
{
text: 'Home Appliances',
items: [
{
text: 'Air Conditioners',
},
{
text: 'Coffee Machines',
},
{
text: 'Fans',
},
{
text: 'Lamps',
},
{
text: 'Microwaves',
},
{
text: 'Refrigerators',
},
{
text: 'Washers & Dryers'
},
{
text: ' Water Heaters',
},
{
'text': 'Vacuum'
},
{
text: 'Steaming & Ironing'
}
]
},
]
},
{
text: 'Entertainment',
items: [
{
text: 'Films & Music',
items: [
{
text: 'TV Shows',
},
{
text: 'DVD',
},
{
text: 'Blu-ray',
},
{
text: 'CD',
},
{
text: 'SACD',
},
{
text: 'Vinyl',
},
{
text: 'Cassette'
},
{
text: 'Musical Instruments',
},
{
text: 'DJ Equipment'
}
]
},
{
text: 'Games & Toys',
items: [
{
text: 'PC Games',
},
{
text: 'Virtual Reality',
},
{
text: 'Boxed Games',
},
{
text: 'Download Games',
},
{
text: 'Handheld Game Systems'
},
{
text: 'Legacy Systems',
},
{
text: 'Cards',
},
]
},
]
},
{
text: 'Healthcare & Living',
items: [
{
text: 'Sports & Outdoors',
items: [
{
text: 'Camping',
},
{
text: 'Fitness',
},
{
text: 'Football',
},
{
text: 'Cycling',
},
{
text: 'Running',
},
{
text: 'Sport Electronics',
},
{
text: 'Sport Apparel'
},
{
text: 'Trainers & Tennis Shoes',
},
]
},
{
text: 'Beauty',
items: [
{
text: 'Bath & Shower',
},
{
text: 'Skin Care',
},
{
text: 'Hair Care',
},
{
text: 'Nail Care',
},
{
text: 'Make-up'
},
{
text: 'Fragrance',
},
{
text: 'Salon & SPA Equipment',
},
{
text: 'Tools & Accessories',
},
]
},
{
text: 'Fashion',
items: [
{
text: 'Clothing',
},
{
text: 'Jewellery',
},
{
text: 'Shoes',
},
{
text: 'Handbags & Shoulder Bags',
},
{
text: 'Watches',
},
{
text: 'Accessories',
}
]
}
]
},
];