UI Widgets ActionSheet

A widget consisting of a set of choices related to a certain task.

Type: Object

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

The items passed to the widget via the dataSource option should contain an array of dxButton configuration objects. Each object represents an action sheet button. The following is a sample dxActionSheet items array.

var actionSheetData = [
    {text:"Reply", clickAction: replyClicked},
    {text:"ReplyAll", clickAction: replyAllClicked},
    {text:"Forward", clickAction: forwardClicked},
    {text:"Delete", clickAction: deleteClicked}

To create the dxActionSheet widget, add a div element with dxActionSheet Knockout binding within the body of the required view. Declare an observable Boolean variable and assign it to the visible configuration option to control widget visibility.

var actionSheetVisible = ko.observable(false);
<div data-bind="dxActionSheet: { dataSource: actionSheetData, visible: actionSheetVisible }"></div>

For more information on creating widgets, refer to the Add a Widget documentation section.

The following code sample illustrates how to display the action sheet.


See the Customize Widget Item Appearance topic to learn how to adjust the appearance of widget items.

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:
<div class="button" data-bind="dxButton:{text:'Show action sheet', clickAction: showActionSheet}"></div>
<div id="actionSheetContainer" data-bind="dxActionSheet: { dataSource: actionSheetData, visible: actionSheetVisible }"></div>
actionSheetVisible = ko.observable(false);
actionSheetData = [
    {text:"Reply", clickAction: function(){ processClick("Reply")}},
    {text:"ReplyAll", clickAction: function(){ processClick("ReplyAll")}},
    {text:"Forward", clickAction: function(){ processClick("Forward")}},
    {text:"Delete", clickAction: function(){ processClick("Delete")}}
processClick = function(name){
    DevExpress.ui.notify( name + " clicked", "success", 3000 );
showActionSheet = function () {


An object defining configuration options for the dxActionSheet widget.


This section describes the members used to manipulate the widget.