Your search did not match any results.
Select Box

Grouped Items

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

If the data source provides data items ungrouped, use the DataSource's group option to specify the data field to group by. This case is illustrated in this demo.

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 + items field mappings.

NOTE

Subgroups are not supported.

@using DevExtreme.NETCore.Demos.Models.SampleData <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) .DataSourceOptions(o => o.Group("Category")) .ValueExpr("ID") .Grouped(true) .DisplayExpr("Name") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Pre-grouped data</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .DataSource(SampleData.ElectronicsGrouped) .DataSourceOptions(o => o.Map("dataSource_map")) .ValueExpr("ID") .Grouped(true) .DisplayExpr("Name") ) </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) .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>) ) </div> </div> </div> <script> function dataSource_map(dataItem) { dataItem.key = dataItem.Name; dataItem.items = dataItem.Products; return dataItem; } </script>
using 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 Newtonsoft.Json; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class SelectBoxController : Controller { public ActionResult GroupedItems() { return View(); } } }
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; using System.Web; namespace DevExtreme.NETCore.Demos.Models { public class ElectronicsCategory { public string Name { get; set; } public IEnumerable<ElectronicsGroupedItem> Products { get; set; } } }
using 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 ElectronicsGroupedItem[] { 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 ElectronicsGroupedItem[] { 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 ElectronicsGroupedItem[] { 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 ElectronicsGroupedItem[] { 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 ElectronicsGroupedItem[] { 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.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; } } }
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; }