Your search did not match any results.
ContextMenu

Templates

Documentation
The ContextMenu widget provides full control over the appearance and behavior of menu items across all nesting levels.
Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.contextMenuOptions = { dataSource: contextMenuItems, width: 200, target: '#image', itemTemplate: function (itemData, itemIndex, itemElement) { var template = $('<div></div>'); if(itemData.icon){ template.append('<span class="' + itemData.icon + '"><span>'); } if(itemData.items){ template.append('<span class="dx-icon-spinright"><span>'); } template.append(itemData.text); return template; }, onItemClick: function(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=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/17.1.5/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" ng-app="DemoApp" ng-controller="DemoController"> <div class="label"> Right click an image to display the context menu: </div> <img id="image" src="images/products/5.png"/> <div dx-context-menu="contextMenuOptions"></div> </div> </body> </html>
.dx-menu-item-content span { margin-right: 5px; } .dx-menu-item-has-submenu .dx-icon-spinright { position: absolute; top: 7px; right: 2px; } #image{ height: 300px; } .label { color: #767676; }
var contextMenuItems = [ { text: 'Share', icon: 'dx-icon-globe', items: [ { text: 'Facebook' }, { text: 'Twitter' }] }, { text: 'Download', icon: 'dx-icon-download' }, { text: 'Add Comment', icon: 'dx-icon-add' }, { text: 'Add to Favorite', icon: 'dx-icon-favorites' } ];