Material Light
Material Blue Light
Material Lime Light
Material Orange Light
Material Purple Light
Material Teal Light
Material Dark
Material Blue Dark
Material Lime Dark
Material Orange Dark
Material Purple Dark
Material Teal Dark
Material Light Compact
Material Blue Light Compact
Material Lime Light Compact
Material Orange Light Compact
Material Purple Light Compact
Material Teal Light Compact
Material Dark Compact
Material Blue Dark Compact
Material Lime Dark Compact
Material Orange Dark Compact
Material Purple Dark Compact
Material Teal Dark Compact
Generic Light
Generic Light
Carmine
Soft Blue
Green Mist
Generic Dark
Generic Dark
Contrast
Dark Violet
Dark Moon
Generic Light Compact
Generic Light Compact
Generic Dark Compact
Generic Dark Compact
Contrast Dark Compact
Fluent Light
Fluent Light
Fluent SaaS Light
Fluent Dark
Fluent Dark
Fluent SaaS Dark
Fluent Light Compact
Fluent Light Compact
Fluent SaaS Light Compact
Fluent Dark Compact
Fluent Dark Compact
Fluent SaaS Dark Compact
Backend API
@model IEnumerable<DevExtreme.NETCore.Demos.Models.ElectronicsItem><div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Grouped items</div> <div class="dx-field-value"> @(Html.DevExtreme().TagBox() .DataSource(Model) .InputAttr("aria-label", "Category") .DataSourceOptions(o => o.Group("Category")) .ValueExpr("ID") .Value(new[] { 17, 19 }) .Grouped(true) .DisplayExpr("Name") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Grouped items with search enabled</div> <div class="dx-field-value"> @(Html.DevExtreme().TagBox() .DataSource(Model) .InputAttr("aria-label", "Category") .DataSourceOptions(o => o.Group("Category")) .ValueExpr("ID") .Value(new[] { 17, 19 }) .Grouped(true) .DisplayExpr("Name") .SearchEnabled(true) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Grouped items with a custom group template</div> <div class="dx-field-value"> @(Html.DevExtreme().TagBox() .DataSource(Model) .DataSourceOptions(o => o.Group("Category")) .ValueExpr("ID") .InputAttr("aria-label", "Category") .Value(new[] { 18 }) .Grouped(true) .DisplayExpr("Name") .GroupTemplate(@<text> <div class="custom-icon"><span class="dx-icon-box icon"></span><%- key %></div> </text>) ) </div> </div></div>
using DevExtreme.AspNet.Data;using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;using DevExtreme.NETCore.Demos.ViewModels;using Microsoft.AspNetCore.Mvc;using Newtonsoft.Json;using System.Linq;namespace DevExtreme.NETCore.Demos.Controllers { public class TagBoxController : Controller { public ActionResult GroupedItems() { return View(SampleData.Electronics); } }}
using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<ElectronicsItem> Electronics = new[] { new ElectronicsItem { ID = 1, Name = "HD Video Player", Price = 330, CurrentInventory = 225, Backorder = 0, Manufacturing = 10, Category = "Video Players", ImageSrc = "../../images/products/1-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 2, Name = "SuperHD Player", Price = 400, CurrentInventory = 150, Backorder = 0, Manufacturing = 25, Category = "Video Players", ImageSrc = "../../images/products/2-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/products/3-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../images/products/4-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/products/5-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 6, Name = "SuperLED 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/products/6-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../images/products/7-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/products/8-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/products/9-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = 0, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../images/products/10-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 11, Name = "DesktopLED 19", Price = 165, CurrentInventory = 425, Backorder = 0, Manufacturing = 110, Category = "Monitors", ImageSrc = "../../images/products/11-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../images/products/12-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../images/products/13-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = 0, Backorder = 55, Manufacturing = 10, Category = "Monitors", ImageSrc = "../../images/products/14-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../images/products/15-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 16, Name = "Projector PlusHT", Price = 1050, CurrentInventory = 0, Backorder = 75, Manufacturing = 57, Category = "Projectors", ImageSrc = "../../images/products/16-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../images/products/17-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../images/products/18-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../images/products/19-small.png", IconSrc = "../../images/icons/video-player.svg" } }; }}
using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Models { public class ElectronicsItem { public int ID { get; set; } public string Category { get; set; } public string Name { get; set; } public int CurrentInventory { get; set; } public int Backorder { get; set; } public int Manufacturing { get; set; } public int Price { get; set; } public string ImageSrc { get; set; } public string IconSrc { get; set; } }}
.custom-icon .icon { font-size: 17px; color: #f05b41; margin-right: 2px;}.dx-field { margin-bottom: 50px;}