ActionSheet Events

This section describes events exposed by this widget.

cancelClick

Fires when the Cancel button is clicked.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
Indicates whether or not to cancel hiding the action sheet menu when clicking the Cancel button.
model: Object
Provides access to the data that is available for binding against the element.
cancel: Boolean
Indicates whether or not to cancel hiding the action sheet when the Cancel button is clicked.

In the handling function, use the cancel field of the object passed as a handler parameter. Set this field to true to prohibit the hiding of the action sheet menu when an end user clicks the Cancel button on it.

See Also
Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show action sheet', onClick: showActionSheet }"></div>
<div id="actionSheetContainer" data-bind="dxActionSheet: {
	dataSource: actionSheetData,
	visible: actionSheetVisible
}"></div>	
var viewModel = {
    actionSheetVisible: ko.observable(false),
    actionSheetData: [
        { text: "Reply" },
        { text: "ReplyAll" },
        { text: "Forward" },
        { text: "Delete" }
    ],
    showActionSheet: function () {
        viewModel.actionSheetVisible(true);
    }
};

ko.applyBindings(viewModel);

$('#actionSheetContainer').dxActionSheet("instance").on('cancelClick', function (args) {
    DevExpress.ui.notify("Cancel button has been clicked.", "info", 1000);
});
body{
  text-align: center;
}
.button{
  margin: 10px;
}

contentReady

Fires when widget content is ready.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.

disposing

Fires when you dispose of this component.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.

itemClick

Fires when a widget item is clicked.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
itemData: Object
The data that is bound to the clicked item.
itemElement: jQuery
An HTML element of the item.
itemIndex: Number
Specifies the index of the clicked item.
Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show action sheet', onClick: showActionSheet }"></div>
<div id="actionSheetContainer" data-bind="dxActionSheet: {
  dataSource: actionSheetData,
  visible: actionSheetVisible
}"></div>
var viewModel = {
    actionSheetVisible: ko.observable(false),
    actionSheetData: [
        { text: "Reply" },
        { text: "ReplyAll" },
        { text: "Forward" },
        { text: "Delete" }
    ],
    showActionSheet: function () {
        viewModel.actionSheetVisible(true);
    }
};

ko.applyBindings(viewModel);

$("#actionSheetContainer").dxActionSheet("instance").on("itemClick", function (clickOptions) {
    DevExpress.ui.dialog.alert("\"" + clickOptions.itemData.text + "\" has been clicked", "Action executed");
});
body{
  text-align: center;
}
.button{
  margin: 10px;
}

itemContextMenu

Fires when the the right mouse button is clicked when the pointer is over a widget item, or when the "sustained" (also known as a long press) touch action is performed.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
itemData: Object
The data that is bound to the item.
itemElement: jQuery
An HTML element of the item.
itemIndex: Number
Specifies the index of the item.

itemHold

Fires when the widget's collection item is being held for the time period specified by the itemHoldTimeout option.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
itemData: Object
The data that is bound to the item being held.
itemElement: jQuery
An HTML element of the item.
itemIndex: Number
Specifies the index of the item being held.

itemRendered

Fires after a collection item is rendered.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
itemData: Object
The data that is bound to the item to be rendered.
itemElement: jQuery
An HTML element of the item.
itemIndex: Number
Specifies the index of the rendered item.

optionChanged

Fires after an option of the component is changed.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
value: any
Specifies a new value for the option.