@(Html.DevExtreme().Toolbar()
.Items(items => {
items.Add()
.Widget(w => w
.Button()
.Icon("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[] {
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")
.InputAttr("aria-label", "Categories")
.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().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.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ToolbarController : Controller {
public ActionResult Overview() {
return View();
}
[HttpGet]
public ActionResult GetProducts(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(DataSourceLoader.Load(SampleData.Products, loadOptions)), "application/json");
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.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 IEnumerable<Product> Items { get; set; }
public int Price { get; set; }
public string Image { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Product> Products = new[] {
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;
}