All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Overview

The ActionSheet 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.

View Demo

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

jQuery
HTML
JavaScript
<div id="buttonContainer"></div>
<div id="actionSheetContainer"></div>
// Shows a message with a button name
var processClick = function (name) {
    DevExpress.ui.notify(name + " clicked", "success", 3000);
};

$(function() {
    $("#buttonContainer").dxButton({
        text: 'Show the ActionSheet',
        onClick: function () {
            // Shows the ActionSheet widget
            $("#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") } }
        ]
    });
});
Angular
HTML
TypeScript
<dx-button
    text="Show the ActionSheet"
    (onClick)="actionSheet.visible = true">
</dx-button>

<dx-action-sheet
    #actionSheet
    [dataSource]="actionSheetData"
    [visible]="false">
</dx-action-sheet>
import { DxActionSheetModule, DxButtonModule } from "devextreme-angular";
import notify from "devextreme/ui/notify";
// ...
export class AppComponent {
    actionSheetData = [
        { text: "Reply", onClick: () => { this.processClick("Reply") } },
        { text: "Reply All", onClick: () => { this.processClick("Reply All") } },
        { text: "Forward", onClick: () => { this.processClick("Forward") } },
        { text: "Delete", onClick: () => { this.processClick("Delete") } }
    ];
    processClick (name) {
        notify(name + " clicked", "success", 3000);
    }
}
@NgModule({
    imports: [
        // ...
        DxActionSheetModule,
        DxButtonModule
    ],
    // ...
})

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