Your search did not match any results.
Toolbar

Overview

Documentation
The Toolbar is a widget containing items that usually manage screen content. Those items can be plain text or widgets.
@(Html.DevExtreme().Toolbar() .Items(items => { items.Add() .Widget(w => w .Button() .Type(ButtonType.Back) .Text("Back") .OnClick("backButton_click") ) .Location(ToolbarItemLocation.Before); items.Add() .Widget(w => w .Button() .Icon("refresh") .OnClick("refreshButton_click") ) .LocateInMenu(ToolbarItemLocateInMenuMode.Auto) .Location(ToolbarItemLocation.Before); items.Add() .Widget(w => w .SelectBox() .Width(140) .Value(1) .DataSource(new List<object> { new { id = 1, text = "All" }, new { id = 2, text = "Video Players" }, new { id = 3, text = "Televisions" }, new { id = 4, text = "Monitors" }, new { id = 5, text = "Projectors" } }) .ValueExpr("id") .DisplayExpr("text") .OnValueChanged("selectBox_value_changed") ) .LocateInMenu(ToolbarItemLocateInMenuMode.Auto) .Location(ToolbarItemLocation.After); items.Add() .Widget(w => w .Button() .Icon("plus") .OnClick("addButton_click") ) .LocateInMenu(ToolbarItemLocateInMenuMode.Auto) .Location(ToolbarItemLocation.After); items.Add() .Widget(w => w .Button() .Text("Save") .OnClick("saveButton_click") ) .LocateInMenu(ToolbarItemLocateInMenuMode.Always); items.Add() .Widget(w => w .Button() .Text("Print") .OnClick("printButton_click") ) .LocateInMenu(ToolbarItemLocateInMenuMode.Always); items.Add() .Widget(w => w .Button() .Text("Setting") .OnClick("settingsButton_click") ) .LocateInMenu(ToolbarItemLocateInMenuMode.Always); items.Add() .Template(@<text><div class="toolbar-label"><b>Tom's Club</b> Products</div></text>) .LocateInMenu(ToolbarItemLocateInMenuMode.Never) .Location(ToolbarItemLocation.Center); }) ) @(Html.DevExtreme().List() .ID("products") .DataSource(d => d.Mvc().Controller("Toolbar").LoadAction("GetProducts")) .DataSourceOptions(o => o.Map("mapProducts")) ) <script> function backButton_click() { DevExpress.ui.notify("Back button has been clicked!"); } function refreshButton_click() { DevExpress.ui.notify("Refresh button has been clicked!"); } function selectBox_value_changed(args) { var products = $("#products").dxList("instance").getDataSource(); if(args.value > 1) { products.filter("CategoryId", "=", args.value); } else { products.filter(null); } products.load(); } function addButton_click() { DevExpress.ui.notify("Add button has been clicked!"); } function saveButton_click() { DevExpress.ui.notify("Save option has been clicked!"); } function printButton_click() { DevExpress.ui.notify("Print option has been clicked!"); } function settingsButton_click() { DevExpress.ui.notify("Settings option has been clicked!"); } function mapProducts(item) { return { text: item.Text, CategoryId: item.CategoryId }; } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; namespace DevExtreme.NETCore.Demos.Controllers { public class ToolbarController : Controller { public ActionResult Overview() { return View(); } [HttpGet] public ActionResult GetProducts(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Products, loadOptions)), "application/json"); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class Product { public string ID { get; set; } public string CategoryId { get; set; } public string Text { get; set; } public bool Expanded { get; set; } public List<Product> Items { get; set; } public int Price { get; set; } public string Image { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<Product> Products = new List<Product> { new Product { Text = "HD Video Player", CategoryId = "2" }, new Product { Text = "SuperHD Video Player", CategoryId = "2" }, new Product { Text = "SuperLCD 42", CategoryId = "3" }, new Product { Text = "SuperLED 42", CategoryId = "3" }, new Product { Text = "SuperLED 50", CategoryId = "3" }, new Product { Text = "SuperLCD 55", CategoryId = "3" }, new Product { Text = "DesktopLCD 19", CategoryId = "4" }, new Product { Text = "DesktopLCD 21", CategoryId = "4" }, new Product { Text = "DesktopLED 21", CategoryId = "4" }, new Product { Text = "Projector Plus", CategoryId = "5" }, new Product { Text = "Projector PlusHD", CategoryId = "5" } }; } }
.toolbar-label, .toolbar-label > b { font-size: 16px; } #products { margin-top: 10px; }