Backend API
x
DevExtreme.NETCore.Demos.Models.SampleData<script> var fromPregroupedData = new DevExpress.data.DataSource({ store: { type: 'array', data: (Html.Raw(System.Text.Json.JsonSerializer.Serialize(SampleData.ElectronicsGrouped))), key: 'ID', }, map(item) { item.key = item.Name; item.items = item.Products; return item; }, }); fromPregroupedData.load();</script><div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Data grouped in the DataSource</div> <div class="dx-field-value"> (Html.DevExtreme().SelectBox() .DataSource(SampleData.Electronics) .InputAttr("aria-label", "Data") .DataSourceOptions(o => o.Group("Category")) .ValueExpr("ID") .Grouped(true) .DisplayExpr("Name") .Value(1) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Pre-grouped data</div> <div class="dx-field-value"> (Html.DevExtreme().SelectBox() .DataSource(new JS("fromPregroupedData")) .InputAttr("aria-label", "Pregrouped Data") .ValueExpr("ID") .Grouped(true) .DisplayExpr("Name") .Value(1) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom group template</div> <div class="dx-field-value"> (Html.DevExtreme().SelectBox() .DataSource(SampleData.Electronics) .InputAttr("aria-label", "Templated Ungrouped Data") .DataSourceOptions(o => o.Group("Category")) .ValueExpr("ID") .Grouped(true) .DisplayExpr("Name") .GroupTemplate(<text> <div class="custom-icon"><span class="dx-icon-box icon"></span><%- key %></div> </text>) .Value(1) ) </div> </div></div>xxxxxxxxxxusing DevExtreme.AspNet.Data;using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models;using DevExtreme.NETCore.Demos.Models.SampleData;using DevExtreme.NETCore.Demos.ViewModels;using Microsoft.AspNetCore.Mvc;using System.Linq;namespace DevExtreme.NETCore.Demos.Controllers { public class SelectBoxController : Controller { public ActionResult Grouping() { return View(); } }}xxxxxxxxxxusing 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" } }; }}xxxxxxxxxxusing System;using System.Collections.Generic;using System.Linq;using System.Web;namespace DevExtreme.NETCore.Demos.Models { public class ElectronicsCategory { public string Name { get; set; } public IEnumerable<ElectronicsGroupedItem> Products { get; set; } }}xxxxxxxxxxusing System;using System.Collections.Generic;using System.Linq;using System.Web;namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<ElectronicsCategory> ElectronicsGrouped = new[] { new ElectronicsCategory { Name = "Video Players", Products = new[] { new ElectronicsGroupedItem { ID = 1, Name = "HD Video Player", Price = 330, CurrentInventory = 225, Backorder = 0, Manufacturing = 10, ImageSrc = "../../images/products/1-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsGroupedItem { ID = 2, Name = "SuperHD Player", Price = 400, CurrentInventory = 150, Backorder = 0, Manufacturing = 25, ImageSrc = "../../images/products/2-small.png", IconSrc = "../../images/icons/video-player.svg" } } }, new ElectronicsCategory { Name = "Televisions", Products = new[] { new ElectronicsGroupedItem { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, ImageSrc = "../../images/products/3-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, ImageSrc = "../../images/products/4-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, ImageSrc = "../../images/products/5-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 6, Name = "SuperLED 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, ImageSrc = "../../images/products/6-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, ImageSrc = "../../images/products/7-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, ImageSrc = "../../images/products/8-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, ImageSrc = "../../images/products/9-small.png", IconSrc = "../../images/icons/tv.svg" } } }, new ElectronicsCategory { Name = "Monitors", Products = new[] { new ElectronicsGroupedItem { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = 0, Backorder = 425, Manufacturing = 75, ImageSrc = "../../images/products/10-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 11, Name = "DesktopLED 19", Price = 165, CurrentInventory = 425, Backorder = 0, Manufacturing = 110, ImageSrc = "../../images/products/11-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, ImageSrc = "../../images/products/12-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, ImageSrc = "../../images/products/13-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = 0, Backorder = 55, Manufacturing = 10, ImageSrc = "../../images/products/14-small.png", IconSrc = "../../images/icons/video-player.svg" } } }, new ElectronicsCategory { Name = "Projectors", Products = new[] { new ElectronicsGroupedItem { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, ImageSrc = "../../images/products/15-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsGroupedItem { ID = 16, Name = "Projector PlusHT", Price = 1050, CurrentInventory = 0, Backorder = 75, Manufacturing = 57, ImageSrc = "../../images/products/16-small.png", IconSrc = "../../images/icons/video-player.svg" } } }, new ElectronicsCategory { Name = "Automation", Products = new[] { new ElectronicsGroupedItem { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, ImageSrc = "../../images/products/17-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsGroupedItem { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, ImageSrc = "../../images/products/18-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsGroupedItem { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, ImageSrc = "../../images/products/19-small.png", IconSrc = "../../images/icons/video-player.svg" } } } }; }}xxxxxxxxxxusing System;using System.Collections.Generic;using System.Linq;using System.Web;namespace DevExtreme.NETCore.Demos.Models { public class ElectronicsGroupedItem { public int ID { 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; } }}xxxxxxxxxxusing 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; } }}xxxxxxxxxx.custom-icon .icon { color: #f05b41;}.custom-icon { display: flex; align-items: center; gap: 4px;}The SelectBox can also work with initially grouped data items. In this case, the data array should contain objects with the key and items fields:
xxxxxxxxxx let dataSource = [{ key: "Group 1", // Group caption items: [ // Items in Group 1 { /* ... */ }, { /* ... */ } ]}, { key: "Group 2", items: [ { /* ... */ }, { /* ... */ } ]}];If data objects are grouped but use other field names, implement the DataSource's map function to create key and items field mappings as in this demo's second SelectBox.
Only one-level grouping is supported.
Regardless of the data source structure, enable the grouped property.
If the data source contains objects, specify the following SelectBox properties:
-
valueExpr
A data field that contains unique values used to identify items. -
displayExpr
A data field whose values should be displayed in the drop-down list.
If you need to specify a custom template for group captions, use the groupTemplate property. In this demo, each caption contains an icon and a text string.