Select Box - Grouped Items

Data items in the SelectBox's drop-down list can be organized in groups.

If the data source contains ungrouped data items, use the DataSource's group property to specify the data field to group by. This case is illustrated in this demo's first and third SelectBoxes.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@using DevExtreme.MVC.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() .InputAttr("aria-label", "Data") .DataSource(SampleData.Electronics) .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() .InputAttr("aria-label", "Templated Ungrouped Data") .DataSource(SampleData.Electronics) .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>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; using System.Linq; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SelectBoxController : Controller { public ActionResult GroupedItems() { return View(); } } }

using System; using System.Collections.Generic; namespace DevExtreme.MVC.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 = "../../Content/images/products/1-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 2, Name = "SuperHD Player", Price = 400, CurrentInventory = 150, Backorder = 0, Manufacturing = 25, Category = "Video Players", ImageSrc = "../../Content/images/products/2-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/images/products/3-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../Content/images/products/4-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/images/products/5-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 6, Name = "SuperLED 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../Content/images/products/6-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../Content/images/products/7-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../Content/images/products/8-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../Content/images/products/9-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = 0, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../Content/images/products/10-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 11, Name = "DesktopLED 19", Price = 165, CurrentInventory = 425, Backorder = 0, Manufacturing = 110, Category = "Monitors", ImageSrc = "../../Content/images/products/11-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../Content/images/products/12-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../Content/images/products/13-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsItem { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = 0, Backorder = 55, Manufacturing = 10, Category = "Monitors", ImageSrc = "../../Content/images/products/14-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../Content/images/products/15-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 16, Name = "Projector PlusHT", Price = 1050, CurrentInventory = 0, Backorder = 75, Manufacturing = 57, Category = "Projectors", ImageSrc = "../../Content/images/products/16-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../Content/images/products/17-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../Content/images/products/18-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsItem { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../Content/images/products/19-small.png", IconSrc = "../../Content/images/icons/video-player.svg" } }; } }

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class ElectronicsCategory { public string Name { get; set; } public IEnumerable<ElectronicsGroupedItem> Products { get; set; } } }

using System; using System.Collections.Generic; namespace DevExtreme.MVC.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 = "../../Content/images/products/1-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsGroupedItem { ID = 2, Name = "SuperHD Player", Price = 400, CurrentInventory = 150, Backorder = 0, Manufacturing = 25, ImageSrc = "../../Content/images/products/2-small.png", IconSrc = "../../Content/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 = "../../Content/images/products/3-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, ImageSrc = "../../Content/images/products/4-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, ImageSrc = "../../Content/images/products/5-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 6, Name = "SuperLED 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, ImageSrc = "../../Content/images/products/6-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, ImageSrc = "../../Content/images/products/7-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, ImageSrc = "../../Content/images/products/8-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, ImageSrc = "../../Content/images/products/9-small.png", IconSrc = "../../Content/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 = "../../Content/images/products/10-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 11, Name = "DesktopLED 19", Price = 165, CurrentInventory = 425, Backorder = 0, Manufacturing = 110, ImageSrc = "../../Content/images/products/11-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, ImageSrc = "../../Content/images/products/12-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, ImageSrc = "../../Content/images/products/13-small.png", IconSrc = "../../Content/images/icons/tv.svg" }, new ElectronicsGroupedItem { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = 0, Backorder = 55, Manufacturing = 10, ImageSrc = "../../Content/images/products/14-small.png", IconSrc = "../../Content/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 = "../../Content/images/products/15-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsGroupedItem { ID = 16, Name = "Projector PlusHT", Price = 1050, CurrentInventory = 0, Backorder = 75, Manufacturing = 57, ImageSrc = "../../Content/images/products/16-small.png", IconSrc = "../../Content/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 = "../../Content/images/products/17-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsGroupedItem { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, ImageSrc = "../../Content/images/products/18-small.png", IconSrc = "../../Content/images/icons/video-player.svg" }, new ElectronicsGroupedItem { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, ImageSrc = "../../Content/images/products/19-small.png", IconSrc = "../../Content/images/icons/video-player.svg" } } } }; } }

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.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; } } }

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.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 { 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:

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.

NOTE

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.