All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

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.

jQuery
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") } }
        ]
    });
});
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
    ],
    // ...
})
Vue
App.vue
<template>
    <div>
        <DxActionSheet
            v-model:visible="isActionSheetVisible"
            :data-source="actionSheetData"
        />
        <DxButton
            text="Show the ActionSheet"
            @click="showActionSheet"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxActionSheet from 'devextreme-vue/action-sheet';
import DxButton from 'devextreme-vue/button';
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxActionSheet,
        DxButton
    },
    data() {
        return {
            isActionSheetVisible: false,
            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") } }
            ]
        };
    },
    methods: {
        showActionSheet(e) {
            this.isActionSheetVisible = true;
        },
        processClick(name) {
            notify(name + " clicked", "success", 3000);
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { ActionSheet } from 'devextreme-react/action-sheet';
import { Button } from 'devextreme-react/button';
import notify from "devextreme/ui/notify";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isActionSheetVisible: false };
        this.showActionSheet = this.showActionSheet.bind(this);
        this.processClick = this.processClick.bind(this);
        this.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);
        this.setState({ isActionSheetVisible: false });
    }

    showActionSheet() {
        this.setState({ isActionSheetVisible: true });
    }

    render() {
        return (
            <div>
                <ActionSheet
                    visible={this.state.isActionSheetVisible}
                    dataSource={this.actionSheetData}
                />
                <Button
                    text="Show the ActionSheet"
                    onClick={this.showActionSheet}
                />
            </div>
        );
    }
}

export default App;

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