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(new[] { "1_1" })
.ValueExpr("ID")
.DisplayExpr("Text")
.InputAttr("aria-label", "Owner")
.DropDownOptions(o => o.Height(350))
.DataSource(d => d.WebApi()
.Controller("TreeViewPlainData")
.LoadMode(DataSourceLoadMode.Raw)
.Key("ID")
)
.Placeholder("Select a value...")
.ShowClearButton(true)
.OnValueChanged("treeBox_valueChanged")
.ContentTemplate(new TemplateName("EmbeddedTreeViewMultiple"))
)
<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(new[] { 3 })
.ValueExpr("ID")
.DisplayExpr("CompanyName")
.InputAttr("aria-label", "Owner")
.DataSource(d => d.WebApi()
.Controller("DataGridCustomers")
.LoadMode(DataSourceLoadMode.Raw)
.Key("ID")
)
.Placeholder("Select a value...")
.ShowClearButton(true)
.OnValueChanged("gridBox_valueChanged")
.ContentTemplate(new TemplateName("EmbeddedDataGridMultiple"))
)
</div>
</div>
</div>
@using(Html.DevExtreme().NamedTemplate("EmbeddedTreeViewMultiple")) {
@(Html.DevExtreme().TreeView()
.DataSource(new JS(@"component.getDataSource()"))
.KeyExpr("ID")
.DisplayExpr("Text")
.ItemsExpr("Items")
.ExpandedExpr("Expanded")
.ParentIdExpr("CategoryId")
.DataStructure(TreeViewDataStructure.Plain)
.SelectionMode(NavSelectionMode.Multiple)
.ShowCheckBoxesMode(TreeViewCheckBoxMode.Normal)
.SelectNodesRecursive(false)
.SelectByClick(true)
.Height(235)
.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("EmbeddedDataGridMultiple")) {
@(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");
})
.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.Multiple))
.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();
return;
}
value.forEach(function (key) {
treeView.selectItem(key);
});
}
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);
}
}
</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 MultipleSelection() {
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;
}