Your search did not match any results.
Toast

Toast

Documentation
The Toast is a widget that provides pop-up notifications. It can be displayed in one of the following modes: "info", "warning", "error", "success" and "custom". In this demo, the "success" and "error" modes are used depending on the context.
@model IEnumerable<DevExtreme.MVC.Demos.Models.ListProduct> <div id="toast"> <h1>Product List</h1> <ul class="products"> @foreach(var product in Model) { <li> <img src="@product.ImageSrc" /> <div id="name">@product.Name</div> @(Html.DevExtreme().CheckBox() .Text("Available") .OnValueChanged(@<text> function checkAvailable(data) { var type = data.value ? "success" : "error", text = "@product.Name" + (data.value ? " is available" : " is not available"); DevExpress.ui.notify(text, type, 600); } </text>) ) </li> } </ul> </div>
using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.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.MVC.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.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<ListProduct> ListProducts = new List<ListProduct> { new ListProduct() { ID = 1, Name = "HD Video Player", Price = 330, CurrentInventory = 225, Backorder = 0, Manufacturing = 10, Category = "Video Players", ImageSrc = "../../Content/Images/ProductsLarge/1.png" }, new ListProduct() { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/3.png" }, new ListProduct() { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/4.png" }, new ListProduct() { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/5.png" }, new ListProduct() { ID = 6, Name = "SuperLCD 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/6.png" }, new ListProduct() { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/7.png" }, new ListProduct() { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/8.png" }, new ListProduct() { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../Content/Images/ProductsLarge/9.png" }, new ListProduct() { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = null, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../Content/Images/ProductsLarge/10.png" }, new ListProduct() { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../Content/Images/ProductsLarge/12.png" }, new ListProduct() { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../Content/Images/ProductsLarge/13.png" }, new ListProduct() { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = null, Backorder = 55, Manufacturing = 10, Category = "Projectors", ImageSrc = "../../Content/Images/ProductsLarge/14.png" }, new ListProduct() { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../Content/Images/ProductsLarge/15.png" }, new ListProduct() { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../Content/Images/ProductsLarge/17.png" }, new ListProduct() { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../Content/Images/ProductsLarge/18.png" }, new ListProduct() { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../Content/Images/ProductsLarge/19.png" } }; } }
#toast { padding: 10px; } #toast ul { text-align: center; list-style-type: none; margin: 20px 0; font-size: 0; } #toast ul li { display: inline-block; width: 160px; margin: 10px; font-size: 14px; } #toast ul li img { width: 100px; } .dx-toast-content { min-width: 300px; max-width: 400px; } .dx-theme-ios7 #toast ul li { font-size: 16px; } .dx-theme-win10 #toast ul li { font-size: 15px; }