Configuration

An object defining configuration options for the Toast widget.

accessKey

Specifies the shortcut key that sets focus on the widget.

Type: String
Default Value: null

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

animation

Configures widget visibility animations. This object contains two fields: show and hide.

Type: Object
Default Value: { show: { type: 'fade', duration: 400, from: 0, to: 1 }, hide: { type: 'fade', duration: 400, to: 0 } }
Default for android below version 4:

{ show: { type: 'fade', duration: 400 }, hide: { type: 'fade', duration: 400, to: { opacity: 0 }, from: { opacity: 1 } } }

Default for android:

{show: {type: 'slide', duration: 200, from: { top: $(window).height() }}, hide: { type: 'slide', duration: 200, to: { top: $(window).height() }}}

Show Example:
AngularJS
Knockout
jQuery

closeOnBackButton

A Boolean value specifying whether or not the widget is closed if a user presses the Back hardware button.

Type: Boolean
Default Value: false

closeOnClick

A Boolean value specifying whether or not the toast is closed if a user clicks it.

Type: Boolean
Default Value: false

closeOnOutsideClick

A Boolean value specifying whether or not the widget is closed if a user clicks outside of the overlapping window.

Type: Boolean| function
Function parameters:
Holds the jQuery event that caused widget closing.
Return Value: Boolean
The required option value.
Default Value: false
Default for android:

true

The function passed to this option enables you to specify a custom condition for widget closing. For instance, you can prevent closing until a user clicks a certain element.

JavaScript
var widgetOptions = {
    // ...
    closeOnOutsideClick: function(e) {
        return e.target === $("#someElement").get()[0];
    }
}

closeOnSwipe

A Boolean value specifying whether or not the toast is closed if a user swipes it out of the screen boundaries.

Type: Boolean
Default Value: true

contentTemplate

A template to be used for rendering widget content.

Type: template
Function parameters:
contentElement: jQuery
The jQuery object of the widget content element.
Return Value: String|jQuery
A template name or a template container.
Default Value: 'content'

This option enables you to render widget contents depending on field values of the bound data model.

HTML
<div data-options="dxTemplate: { name:'myContent' }">
    <h1 data-bind="text: title"></h1>
    <p>Full name: <span data-bind="text: fullName"></span></p>
</div>
NOTE
A binding context of a content template is the bound view model. So, you can bind template elements to the view model's fields directly (see the code above). To access another binding context within a content template, use the Knockout/AngularJS binding variables.

deferRendering

Specifies whether widget content is rendered when the widget is shown or when rendering the widget.

Type: Boolean
Default Value: true

If this option is set to true, widget content is rendered when showing the widget. Otherwise, widget content is rendered when rendering the widget.

displayTime

The time span in milliseconds during which the Toast widget is visible.

Type: Number
Default Value: 2000

Show Example:
AngularJS
Knockout
jQuery

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type: Object
Default Value: {}

