Toast Events

This section describes events fired by this widget.

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. Available only in the Knockout approach.

Instead, you can use the onContentReady option to handle the event.

See Also

disposing

Fires when the widget is being removed.

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. Available only in the Knockout approach.

Instead, you can use the onDisposing option to handle the event.

See Also

NOTE: This event fires only if the widget is removed using the remove(), empty(), or html() jQuery methods.

hidden

Fires after the overlay is hidden.

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. Available only in the Knockout approach.

Instead, you can use the onHidden option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to Hidden and Shown events', onClick: clickHandler }"></div></br>
    <div class="button" dx-button="{
        text: 'Show toast',
        onClick: showToast
    }"></div>
    <div dx-toast="{
        message:'Toast message',
        type:'success',
        displayTime: 2000,
        onInitialized: initializedHandler,
        bindingOptions: {
            visible: 'toastVisible'
        }
    }"></div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.toastVisible = false;
    $scope.showToast = function () {
        $scope.toastVisible = true;
    };
    $scope.toastInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.toastInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.toastInstance
                .on("hidden", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been hidden", "Action executed");
                }
                )
                .on("shown", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hidden and shown events");
            flag = true;
        } else {
            $scope.toastInstance
                .off("hidden")
                .off("shown");
            e.component.option("text", "Subscribe to hidden and shown events");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
<div data-bind="dxButton: { text: 'Subscribe to Hidden and Shown events', onClick: clickHandler }"></div></br>
<div class="button" data-bind="dxButton: {
    text: 'Show toast',
    onClick: showToast
}"></div>
<div data-bind="dxToast:{
    message:'Toast message',
    type:'success',
    displayTime: 2000,
    onInitialized: initializedHandler,
    visible: toastVisible
}"></div>
var flag = false;
var myViewModel = {
    toastVisible: ko.observable(false),
    showToast: function () {
        this.toastVisible(true);
    },
    toastInstance: {},
    initializedHandler: function (e) {
        myViewModel.toastInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.toastInstance
                .on("hidden", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been hidden", "Action executed");
                }
                )
                .on("shown", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hidden and shown events");
            flag = true;
        } else {
            myViewModel.toastInstance
				.off("hidden")
				.off("shown");
            e.component.option("text", "Subscribe to hidden and shown events");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
<div id="button"></div></br>
<div id="showToastButton"></div>
<div id="myToast"></div>
var flag = false;
$("#myToast").dxToast({
    message: 'Toast message'
});
$("#showToastButton").dxButton({
    text: 'Show toast',
    onClick: function () {
        $("#myToast").dxToast("instance").show();
    }
});
$("#button").dxButton({
    text: 'Subscribe to hidden and shown event',
    onClick: function (e) {
        if (flag === false) {
            $("#myToast").dxToast("instance")
                .on("hidden", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been hidden", "Action executed");
                }
                )
                .on("shown", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hidden and shown events");
            flag = true;
        } else {
            $("#myToast").dxToast("instance")
                .off("hidden")
                .off("shown")
            e.component.option("text", "Subscribe to hidden and shown events");
            flag = false;
        }
    }
});
body{
    text-align: center;
}

hiding

Fires before hiding the overlay.

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. Available only in the Knockout approach.
cancel: Boolean
Indicates whether to cancel hiding the overlay.

Instead, you can use the onHiding option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to Hiding and Showing events', onClick: clickHandler }"></div></br>
    <div class="button" dx-button="{
        text: 'Show toast',
        onClick: showToast
    }"></div>
    <div dx-toast="{
        message:'Toast message',
        type:'success',
        displayTime: 2000,
        onInitialized: initializedHandler,
        bindingOptions: {
            visible: 'toastVisible'
        }
    }"></div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.toastVisible = false;
    $scope.showToast = function () {
        $scope.toastVisible = true;
    };
    $scope.toastInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.toastInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.toastInstance
                .on("hiding", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being hidden", "Action executed");
                }
                )
                .on("showing", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hiding and showing events");
            flag = true;
        } else {
            $scope.toastInstance
                .off("hiding")
                .off("showing");
            e.component.option("text", "Subscribe to hiding and showing events");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
<div data-bind="dxButton: { text: 'Subscribe to Hiding and Showing events', onClick: clickHandler }"></div></br>
<div class="button" data-bind="dxButton: {
    text: 'Show toast',
    onClick: showToast
}"></div>
<div data-bind="dxToast:{
    message:'Toast message',
    type:'success',
    displayTime: 2000,
    onInitialized: initializedHandler,
    visible: toastVisible
}"></div>
var flag = false;
var myViewModel = {
    toastVisible: ko.observable(false),
    showToast: function () {
        this.toastVisible(true);
    },
    toastInstance: {},
    initializedHandler: function (e) {
        myViewModel.toastInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.toastInstance
                .on("hiding", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being hidden", "Action executed");
                }
                )
                .on("showing", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hiding and showing events");
            flag = true;
        } else {
            myViewModel.toastInstance
                .off("hiding")
                .off("showing");
            e.component.option("text", "Subscribe to hiding and showing events");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
<div id="button"></div></br>
<div id="showToastButton"></div>
<div id="myToast"></div>
var flag = false;
$("#myToast").dxToast({
    message: 'Toast message'
});
$("#showToastButton").dxButton({
    text: 'Show toast',
    onClick: function () {
        $("#myToast").dxToast("instance").show();
    }
});
$("#button").dxButton({
    text: 'Subscribe to hiding and showing event',
    onClick: function (e) {
        if (flag === false) {
            $("#myToast").dxToast("instance")
                .on("hiding", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being hidden", "Action executed");
                }
                )
                .on("showing", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hiding and showing events");
            flag = true;
        } else {
            $("#myToast").dxToast("instance")
                .off("hiding")
                .off("showing")
            e.component.option("text", "Subscribe to hiding and showing events");
            flag = false;
        }
    }
});
body{
    text-align: center;
}

initialized

Fires when the widget is initialized.

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.

Instead, you can use the onInitialized option to handle the event.

See Also

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.
name: String
Specifies the name of the option whose value is changed.
fullName: String
Specifies a full name of the option whose value is changed. The full name is formed by concatenating the names of the options that are presented in the hierarchy of the given option. The names are delimited by commas.
value: any
Specifies a new value for the option.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

Instead, you can use the onOptionChanged option to handle the event.

See Also

showing

Fires before showing the overlay.

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. Available only in the Knockout approach.

Instead, you can use the onShowing option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to Hiding and Showing events', onClick: clickHandler }"></div></br>
    <div class="button" dx-button="{
        text: 'Show toast',
        onClick: showToast
    }"></div>
    <div dx-toast="{
        message:'Toast message',
        type:'success',
        displayTime: 2000,
        onInitialized: initializedHandler,
        bindingOptions: {
            visible: 'toastVisible'
        }
    }"></div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.toastVisible = false;
    $scope.showToast = function () {
        $scope.toastVisible = true;
    };
    $scope.toastInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.toastInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.toastInstance
                .on("hiding", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being hidden", "Action executed");
                }
                )
                .on("showing", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hiding and showing events");
            flag = true;
        } else {
            $scope.toastInstance
                .off("hiding")
                .off("showing");
            e.component.option("text", "Subscribe to hiding and showing events");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
<div data-bind="dxButton: { text: 'Subscribe to Hiding and Showing events', onClick: clickHandler }"></div></br>
<div class="button" data-bind="dxButton: {
    text: 'Show toast',
    onClick: showToast
}"></div>
<div data-bind="dxToast:{
    message:'Toast message',
    type:'success',
    displayTime: 2000,
    onInitialized: initializedHandler,
    visible: toastVisible
}"></div>
var flag = false;
var myViewModel = {
    toastVisible: ko.observable(false),
    showToast: function () {
        this.toastVisible(true);
    },
    toastInstance: {},
    initializedHandler: function (e) {
        myViewModel.toastInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.toastInstance
                .on("hiding", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being hidden", "Action executed");
                }
                )
                .on("showing", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hiding and showing events");
            flag = true;
        } else {
            myViewModel.toastInstance
                .off("hiding")
                .off("showing");
            e.component.option("text", "Subscribe to hiding and showing events");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
<div id="button"></div></br>
<div id="showToastButton"></div>
<div id="myToast"></div>
var flag = false;
$("#myToast").dxToast({
    message: 'Toast message'
});
$("#showToastButton").dxButton({
    text: 'Show toast',
    onClick: function () {
        $("#myToast").dxToast("instance").show();
    }
});
$("#button").dxButton({
    text: 'Subscribe to hiding and showing event',
    onClick: function (e) {
        if (flag === false) {
            $("#myToast").dxToast("instance")
                .on("hiding", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being hidden", "Action executed");
                }
                )
                .on("showing", function (e) {
                    DevExpress.ui.dialog.alert("The widget is being shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hiding and showing events");
            flag = true;
        } else {
            $("#myToast").dxToast("instance")
                .off("hiding")
                .off("showing")
            e.component.option("text", "Subscribe to hiding and showing events");
            flag = false;
        }
    }
});
body{
    text-align: center;
}

shown

Fires after the overlay is shown.

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. Available only in the Knockout approach.

Instead, you can use the onShown option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to Hidden and Shown events', onClick: clickHandler }"></div></br>
    <div class="button" dx-button="{
        text: 'Show toast',
        onClick: showToast
    }"></div>
    <div dx-toast="{
        message:'Toast message',
        type:'success',
        displayTime: 2000,
        onInitialized: initializedHandler,
        bindingOptions: {
            visible: 'toastVisible'
        }
    }"></div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.toastVisible = false;
    $scope.showToast = function () {
        $scope.toastVisible = true;
    };
    $scope.toastInstance = {};
    $scope.initializedHandler = function (e) {
        $scope.toastInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.toastInstance
                .on("hidden", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been hidden", "Action executed");
                }
                )
                .on("shown", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hidden and shown events");
            flag = true;
        } else {
            $scope.toastInstance
                .off("hidden")
                .off("shown");
            e.component.option("text", "Subscribe to hidden and shown events");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
<div data-bind="dxButton: { text: 'Subscribe to Hidden and Shown events', onClick: clickHandler }"></div></br>
<div class="button" data-bind="dxButton: {
    text: 'Show toast',
    onClick: showToast
}"></div>
<div data-bind="dxToast:{
    message:'Toast message',
    type:'success',
    displayTime: 2000,
    onInitialized: initializedHandler,
    visible: toastVisible
}"></div>
var flag = false;
var myViewModel = {
    toastVisible: ko.observable(false),
    showToast: function () {
        this.toastVisible(true);
    },
    toastInstance: {},
    initializedHandler: function (e) {
        myViewModel.toastInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.toastInstance
                .on("hidden", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been hidden", "Action executed");
                }
                )
                .on("shown", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hidden and shown events");
            flag = true;
        } else {
            myViewModel.toastInstance
				.off("hidden")
				.off("shown");
            e.component.option("text", "Subscribe to hidden and shown events");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
<div id="button"></div></br>
<div id="showToastButton"></div>
<div id="myToast"></div>
var flag = false;
$("#myToast").dxToast({
    message: 'Toast message'
});
$("#showToastButton").dxButton({
    text: 'Show toast',
    onClick: function () {
        $("#myToast").dxToast("instance").show();
    }
});
$("#button").dxButton({
    text: 'Subscribe to hidden and shown event',
    onClick: function (e) {
        if (flag === false) {
            $("#myToast").dxToast("instance")
                .on("hidden", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been hidden", "Action executed");
                }
                )
                .on("shown", function (e) {
                    DevExpress.ui.dialog.alert("The widget has been shown", "Action executed");
                }
                );
            e.component.option("text", "Unsubscribe from hidden and shown events");
            flag = true;
        } else {
            $("#myToast").dxToast("instance")
                .off("hidden")
                .off("shown")
            e.component.option("text", "Subscribe to hidden and shown events");
            flag = false;
        }
    }
});
body{
    text-align: center;
}