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