Your search did not match any results.
Drop Down Box

Single Selection

The DropDownBox widget is an editor that consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid widgets in the single selection mode.

The following instructions show how to synchronize the DropDownBox widget with any other embedded DevExtreme widget:

  1. Specify data sources
    The DropDownBox's and embedded widget's data sources can be the same or different. If they are different, the widget's key field should be present in the DropDownBox's data source.

  2. Specify which data field provides the DropDownBox's values and the embedded widget's keys
    Assign the field's name to the DropDownBox's valueExpr option and to the key option of the embedded widget's store.

  3. Synchronize the DropDownBox's value and the embedded widget's selection

    1. Select data items according to the DropDownBox's initial value. To do this, assign the value to the embedded widget's selectedRowKeys/selectedItemKeys option (see the example with the DataGrid below). If the widget does not have such options, implement the onContentReady handler (the example with the TreeView).
    2. Implement the DropDownBox's onValueChanged handler to update the selection when the value changes.
    3. Implement the embedded widget's onSelectionChanged handler to update the DropDownBox's value when the selection changes.
<div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">DropDownBox with embedded TreeView</div> <div class="dx-field-value"> @(Html.DevExtreme().DropDownBox() .Value("1_1") .ValueExpr("ID") .DropDownOptions(o => o.Height(350)) .DisplayExpr("Text") .DataSource(d => d.WebApi() .Controller("TreeViewPlainData") .LoadMode(DataSourceLoadMode.Raw) .Key("ID") ) .Placeholder("Select a value...") .ShowClearButton(true) .OnValueChanged("treeBox_valueChanged") .ContentTemplate(new TemplateName("EmbeddedTreeViewSingle")) ) <div id="treeBox"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">DropDownBox with embedded DataGrid</div> <div class="dx-field-value"> @(Html.DevExtreme().DropDownBox() .Value(3) .ValueExpr("ID") .DisplayExpr(new JS("gridBox_displayExpr")) .DataSource(d => d.WebApi() .Controller("DataGridCustomers") .LoadMode(DataSourceLoadMode.Raw) .Key("ID") ) .Placeholder("Select a value...") .ShowClearButton(true) .OnValueChanged("gridBox_valueChanged") .ContentTemplate(new TemplateName("EmbeddedDataGridSingle")) ) </div> </div> </div> @using(Html.DevExtreme().NamedTemplate("EmbeddedTreeViewSingle")) { @(Html.DevExtreme().TreeView() .DataSource(new JS(@"component.option(""dataSource"")")) .KeyExpr("ID") .DisplayExpr("Text") .ItemsExpr("Items") .ExpandedExpr("Expanded") .ParentIdExpr("CategoryId") .DataStructure(TreeViewDataStructure.Plain) .SelectionMode(NavSelectionMode.Single) .SelectByClick(true) .Height(235) .OnItemSelectionChanged(@<text> function(args) { var nodes = args.component.getNodes(), value = getSelectedItemsKeys(nodes); component.option("value", value); } </text>) .OnContentReady(@<text> function(args) { syncTreeViewSelection(args.component, component.option("value")); } </text>) ) } @using(Html.DevExtreme().NamedTemplate("EmbeddedDataGridSingle")) { @(Html.DevExtreme().DataGrid() .ID("embedded-datagrid") .DataSource(new JS(@"component.option(""dataSource"")")) .Columns(columns => { columns.Add().DataField("CompanyName"); columns.Add().DataField("City"); columns.Add().DataField("Phone"); }) .HoverStateEnabled(true) .Paging(p => p.PageSize(10)) .FilterRow(f => f.Visible(true)) .Scrolling(s => s.Mode(GridScrollingMode.Infinite)) .Height(345) .Selection(s => s.Mode(SelectionMode.Single)) .SelectedRowKeys(new JS(@"[component.option(""value"")]")) .OnSelectionChanged(@<text> function(selectedItems) { var keys = selectedItems.selectedRowKeys; component.option("value", keys); } </text>) ) } <script> function syncTreeViewSelection(treeView, value) { if (!value) { treeView.unselectAll(); } else { treeView.selectItem(value); } } function getSelectedItemsKeys(items) { var result = []; items.forEach(function (item) { if (item.selected) { result.push(item.key); } if (item.items.length) { result = result.concat(getSelectedItemsKeys(item.items)); } }); return result; } function treeBox_valueChanged(e) { var $treeView = e.component.content().find(".dx-treeview"); if($treeView.length) { syncTreeViewSelection($treeView.dxTreeView("instance"), e.value); } } function gridBox_valueChanged(e) { var $dataGrid = $("#embedded-datagrid"); if ($dataGrid.length) { var dataGrid = $dataGrid.dxDataGrid("instance"); dataGrid.selectRows(e.value, false); } } function gridBox_displayExpr(item) { return item && item.CompanyName + " <" + item.Phone + ">"; } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Linq; using System.Net.Http; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class DataGridCustomersController : ApiController { [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(SampleData.Customers, loadOptions)); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class TreeViewPlainDataController : ApiController { [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(TreeViewPlainData.Products, loadOptions)); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class Customer { public int ID { get; set; } public string CompanyName { get; set; } public string Address { get; set; } public string City { get; set; } public string State { get; set; } public int Zipcode { get; set; } public string Phone { get; set; } public string Fax { get; set; } public string Website { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Customer> Customers = new[] { new Customer { ID = 1, CompanyName = "Premier Buy", Address = "7601 Penn Avenue South", City = "Richfield", State = "Minnesota", Zipcode = 55423, Phone = "(612) 291-1000", Fax = "(612) 291-2001", Website = "http =//www.nowebsitepremierbuy.com" }, new Customer { ID = 2, CompanyName = "ElectrixMax", Address = "263 Shuman Blvd", City = "Naperville", State = "Illinois", Zipcode = 60563, Phone = "(630) 438-7800", Fax = "(630) 438-7801", Website = "http =//www.nowebsiteelectrixmax.com" }, new Customer { ID = 3, CompanyName = "Video Emporium", Address = "1201 Elm Street", City = "Dallas", State = "Texas", Zipcode = 75270, Phone = "(214) 854-3000", Fax = "(214) 854-3001", Website = "http =//www.nowebsitevideoemporium.com" }, new Customer { ID = 4, CompanyName = "Screen Shop", Address = "1000 Lowes Blvd", City = "Mooresville", State = "North Carolina", Zipcode = 28117, Phone = "(800) 445-6937", Fax = "(800) 445-6938", Website = "http =//www.nowebsitescreenshop.com" }, new Customer { ID = 5, CompanyName = "Braeburn", Address = "1 Infinite Loop", City = "Cupertino", State = "California", Zipcode = 95014, Phone = "(408) 996-1010", Fax = "(408) 996-1012", Website = "http =//www.nowebsitebraeburn.com" }, new Customer { ID = 6, CompanyName = "PriceCo", Address = "30 Hunter Lane", City = "Camp Hill", State = "Pennsylvania", Zipcode = 17011, Phone = "(717) 761-2633", Fax = "(717) 761-2334", Website = "http =//www.nowebsitepriceco.com" }, new Customer { ID = 7, CompanyName = "Ultimate Gadget", Address = "1557 Watson Blvd", City = "Warner Robbins", State = "Georgia", Zipcode = 31093, Phone = "(995) 623-6785", Fax = "(995) 623-6786", Website = "http =//www.nowebsiteultimategadget.com" }, new Customer { ID = 8, CompanyName = "EZ Stop", Address = "618 Michillinda Ave.", City = "Arcadia", State = "California", Zipcode = 91007, Phone = "(626) 265-8632", Fax = "(626) 265-8633", Website = "http =//www.nowebsiteezstop.com" }, new Customer { ID = 9, CompanyName = "Clicker", Address = "1100 W. Artesia Blvd.", City = "Compton", State = "California", Zipcode = 90220, Phone = "(310) 884-9000", Fax = "(310) 884-9001", Website = "http =//www.nowebsiteclicker.com" }, new Customer { ID = 10, CompanyName = "Store of America", Address = "2401 Utah Ave. South", City = "Seattle", State = "Washington", Zipcode = 98134, Phone = "(206) 447-1575", Fax = "(206) 447-1576", Website = "http =//www.nowebsiteamerica.com" }, new Customer { ID = 11, CompanyName = "Zone Toys", Address = "1945 S Cienega Boulevard", City = "Los Angeles", State = "California", Zipcode = 90034, Phone = "(310) 237-5642", Fax = "(310) 237-5643", Website = "http =//www.nowebsitezonetoys.com" }, new Customer { ID = 12, CompanyName = "ACME", Address = "2525 E El Segundo Blvd", City = "El Segundo", State = "California", Zipcode = 90245, Phone = "(310) 536-0611", Fax = "(310) 536-0612", Website = "http =//www.nowebsiteacme.com" }, new Customer { ID = 13, CompanyName = "Super Mart of the West", Address = "702 SW 8th Street", City = "Bentonville", State = "Arkansas", Zipcode = 72716, Phone = "(800) 555-2797", Fax = "(800) 555-2171", Website = "http://www.nowebsitesupermart.com" }, new Customer { ID = 14, CompanyName = "Electronics Depot", Address = "2455 Paces Ferry Road NW", City = "Atlanta", State = "Georgia", Zipcode = 30339, Phone = "(800) 595-3232", Fax = "(800) 595-3231", Website = "http =//www.nowebsitedepot.com" }, new Customer { ID = 15, CompanyName = "K&S Music", Address = "1000 Nicllet Mall", City = "Minneapolis", State = "Minnesota", Zipcode = 55403, Phone = "(612) 304-6073", Fax = "(612) 304-6074", Website = "http =//www.nowebsitemusic.com" }, new Customer { ID = 16, CompanyName = "Tom's Club", Address = "999 Lake Drive", City = "Issaquah", State = "Washington", Zipcode = 98027, Phone = "(800) 955-2292", Fax = "(800) 955-2293", Website = "http =//www.nowebsitetomsclub.com" }, new Customer { ID = 17, CompanyName = "E-Mart", Address = "3333 Beverly Rd", City = "Hoffman Estates", State = "Illinois", Zipcode = 60179, Phone = "(847) 286-2500", Fax = "(847) 286-2501", Website = "http =//www.nowebsiteemart.com" }, new Customer { ID = 18, CompanyName = "Walters", Address = "200 Wilmot Rd", City = "Deerfield", State = "Illinois", Zipcode = 60015, Phone = "(847) 940-2500", Fax = "(847) 940-2501", Website = "http =//www.nowebsitewalters.com" }, new Customer { ID = 19, CompanyName = "StereoShack", Address = "400 Commerce S", City = "Fort Worth", State = "Texas", Zipcode = 76102, Phone = "(817) 820-0741", Fax = "(817) 820-0742", Website = "http =//www.nowebsiteshack.com" }, new Customer { ID = 20, CompanyName = "Circuit Town", Address = "2200 Kensington Court", City = "Oak Brook", State = "Illinois", Zipcode = 60523, Phone = "(800) 955-2929", Fax = "(800) 955-9392", Website = "http =//www.nowebsitecircuittown.com" } }; } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class Product { public string ID { get; set; } public string CategoryId { get; set; } public string Text { get; set; } public bool Expanded { get; set; } public IEnumerable<Product> Items { get; set; } public int Price { get; set; } public string Image { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public static class TreeViewPlainData { public static readonly IEnumerable<Product> Products = new[] { new Product { ID = "1", Text = "Stores", Expanded = true }, new Product { ID = "1_1", CategoryId = "1", Text = "Super Mart of the West", Expanded = true }, new Product { ID = "1_1_1", CategoryId = "1_1", Text = "Video Players" }, new Product { ID = "1_1_1_1", CategoryId = "1_1_1", Text = "HD Video Player", Image = "../../Content/Images/ProductsLarge/1.png", Price = 220 }, new Product { ID = "1_1_1_2", CategoryId = "1_1_1", Text = "SuperHD Video Player", Image = "../../Content/Images/ProductsLarge/2.png", Price = 270 }, new Product { ID = "1_1_2", CategoryId = "1_1", Text = "Televisions", Expanded = true }, new Product { ID = "1_1_2_1", CategoryId = "1_1_2", Text = "SuperLCD 42", Image = "../../Content/Images/ProductsLarge/7.png", Price = 1200 }, new Product { ID = "1_1_2_2", CategoryId = "1_1_2", Text = "SuperLED 42", Image = "../../Content/Images/ProductsLarge/5.png", Price = 1450 }, new Product { ID = "1_1_2_3", CategoryId = "1_1_2", Text = "SuperLED 50", Image = "../../Content/Images/ProductsLarge/4.png", Price = 1600 }, new Product { ID = "1_1_2_4", CategoryId = "1_1_2", Text = "SuperLCD 55", Image = "../../Content/Images/ProductsLarge/6.png", Price = 1750 }, new Product { ID = "1_1_2_5", CategoryId = "1_1_2", Text = "SuperLCD 70", Image = "../../Content/Images/ProductsLarge/9.png", Price = 4000 }, new Product { ID = "1_1_3", CategoryId = "1_1", Text = "Monitors" }, new Product { ID = "1_1_3_1", CategoryId = "1_1_3", Text = "19\"" }, new Product { ID = "1_1_3_1_1", CategoryId = "1_1_3_1", Text = "DesktopLCD 19", Image = "../../Content/Images/ProductsLarge/10.png", Price = 160 }, new Product { ID = "1_1_4", CategoryId = "1_1", Text = "Projectors" }, new Product { ID = "1_1_4_1", CategoryId = "1_1_4", Text = "Projector Plus", Image = "../../Content/Images/ProductsLarge/14.png", Price = 550 }, new Product { ID = "1_1_4_2", CategoryId = "1_1_4", Text = "Projector PlusHD", Image = "../../Content/Images/ProductsLarge/15.png", Price = 750 } }; } }
.dx-fieldset { height: 500px; }