All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery ActionSheet - Overview

The ActionSheet UI component is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.

View Demo

The following code adds a simple ActionSheet to your page. The UI component is shown on a button click.

HTML
JavaScript
  • <div id="buttonContainer"></div>
  • <div id="actionSheetContainer"></div>
  • // Shows a message with a button name
  • const processClick = function (name) {
  • DevExpress.ui.notify(name + " clicked", "success", 3000);
  • };
  •  
  • $(function() {
  • $("#buttonContainer").dxButton({
  • text: 'Show the ActionSheet',
  • onClick: function () {
  • // Shows the ActionSheet UI component
  • $("#actionSheetContainer").dxActionSheet("instance").show();
  • }
  • });
  •  
  • $("#actionSheetContainer").dxActionSheet({
  • dataSource: [
  • { text: "Reply", onClick: function () { processClick("Reply") } },
  • { text: "Reply All", onClick: function () { processClick("Reply All") } },
  • { text: "Forward", onClick: function () { processClick("Forward") } },
  • { text: "Delete", onClick: function () { processClick("Delete") } }
  • ]
  • });
  • });

Note that every data source object has a text field that is rendered on the buttons of the ActionSheet. Also, there is the onClick field that represents a click handler for a certain ActionSheet button.

See Also