DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Action Sheet - Popover Mode

JavaScript ActionSheet can appear at the bottom of the page or over a certain element. Enable the usePopover property to display JavaScript ActionSheet over a certain element on the page and use the target property to specify this element. In this demo, JavaScript ActionSheet is integrated with the List component and appears when you click a list item.

Backend API
$(() => { const actionSheet = $('#action-sheet').dxActionSheet({ dataSource: actionSheetItems, title: 'Choose action', usePopover: true, onItemClick(value) { DevExpress.ui.notify(`The "${value.itemData.text}" button is clicked.`); }, }).dxActionSheet('instance'); $('#list').dxList({ dataSource: contacts, itemTemplate(itemData, itemIndex, itemElement) { itemElement.append( $('<div />').text(itemData.name), $('<div />').text(itemData.phone), $('<div />').text(itemData.email), ); }, onItemClick(e) { actionSheet.option('target', e.itemElement); actionSheet.option('visible', true); }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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.1.6/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 id="list"></div> <div id="action-sheet"></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', }, ];