UI Widgets Toast

The toast message widget.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

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

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxToast widget using the Knockout approach.

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.

See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxToast widget is related to the Overlays category. So read an overview of the features that are common for collection container widgets in the Common Tasks topic of the Overlays article.
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.