Your search did not match any results.
Action Sheet

Popover Mode

Documentation
This demo illustrates the ActionSheet widget in the popover mode.
Copy to Codepen
Apply
Reset
window.onload = function() { var viewModel = { actionSheetOptions: { dataSource: actionSheetItems, title: "Choose action", visible: ko.observable(false), target: ko.observable(""), usePopover: true, onItemClick: function(value) { DevExpress.ui.notify("The \"" + value.itemData.text + "\" button is clicked."); } }, listOptions: { dataSource: contacts, onItemClick: function(e) { e.model.actionSheetOptions.target(e.itemElement); e.model.actionSheetOptions.visible(true); } } }; ko.applyBindings(viewModel, document.getElementById("demo")); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.6/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 id="demo"> <div data-bind="dxList: listOptions"> <div data-options="dxTemplate: { name: 'item' } "> <div data-bind="text: name"></div> <div data-bind="text: phone"></div> <div data-bind="text: email"></div> </div> </div> <div data-bind="dxActionSheet: actionSheetOptions"></div> </div> </div> </body> </html>
#list, .demo-container { height: 100%; }
var actionSheetItems = [ { text: "Call" }, { text: "Send message" }, { text: "Edit" }, { text: "Delete" } ]; var contacts = [ { name: "Barbara J. Coggins", phone: "512-964-2757", email: "BarbaraJCoggins@rhyta.com", category: "Family" }, { name: "Leslie S. Alcantara", phone: "360-684-1334", email: "LeslieSAlcantara@teleworm.us", category: "Friends" }, { name: "Chad S. Miles", phone: "520-573-7903", email: "ChadSMiles@rhyta.com", category: "Work" }, { name: "Michael A. Blevins", phone: "530-480-1961", email: "MichaelABlevins@armyspy.com", category: "Work" }, { name: "Jane K. Hernandez", phone: "404-781-0805", email: "JaneKHernandez@teleworm.us", category: "Friends" }, { name: "Kim D. Thomas", phone: "603-583-9043", email: "KimDThomas@teleworm.us", category: "Work" }, { name: "Donald L. Jordan", phone: "772-766-2842", email: "DonaldLJordan@dayrep.com", category: "Family" }, { name: "Nicole A. Rios", phone: "213-812-8400", email: "NicoleARios@armyspy.com", category: "Friends" }, { name: "Barbara M. Roberts", phone: "614-365-7945", email: "BarbaraMRoberts@armyspy.com", category: "Friends" } ];