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!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<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))
.InputAttr("aria-label", "Owner")
.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")
.InputAttr("aria-label", "Owner")
.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.getDataSource()"))
.KeyExpr("ID")
.DisplayExpr("Text")
.ItemsExpr("Items")
.ExpandedExpr("Expanded")
.ParentIdExpr("CategoryId")
.DataStructure(TreeViewDataStructure.Plain)
.SelectionMode(NavSelectionMode.Single)
.SelectByClick(true)
.Height(235)
.OnItemClick(@<text>
function(args) {
component.close();
}
</text>)
.OnItemSelectionChanged(@<text>
function(args) {
component.option("value", args.component.getSelectedNodeKeys());
}
</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.getDataSource()"))
.Columns(columns => {
columns.Add().DataField("CompanyName");
columns.Add().DataField("City");
columns.Add().DataField("Phone");
})
.ShowBorders(true)
.HoverStateEnabled(true)
.Paging(p => p.PageSize(10))
.FilterRow(f => f.Visible(true))
.Scrolling(s => s.Mode(GridScrollingMode.Virtual))
.Height(345)
.Selection(s => s.Mode(SelectionMode.Single))
.SelectedRowKeys(new JS(@"component.option(""value"") ? [component.option(""value"")] : []"))
.OnSelectionChanged(@<text>
function(selectedItems) {
var keys = selectedItems.selectedRowKeys;
component.option("value", keys);
component.close();
}
</text>)
)
}
<script>
function syncTreeViewSelection(treeView, value) {
if (!value) {
treeView.unselectAll();
} else {
treeView.selectItem(value);
}
}
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 DevExtreme.MVC.Demos.ViewModels;
using Newtonsoft.Json;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class DropDownBoxController : Controller {
public ActionResult SingleSelection() {
return View();
}
}
}
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
},
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.dx"
}
};
}
}
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;
}
In this demo, TreeView and the DataGrid components in single-selection mode are embedded into the DropDownBox window.
The following instructions show how to synchronize the DropDownBox with an embedded DevExtreme component:
-
Specify data sources
The DropDownBox and its embedded component can use the same or different data sources. If the data sources are different, you need to specify the embedded component's key field in the DropDownBox's data source. If the DropDownBox contains a DataGrid, bind the DataGrid to a store instead of a simple array (for example, an ArrayStore). -
Specify which data field contains the DropDownBox's values and the embedded component's keys
Assign the field's name to the DropDownBox's valueExpr property and to the key property of the embedded component's store. -
Synchronize the DropDownBox's value and the embedded component's selection
- Assign DropDownBox's initial value to the embedded component's selectedRowKeys/selectedItemKeys property (see the example with the DataGrid below). If the embedded component does not have such properties, implement the onContentReady handler (the example with the TreeView).
- Implement the DropDownBox's onValueChanged handler to update the selection when the value changes.
- Implement the embedded component's onSelectionChanged handler to update the DropDownBox's value when the selection changes.