Toast Methods

This section describes members used to manipulate the widget.

beginUpdate()

Prevents the component from refreshing until the endUpdate method is called.

The beginUpdate and endUpdate methods allow you to apply several modifications to the component. After the beginUpdate method is called, the component does not raise events, and does not update the UI until the endUpdate method is called. Using these methods prevents excessive component updates when changing multiple component settings at once.

content()

Returns an HTML element representing the widget.

Return Value: Object
An element representing the widget.

endUpdate()

Enables the component to refresh after the beginUpdate method call.

The beginUpdate and endUpdate methods allow you to apply several modifications to the component. After the beginUpdate method is called, the component does not raise events, and does not update the UI until the endUpdate method is called. Using these methods prevents excessive component updates when changing multiple component settings at once.

hide()

Hides the widget.

Return Value: Object
A Promise of the jQuery.Deferred object resolved when the widget is hidden.

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show toast', clickAction: showToast }"></div>
<div id="toastContainer" data-bind="dxToast: {
    message: 'Click to hide toast',
    displayTime: 10000,
    clickAction: hideToast
}"></div>
showToast = function () {
    $("#toastContainer").dxToast("instance").show();
};
hideToast = function () {
    $("#toastContainer").dxToast("instance").hide();
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

instance()

Returns an instance of this component class.

Return Value: Object
An instance of this component class

Use this method to access other methods of the component.

option()

Returns the configuration options of this component.

Return Value: Object
An object representing the configuration options of this component.

option(optionName)

Gets the value of the specified configuration option of this component.

Parameters:
optionName: String
The name of the option to get.
Return Value: any
The value of the specified option.

If you need to get the value of a configuration option field, specify the path to the required field.

option(optionName, optionValue)

Sets a value to the specified configuration option of this component.

Parameters:
optionName: String
The name of the required option.
optionValue: any
The value you wish to assign to the required option.

To set a value to the configuration option field, specify the path to the required field.

option(options)

Sets one or more options of this component.

Parameters:
options: Object
An object containing the required configuration options.

show()

Shows the widget.

Return Value: Object
A Deferred jQuery object.

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show toast', clickAction: showToast }"></div>
<div id="toastContainer" data-bind="dxToast: {
    message: 'Click to hide toast',
    displayTime: 10000,
    clickAction: hideToast
}"></div>
showToast = function () {
    $("#toastContainer").dxToast("instance").show();
};
hideToast = function () {
    $("#toastContainer").dxToast("instance").hide();
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

toggle(showing)

Toggles the visibility of the widget.

Parameters:
showing: Boolean
A Boolean value specifying whether to show or hide the widget.
Return Value: Object
A Deferred jQuery object.

You can use the toggle(showing) method instead of the show() and hide() methods. The only difference is that you specify whether to show or hide the widget passing true or false to the method parameter.

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show toast', clickAction: toggleVisibility }"></div>
<div id="toastContainer" data-bind="dxToast: {
    message: 'Click to hide toast',
    displayTime: 10000,
    clickAction: toggleVisibility
}"></div>
toggleVisibility = function (clickOptions) {
    var visible = clickOptions.component.option("text") === "Show toast";
    $("#toastContainer").dxToast("instance").toggle(visible);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}