UI Widgets Toast

The toast message widget.

Type: Object

The main purpose of the dxToast widget is to show a toast message containing specified text.

To create a dxToast widget, add a div element with dxToast Knockout binding within the body of the required view.

HTML
<div data-bind="dxToast:{message:'The toast message'}"></div>

You can also show a toast message using the DevExpress.ui.notify() method. In this case, you do not need to use a widget.

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

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show toast', clickAction: showToast }"></div>
<div id="toastContainer" data-bind="dxToast:{message:'The toast message', type:'success', displayTime: 3000 }"></div>
showToast = function(){
  $("#toastContainer").dxToast('instance').show();
}
body{
    text-align:center;
}
.button{
    margin-top:25px;
}

Configuration

An object defining configuration options for the dxToast widget.

Methods

This section describes members used to manipulate the widget.

Events

This section describes events fired by this component.