Multiple Selection
If the UI component embedded into the DropDownBox allows multiple selection, synchronize the DropDownBox value with the selected items. Synchronization instructions are the same for every selection mode.
In this demo, the DataGrid's selection.mode and TreeView's selectionMode properties are used to enable multiple selection.
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.Mvc()
.Controller("TreeViewPlainData")
.LoadAction("Get")
.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 })
.InputAttr("aria-label", "Owner")
.ValueExpr("ID")
.DisplayExpr("CompanyName")
.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("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 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 MultipleSelection() {
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.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;
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;
}