JavaScript/jQuery Toast Options

See Also

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

The following code shows default values of the object depending on the device type:

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

{
    show: {
        type: 'slide',
        duration: 200,
        from: {
            position: {
                my: 'top',
                at: 'bottom',
                of: window
            }
        }
    },
    hide: {
        type: 'slide',
        duration: 200,
        to: {
            position: {
                my: 'top',
                at: 'bottom',
                of: window
            }
        }
    }
}

Set the animation object to null or undefined to disable animations.

See Also

• Customize Toast Content
• Custom Templates

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "auto", "inherit".

• Function (deprecated since v21.2)
  Refer to the W0017 warning description for information on how you can migrate to viewport units.

The Toast calculates its height relative to one of the elements in the following priority: position.of => window.

The function passed to this property enables you to specify a custom condition for UI component hiding. For instance, you can prevent hiding until a user clicks a certain element.

$(function () {
    $("#toastContainer").dxToast({
        // ...
        hideOnOutsideClick: function(e) {
            return e.target === $("#someElement").get()[0];
        }
    });
});

import { DxToastModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    hideOnOutsideClick(e) {
        return e.target === document.getElementById("someElement");
    }
}
@NgModule({
     imports: [
         // ...
         DxToastModule
     ],
     // ...
 })

<dx-toast ...
    [hideOnOutsideClick]="hideOnOutsideClick">
</dx-toast>

<template>
    <DxToast ....
        :hide-on-outside-click="hideOnOutsideClick">
    </DxToast>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxToast from 'devextreme-vue/toast';

export default {
    components: {
        DxToast
    },
    methods: {
        hideOnOutsideClick (e) {
            return e.target === document.getElementById("someElement");
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Toast from 'devextreme-react/toast';

const hideOnOutsideClick = (e) => {
    return e.target === document.getElementById("someElement");
};

export default function App() {
    return (
        <Toast ...
            hideOnOutsideClick={hideOnOutsideClick}>
        </Toast>
    );
}

The hideOnOutsideClick function is called when a user clicks the UI component or outside it.

Popup Demo

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "inherit".

• Function (deprecated since v21.2)
  Refer to the W0017 warning description for information on how you can migrate to viewport units.

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "auto", "inherit".

• Function (deprecated since v21.2)
  Refer to the W0017 warning description for information on how you can migrate to viewport units.

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "inherit".

• Function (deprecated since v21.2)
  Refer to the W0017 warning description for information on how you can migrate to viewport units.

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "auto", "inherit".

• Function (deprecated since v21.2)
  Refer to the W0017 warning description for information on how you can migrate to viewport units.

<dx-toast ...
    (onInitialized)="saveInstance($event)">
</dx-toast>

import { Component } from "@angular/core";
import Toast from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    toastInstance: Toast;
    saveInstance (e) {
        this.toastInstance = e.component;
    }
}

<template>
    <div>
        <DxToast ...
            @initialized="saveInstance">
        </DxToast>
    </div>
</template>

<script>
import DxToast from 'devextreme-vue/toast';

export default {
    components: {
        DxToast
    },
    data: function() {
        return {
            toastInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.toastInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxToast ...
            @initialized="saveInstance">
        </DxToast>
    </div>
</template>

<script setup>
import DxToast from 'devextreme-vue/toast';

let toastInstance = null;

const saveInstance = (e) => {
    toastInstance = e.component;
}
</script>

import Toast from 'devextreme-react/toast';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.toastInstance = e.component;
    }

    render() {
        return (
            <div>
                <Toast onInitialized={this.saveInstance} />
            </div>
        );
    }
}

See Also

The following example shows how to subscribe to component property changes:

$(function() {
    $("#toastContainer").dxToast({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<dx-toast ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-toast>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxToastModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxToastModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  

<template> 
    <DxToast ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxToast from 'devextreme-vue/toast'; 

export default { 
    components: { 
        DxToast
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Toast from 'devextreme-react/toast'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Toast ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

If you set the position.of to a specific element, the shading applies to this element. The Toast calculates its size relative to the element.

When this property is set to true, the UI component 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.

DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

Shading applies to the first specified element in the following sequence: container => position.of => window

If this property is set to true, the Toast is displayed in modal mode, and users cannot interact with other UI components.

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

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

If you assign "custom" to the type property, the dx-toast-custom class is applied to the UI component element. Use CSS styles to customize the appearance of the toast.

You can show and hide the UI component by changing the value of an observable variable passed to this property.

The UI component is automatically hidden after the time specified in the displayTime property.

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "auto", "inherit".

• Function (deprecated since v21.2)
  Refer to the W0017 warning description for information on how you can migrate to viewport units.

The Toast calculates its width relative to one of the elements in the following priority: position.of => window.

$(function(){
    $("#toastContainer").dxToast({
        // ...
        wrapperAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<dx-toast ...
    [wrapperAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-toast>

import { Component } from '@angular/core';
// ...
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxToastModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxToastModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxToast ...
        :wrapper-attr="toastAttributes">
    </DxToast>
</template>

<script>
import DxToast from 'devextreme-vue/toast';

export default {
    components: {
        DxToast
    },
    data() {
        return {
            toastAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React, { useMemo } from 'react';

import Toast from 'devextreme-react/toast';

function App() {
    const toastAttributes = useMemo(() => {
        return {
            id: 'elementId',
            class: 'class-name'
        }
    }, []);

    return (
        <Toast ...
            wrapperAttr={toastAttributes}>
        </Toast>
    );
}
export default App;

The code above specifies the id and class attributes for the wrapper element and produces markup similar to this:

<body>
    <!-- The following is the wrapper element. -->
    <!-- It is nested inside an element defined by the `container` property (`<body>` by default). -->
    <div id="elementId" class="dx-overlay-wrapper dx-toast-wrapper class-name" ... > 

        <!-- The following element displays text content and an icon. -->
        <div class="dx-toast-content" ... >
            <!-- ... -->
        </div>
    </div>
</body>

<div id="myToast" class="myClass"></div>

<dx-toast ... class="myClass">
</dx-toast>

<Toast ... className="myClass" />

@(Html.DevExtreme().Toast()...
    .OnInitialized("(e) => e.element.addClass('myClass')")
)

    @(Html.DevExtreme().Toast()...
    .OnInitialized("(e) => e.element.addClass('myClass')")
)