Your search did not match any results.

Toast - Overview

The Toast is a UI component that displays pop-up notifications.

When you need to display a notification, call the notify(message, type, displayTime) method with values for the message, type, and displayTime properties passed as arguments.

Backend API
@model IEnumerable<DevExtreme.NETCore.Demos.Models.ListProduct> <div id="product-list"> <div class="header">Product List</div> <ul class="products"> @foreach(var product in Model) { <li> <img alt="@product.Name" src="@product.ImageSrc" /> <div class="name">@product.Name</div> @(Html.DevExtreme().CheckBox() .Text("Available") .OnValueChanged("checkAvailable") ) </li> } </ul> @(Html.DevExtreme().Toast() .ID("toast") .DisplayTime(600) ) </div> <script> function checkAvailable(data) { const type = data.value ? "success" : "error"; const productName = data.element.parent().find(".name").text(); const message = productName + (data.value ? " is available" : " is not available"); $("#toast").dxToast("instance").option({ type, message, visible: true }); } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ToastController : Controller { public ActionResult Overview() { return View(SampleData.ListProducts.Where(e => e.ID > 3 && e.ID < 8)); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class ListProduct { public int ID { get; set; } public string Name { get; set; } public double Price { get; set; } public int? CurrentInventory { get; set; } public int Backorder { get; set; } public int Manufacturing { get; set; } public string Category { get; set; } public string ImageSrc { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<ListProduct> ListProducts = new[] { new ListProduct { ID = 1, Name = "HD Video Player", Price = 330, CurrentInventory = 225, Backorder = 0, Manufacturing = 10, Category = "Video Players", ImageSrc = "../../images/ProductsLarge/1.png" }, new ListProduct { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/3.png" }, new ListProduct { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/4.png" }, new ListProduct { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/5.png" }, new ListProduct { ID = 6, Name = "SuperLCD 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/6.png" }, new ListProduct { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/7.png" }, new ListProduct { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/8.png" }, new ListProduct { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/9.png" }, new ListProduct { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = null, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../images/ProductsLarge/10.png" }, new ListProduct { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../images/ProductsLarge/12.png" }, new ListProduct { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../images/ProductsLarge/13.png" }, new ListProduct { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = null, Backorder = 55, Manufacturing = 10, Category = "Projectors", ImageSrc = "../../images/ProductsLarge/14.png" }, new ListProduct { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../images/ProductsLarge/15.png" }, new ListProduct { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../images/ProductsLarge/17.png" }, new ListProduct { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../images/ProductsLarge/18.png" }, new ListProduct { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../images/ProductsLarge/19.png" } }; } }
.header { font-size: 34px; text-align: center; } #product-list { padding: 10px; } #product-list ul { text-align: center; list-style-type: none; margin: 20px 0; font-size: 0; } #product-list ul li { display: inline-block; width: 160px; margin: 10px; font-size: 14px; } #product-list ul li img { width: 100px; } .dx-toast-content { min-width: 300px; max-width: 400px; }

You can specify one of the four predefined types of notifications, depending on the mood of the message:

  • 'info'
    A blue toast with a message bubble icon.

  • 'warning'
    A yellow toast with an exclamation mark icon.

  • 'error'
    A red toast with an X icon.

  • 'success'
    A green toast with a check mark icon.

In this demo, toggle check boxes to see the 'success' and 'error' notification types.

You can also customize the Toast appearance. Set the type property to 'custom' and use a contentTemplate. Refer to the following topic for more information: Customize the Content.

If you need to specify other Toast properties in addition to type and displayTime, call the notify(options, type, displayTime) method and pass an object as the argument. In this object, you can set any Toast property, such as shading, position, width, height, and others.