New to Kendo UI for jQuery? Download free 30-day trial

Events

The Kendo UI ActionSheet exposes events which provide easy configuration or extension points for custom functionality.

Open

The open event fires when the ActionSheet is opened.

The following example demonstrates how you can subscribe to the open event of the widget:

    <div id="actionsheet"></div>
    <button id="openActionSheetBttn">OPEN ACTION SHEET</button>
    <script>
        var actionsheet = $('#actionsheet').kendoActionSheet({
        title:'Select item',
        items:[
            {
              text: 'Edit Item',
              iconClass: 'k-icon k-i-edit',
              description: "Select to enter edit mode.",
              click: onClick
            },
            {
              text: 'Add to Favorites',
              iconClass: 'k-icon k-i-heart',
              click: onClick
            },
            {
              text: 'Cancel',
              iconClass: 'k-icon k-i-cancel',
              group: 'bottom',
              click: onClick
            },
        ],
        open: onOpen
        }).data('kendoActionSheet');

        function onClick(e) {
            e.preventDefault();
            actionsheet.close();
        }

        function onOpen() {
            console.log("Open fired!")
            // your custom logic here
        }

        $("#openActionSheetBttn").kendoButton({
            click: function (e) {
                actionsheet.open()
            }
        });
</script

Close

The close event fires when the ActionSheet is closed.

The following example demonstrates how you can subscribe to the open event of the widget:

    <div id="actionsheet"></div>
    <button id="openActionSheetBttn">OPEN ACTION SHEET</button>
    <script>
        var actionsheet = $('#actionsheet').kendoActionSheet({
        title:'Select item',
        items:[
            {
              text: 'Edit Item',
              iconClass: 'k-icon k-i-edit',
              description: "Select to enter edit mode.",
              click: onClick
            },
            {
              text: 'Add to Favorites',
              iconClass: 'k-icon k-i-heart',
              click: onClick
            },
            {
              text: 'Cancel',
              iconClass: 'k-icon k-i-cancel',
              group: 'bottom',
              click: onClick
            },
        ],
        close: onClose
        }).data('kendoActionSheet');

        function onClick(e) {
            e.preventDefault();
            actionsheet.close();
        }

        function onClose() {
            console.log("Close fired!")
            // your custom logic here
        }

        $("#openActionSheetBttn").kendoButton({
            click: function (e) {
                actionsheet.open()
            }
        });
</script

See Also

In this article
Not finding the help you need? Improve this article