You can configure this option in an ASP.NET MVC Control as follows:

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)
@(Html.DevExtreme().WidgetName() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

focusStateEnabled

Specifies whether the widget can be focused using keyboard navigation.

Type: Boolean
Default Value: false

height

The height of the widget in pixels.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: 'auto'

The option can hold a value of the following types.

  • number
    The height of the widget in pixels

  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

  • function
    A function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type: String
Default Value: undefined

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

Type: Boolean
Default Value: false

maxHeight

Specifies the maximum height the widget can reach while resizing.

Type: Number|String| function
Return Value: Number|String
The maximum height value.
Default Value: null

The option can hold a value of the following types.

  • numeric - the height in pixels
  • string - a CSS measurement of the height (e.g., "55px", "80%", "auto" and "inherit")
  • function - the function returning the height (e.g., width:function(){ return baseWidth - 10 + "%"; })

maxWidth

Specifies the maximum width the widget can reach while resizing.

Type: Number|String| function
Return Value: Number|String
The maximum width value.
Default Value: null

The option can hold a value of the following types.

  • numeric - the width in pixels
  • string - a CSS measurement of the width (e.g., "55px", "80%", "auto" and "inherit")
  • function - the function returning the width (e.g., width:function(){ return baseWidth - 10 + "%"; })

message

The Toast message text.

Type: String
Default Value: ''

minHeight

Specifies the minimum height the widget can reach while resizing.

Type: Number|String| function
Return Value: Number|String
The minimum height value.
Default Value: null

The option can hold a value of the following types.

  • numeric - the height in pixels
  • string - a CSS measurement of the height (e.g., "55px", "80%", "auto" and "inherit")
  • function - the function returning the height (e.g., width:function(){ return baseWidth - 10 + "%"; })

minWidth

Specifies the minimum width the widget can reach while resizing.

Type: Number|String| function
Return Value: Number|String
The minimum width value.
Default Value: null

The option can hold a value of the following types.

  • numeric - the width in pixels
  • string - a CSS measurement of the width (e.g., "55px", "80%", "auto" and "inherit")
  • function - the function returning the width (e.g., width:function(){ return baseWidth - 10 + "%"; })

onContentReady

A handler for the contentReady event. Executed when the widget's content is ready. This handler may be executed multiple times during the widget's lifetime depending on the number of times its content changes.

Type: function
Function parameters:
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.
Default Value: null

onDisposing

A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

Type: function
Function parameters:
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
model: Object
The model data. Available only if you use Knockout.
Default Value: null

onHidden

A handler for the hidden event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action after the widget is hidden.

Show Example:
AngularJS
Knockout
jQuery

onHiding

A handler for the hiding event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action before hiding the widget.

Show Example:
AngularJS
Knockout
jQuery

onInitialized

A handler for the initialized event. Executed only once, after the widget is initialized.

Type: function
Function parameters:
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
Default Value: null

You cannot access elements in the widget because this handler is executed before they are ready. Use the onContentReady handler instead.

onOptionChanged

A handler for the optionChanged event. Executed after an option of the widget is changed.

Type: function
Function parameters:
Information about the event.
Object structure:
component: Object
The widget instance.
name: String
A short name of the option whose value has been changed.
fullName: String
A full name of the option whose value has been changed; contains a full hierarchy of the option.
value: any
A new value for the option.
element: jQuery
The widget's container.
model: Object
The model data. Available only if you use Knockout.
Default Value: null

onShowing

A handler for the showing event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action before showing the widget.

Show Example:
AngularJS
Knockout
jQuery

onShown

A handler for the shown event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action after the widget is shown.

Show Example:
AngularJS
Knockout
jQuery

position

An object defining widget positioning options.

Default Value: { my: 'center', at: 'center', of: window }
Default for windows 8:

'top center'

Default for windows 10:

'bottom right'

Default for android:

{ at: 'bottom left', my: 'bottom left', offset: '20 -20' }

Default for android phone:

{ at: 'bottom center', my: 'bottom center', offset: '0 0' }

Default for windows phone 10:

{ at: 'bottom center', my: 'bottom center', offset: '0 0' }

Show Example:
AngularJS
Knockout
jQuery

rtlEnabled

Switches the widget to a right-to-left representation.

Type: Boolean
Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});

shading

A Boolean value specifying whether or not the main screen is inactive while the widget is active.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery

shadingColor

Specifies the shading color.

Type: String
Default Value: ''

This option makes sense only if the shading option is set to true.

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type: Number
Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

type

Specifies the Toast widget type.

Type: String
Default Value: 'info'
Accepted Values: 'info' | 'warning' | 'error' | 'success' | 'custom'

The available toast types (except for "custom") only differ by the icon and background color.

If you assign "custom" to the type option, the dx-toast-custom class is applied to the widget element. Implement the appropriate CSS class to specify toast appearance.

When using the widget as an ASP.NET MVC Control, specify this option using the ToastType enum. This enum accepts the following values: Info, Warning, Error, Success and Custom.

Show Example:
AngularJS
Knockout
jQuery

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: false

You can show and hide the widget by changing the value of an observable variable passed to this option.

Show Example:
AngularJS
Knockout
jQuery

width

The widget width in pixels.

Type: Number|String|function
Return Value: Number|String
The widget width.
Default Value: function() {return $(window).width() * 0.8 }
Default for windows 8:

function() { return $(window).width(); }

Default for windows 10:

'auto'

Default for android:

'auto'

Default for android phone:

function() { return $(window).width(); }

Default for windows phone 10:

function() { return $(window).width(); }

The option can hold a value of the following types.

  • numeric - the widget width in pixels
  • string - a CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit")
  • function - the function returning the widget width (e.g., width:function(){ return baseWidth - 10 + "%"; })