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 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 { [Route("api/TreeViewPlainData/{action}", Name = "TreeViewPlainData")] 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; } public bool IsGroup { 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, IsGroup = true }, new Product { ID = "1_1", CategoryId = "1", Text = "Super Mart of the West", Expanded = true, IsGroup = true }, new Product { ID = "1_1_1", CategoryId = "1_1", Text = "Video Players", IsGroup = true }, new Product { ID = "1_1_1_1", CategoryId = "1_1_1", Text = "HD Video Player", Image = "../../Content/Images/ProductsLarge/1.png", Price = 220, IsGroup = false }, new Product { ID = "1_1_1_2", CategoryId = "1_1_1", Text = "SuperHD Video Player", Image = "../../Content/Images/ProductsLarge/2.png", Price = 270, IsGroup = false }, new Product { ID = "1_1_2", CategoryId = "1_1", Text = "Televisions", Expanded = true, IsGroup = true }, new Product { ID = "1_1_2_1", CategoryId = "1_1_2", Text = "SuperLCD 42", Image = "../../Content/Images/ProductsLarge/7.png", Price = 1200, IsGroup = false }, new Product { ID = "1_1_2_2", CategoryId = "1_1_2", Text = "SuperLED 42", Image = "../../Content/Images/ProductsLarge/5.png", Price = 1450, IsGroup = false }, new Product { ID = "1_1_2_3", CategoryId = "1_1_2", Text = "SuperLED 50", Image = "../../Content/Images/ProductsLarge/4.png", Price = 1600, IsGroup = false }, new Product { ID = "1_1_2_4", CategoryId = "1_1_2", Text = "SuperLCD 55", Image = "../../Content/Images/ProductsLarge/6.png", Price = 1750, IsGroup = false }, new Product { ID = "1_1_2_5", CategoryId = "1_1_2", Text = "SuperLCD 70", Image = "../../Content/Images/ProductsLarge/9.png", Price = 4000, IsGroup = false }, new Product { ID = "1_1_3", CategoryId = "1_1", Text = "Monitors", IsGroup = true }, new Product { ID = "1_1_3_1", CategoryId = "1_1_3", Text = "19\"", IsGroup = true }, new Product { ID = "1_1_3_1_1", CategoryId = "1_1_3_1", Text = "DesktopLCD 19", Image = "../../Content/Images/ProductsLarge/10.png", Price = 160, IsGroup = false }, new Product { ID = "1_1_4", CategoryId = "1_1", Text = "Projectors", IsGroup = true }, new Product { ID = "1_1_4_1", CategoryId = "1_1_4", Text = "Projector Plus", Image = "../../Content/Images/ProductsLarge/14.png", Price = 550, IsGroup = false }, new Product { ID = "1_1_4_2", CategoryId = "1_1_4", Text = "Projector PlusHD", Image = "../../Content/Images/ProductsLarge/15.png", Price = 750, IsGroup = false } }; } }
.dx-fieldset { height: 500px; }