@model DevExtreme.MVC.Demos.ViewModels.SelectBoxViewModel
<div id="selectbox-demo">
<div class="widget-container">
<div class="dx-fieldset">
<div class="dx-fieldset-header">SearchBox</div>
<div class="dx-field">
<div class="dx-field-label">Product</div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.ID("search-box")
.DataSource(d => d
.Mvc()
.LoadAction("GetItems")
.LoadMode(DataSourceLoadMode.Raw)
.Key("ID")
)
.DisplayExpr("Name")
.ValueExpr("ID")
.SearchEnabled(true)
)
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">EditBox</div>
<div class="dx-field">
<div class="dx-field">
<div class="dx-field-label">Product</div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.DataSource(d => d.WebApi()
.Controller("SelectBoxEditing")
.LoadMode(DataSourceLoadMode.Raw)
.InsertAction(true)
.Key("ID")
)
.DisplayExpr("Name")
.ValueExpr("ID")
.AcceptCustomValue(true)
.OnValueChanged("selectBox_valueChanged")
.OnCustomItemCreating("selectBox_customItemCreating")
.Value(0)
)
</div>
</div>
<div class="dx-field current-product">
Current product:
<span class="current-value">
HD Video Player (ID: 0)
</span>
</div>
</div>
</div>
</div>
<div class="options">
<div class="caption">SearchBox Options</div>
<div class="option">
<div>Search Mode</div>
@(Html.DevExtreme().SelectBox()
.DataSource(new JS("searchModes"))
.Value(new JS("searchModes[0]"))
.OnValueChanged("searchMode_changed")
)
</div>
<div class="option">
<div>Search Expression</div>
@(Html.DevExtreme().SelectBox()
.DataSource(new JS("searchExpressions"))
.DisplayExpr("name")
.ValueExpr("value")
.Value(new JS("searchExpressions[0].value"))
.OnValueChanged("searchExpr_changed")
)
</div>
<div class="option">
<div>Search Timeout</div>
@(Html.DevExtreme().NumberBox()
.Min(0)
.Max(5000)
.Value(200)
.ShowSpinButtons(true)
.Step(100)
.OnValueChanged("searchTimeout_changed")
)
</div>
<div class="option">
<div>Minimum Search Length</div>
@(Html.DevExtreme().NumberBox()
.Min(0)
.Max(5)
.Value(0)
.ShowSpinButtons(true)
.OnValueChanged("minSearchLength_changed")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(false)
.Text("Show Data Before Search")
.OnValueChanged("showDataBeforeSearch_changed")
)
</div>
</div>
</div>
<script>
var searchModes = ["contains", "startswith"];
var searchExpressions = [{
name: "'Name'",
value: "Name"
}, {
name: "['Name', 'Category']",
value: ['Name', 'Category']
}];
function selectBox_valueChanged(data) {
var $result = $(".current-value");
if (data.value !== null) {
var selectedItem = data.component.option('selectedItem');
$result.text(selectedItem.Name + " (ID: " + selectedItem.ID + ")");
} else {
$result.text("Not selected");
}
}
function getSearchBoxInstance() {
return $("#search-box").dxSelectBox("instance");
}
function searchMode_changed(data) {
getSearchBoxInstance().option("searchMode", data.value);
}
function searchExpr_changed(data) {
getSearchBoxInstance().option("searchExpr", data.value);
}
function searchTimeout_changed(data) {
getSearchBoxInstance().option("searchTimeout", data.value);
}
function minSearchLength_changed(data) {
getSearchBoxInstance().option("minSearchLength", data.value);
}
function showDataBeforeSearch_changed(data) {
getSearchBoxInstance().option("showDataBeforeSearch", data.value);
}
function selectBox_customItemCreating(data) {
if (!data.text) {
data.customItem = null;
return;
}
var dataSource = data.component.getDataSource();
var newItem = { Name: data.text };
var result = dataSource.store().insert(newItem);
result.done(function() {
dataSource.reload();
})
data.customItem = result;
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models;
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 SelectBoxController : Controller {
public ActionResult SearchAndEditing() {
return View(new SelectBoxViewModel {
Items = SampleData.Electronics.Select(i => i.Name)
});
}
public ActionResult GetItems(DataSourceLoadOptions loadOptions) {
return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Electronics, loadOptions)), "application/json");
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<ElectronicsItem> Electronics = new[] {
new ElectronicsItem {
ID = 1,
Name = "HD Video Player",
Price = 330,
CurrentInventory = 225,
Backorder = 0,
Manufacturing = 10,
Category = "Video Players",
ImageSrc = "../../Content/images/products/1-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 2,
Name = "SuperHD Player",
Price = 400,
CurrentInventory = 150,
Backorder = 0,
Manufacturing = 25,
Category = "Video Players",
ImageSrc = "../../Content/images/products/2-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 3,
Name = "SuperPlasma 50",
Price = 2400,
CurrentInventory = 0,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/images/products/3-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 4,
Name = "SuperLED 50",
Price = 1600,
CurrentInventory = 77,
Backorder = 0,
Manufacturing = 55,
Category = "Televisions",
ImageSrc = "../../Content/images/products/4-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 5,
Name = "SuperLED 42",
Price = 1450,
CurrentInventory = 445,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/images/products/5-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 6,
Name = "SuperLED 55",
Price = 1350,
CurrentInventory = 345,
Backorder = 0,
Manufacturing = 5,
Category = "Televisions",
ImageSrc = "../../Content/images/products/6-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 7,
Name = "SuperLCD 42",
Price = 1200,
CurrentInventory = 210,
Backorder = 0,
Manufacturing = 20,
Category = "Televisions",
ImageSrc = "../../Content/images/products/7-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 8,
Name = "SuperPlasma 65",
Price = 3500,
CurrentInventory = 0,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/images/products/8-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 9,
Name = "SuperLCD 70",
Price = 4000,
CurrentInventory = 95,
Backorder = 0,
Manufacturing = 5,
Category = "Televisions",
ImageSrc = "../../Content/images/products/9-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 10,
Name = "DesktopLED 21",
Price = 175,
CurrentInventory = 0,
Backorder = 425,
Manufacturing = 75,
Category = "Monitors",
ImageSrc = "../../Content/images/products/10-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 11,
Name = "DesktopLED 19",
Price = 165,
CurrentInventory = 425,
Backorder = 0,
Manufacturing = 110,
Category = "Monitors",
ImageSrc = "../../Content/images/products/11-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 12,
Name = "DesktopLCD 21",
Price = 170,
CurrentInventory = 210,
Backorder = 0,
Manufacturing = 60,
Category = "Monitors",
ImageSrc = "../../Content/images/products/12-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 13,
Name = "DesktopLCD 19",
Price = 160,
CurrentInventory = 150,
Backorder = 0,
Manufacturing = 210,
Category = "Monitors",
ImageSrc = "../../Content/images/products/13-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 14,
Name = "Projector Plus",
Price = 550,
CurrentInventory = 0,
Backorder = 55,
Manufacturing = 10,
Category = "Monitors",
ImageSrc = "../../Content/images/products/14-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 15,
Name = "Projector PlusHD",
Price = 750,
CurrentInventory = 110,
Backorder = 0,
Manufacturing = 90,
Category = "Projectors",
ImageSrc = "../../Content/images/products/15-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 16,
Name = "Projector PlusHT",
Price = 1050,
CurrentInventory = 0,
Backorder = 75,
Manufacturing = 57,
Category = "Projectors",
ImageSrc = "../../Content/images/products/16-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 17,
Name = "ExcelRemote IR",
Price = 150,
CurrentInventory = 650,
Backorder = 0,
Manufacturing = 190,
Category = "Automation",
ImageSrc = "../../Content/images/products/17-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 18,
Name = "ExcelRemote BT",
Price = 180,
CurrentInventory = 310,
Backorder = 0,
Manufacturing = 0,
Category = "Automation",
ImageSrc = "../../Content/images/products/18-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 19,
Name = "ExcelRemote IP",
Price = 200,
CurrentInventory = 0,
Backorder = 325,
Manufacturing = 225,
Category = "Automation",
ImageSrc = "../../Content/images/products/19-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class ElectronicsItem {
public int ID { get; set; }
public string Category { get; set; }
public string Name { get; set; }
public int CurrentInventory { get; set; }
public int Backorder { get; set; }
public int Manufacturing { get; set; }
public int Price { get; set; }
public string ImageSrc { get; set; }
public string IconSrc { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<ElectronicsSimpleItem> ElectronicsSimple = new[] {
new ElectronicsSimpleItem {
Name = "HD Video Player",
ID = 0
},
new ElectronicsSimpleItem {
Name = "SuperHD Video Player",
ID= 1
},
new ElectronicsSimpleItem {
Name = "SuperPlasma 50",
ID = 2
},
new ElectronicsSimpleItem {
Name = "SuperLED 50",
ID = 3
},
new ElectronicsSimpleItem {
Name = "SuperLED 42",
ID = 4
},
new ElectronicsSimpleItem {
Name = "SuperLCD 55",
ID = 5
},
new ElectronicsSimpleItem {
Name = "SuperLCD 42",
ID = 6
},
new ElectronicsSimpleItem {
Name = "SuperPlasma 65",
ID = 7
},
new ElectronicsSimpleItem {
Name = "SuperLCD 70",
ID = 8
},
new ElectronicsSimpleItem {
Name = "Projector Plus",
ID = 9 },
new ElectronicsSimpleItem {
Name = "Projector PlusHT",
ID = 10
},
new ElectronicsSimpleItem {
Name = "ExcelRemote IR",
ID = 11
},
new ElectronicsSimpleItem {
Name = "ExcelRemote Bluetooth",
ID = 12
},
new ElectronicsSimpleItem {
Name = "ExcelRemote IP",
ID = 13
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class ElectronicsSimpleItem {
public int ID { get; set; }
public string Name { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.ViewModels {
public class SelectBoxViewModel {
public IEnumerable<string> Items { get; set; }
}
}
.widget-container {
margin-right: 320px;
}
.current-product {
padding-top: 11px;
}
.current-value {
font-weight: bold;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 260px;
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 10px;
}