Your search did not match any results.
Action Sheet

Popover Mode

Documentation

This demo illustrates the ActionSheet component in the popover mode.

Backend API
Copy to CodePen
Apply
Reset
window.onload = function () { const viewModel = { actionSheetOptions: { dataSource: actionSheetItems, title: 'Choose action', visible: ko.observable(false), target: ko.observable(''), usePopover: true, onItemClick(value) { DevExpress.ui.notify(`The "${value.itemData.text}" button is clicked.`); }, }, listOptions: { dataSource: contacts, onItemClick(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="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> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.2.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"> <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%; }
const actionSheetItems = [ { text: 'Call' }, { text: 'Send message' }, { text: 'Edit' }, { text: 'Delete' }, ]; const 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', }, ];