<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") .DisplayExpr("Text") .InputAttr("aria-label", "Owner") .DropDownOptions(o => o.Height(350)) .DataSource(d => d.Mvc() .Controller("TreeViewPlainData") .LoadAction("Get") .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.Mvc() .Controller("DataGridCustomers") .LoadAction("Get") .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 Microsoft.AspNetCore.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;using DevExtreme.NETCore.Demos.ViewModels;using Newtonsoft.Json;using System.Linq;namespace DevExtreme.NETCore.Demos.Controllers { public class DropDownBoxController : Controller { public ActionResult SingleSelection() { return View(); } }}
using DevExtreme.AspNet.Data;using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class DataGridCustomersController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(SampleData.Customers, loadOptions); } }}
using System;using System.Linq;using System.Collections.Generic;using System.Net.Http;using Microsoft.AspNetCore.Mvc;using DevExtreme.AspNet.Mvc;using DevExtreme.AspNet.Data;using DevExtreme.NETCore.Demos.Models.SampleData;namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class TreeViewPlainDataController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(TreeViewPlainData.Products, loadOptions); } }}
using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.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;using System.Linq;namespace DevExtreme.NETCore.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.nowebsitee*zstop.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;namespace DevExtreme.NETCore.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;using System.Linq;namespace DevExtreme.NETCore.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 = "../../images/ProductsLarge/1.png", Price = 220 }, new Product { ID = "1_1_1_2", CategoryId = "1_1_1", Text = "SuperHD Video Player", Image = "../../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 = "../../images/ProductsLarge/7.png", Price = 1200 }, new Product { ID = "1_1_2_2", CategoryId = "1_1_2", Text = "SuperLED 42", Image = "../../images/ProductsLarge/5.png", Price = 1450 }, new Product { ID = "1_1_2_3", CategoryId = "1_1_2", Text = "SuperLED 50", Image = "../../images/ProductsLarge/4.png", Price = 1600 }, new Product { ID = "1_1_2_4", CategoryId = "1_1_2", Text = "SuperLCD 55", Image = "../../images/ProductsLarge/6.png", Price = 1750 }, new Product { ID = "1_1_2_5", CategoryId = "1_1_2", Text = "SuperLCD 70", Image = "../../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 = "../../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 = "../../images/ProductsLarge/14.png", Price = 550 }, new Product { ID = "1_1_4_2", CategoryId = "1_1_4", Text = "Projector PlusHD", Image = "../../images/ProductsLarge/15.png", Price = 750 } }; }}
.dx-fieldset { height: 500px;}
