Grouped Items - ASP.NET Core Tag Box Demo (2024)

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

Carmine

Soft Blue

Green Mist

Generic Dark

Contrast

Dark Violet

Dark Moon

Generic Light Compact

Generic Dark Compact

Contrast Dark Compact

Fluent Light

Fluent SaaS Light

Fluent Dark

Fluent SaaS Dark

Fluent Light Compact

Fluent SaaS Light 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;}