Pull down to refresh...
Release to refresh...
Refreshing...
-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Reporting
- AI-powered Extensions
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Related Demos:
Your search did not match any results.
Loading...
Was this demo helpful?
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
x
@model DevExtreme.NETCore.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")
.InputAttr("aria-label", "Product")
.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
.Mvc()
.Controller("SelectBoxEditing")
.Key("ID")
.LoadAction("Get")
.LoadMode(DataSourceLoadMode.Raw)
.InsertAction("Insert")
)
.DisplayExpr("Name")
.InputAttr("aria-label", "Custom Product")
.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"))
.InputAttr("aria-label", "Search Mode")
.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")
.InputAttr("aria-label", "Search Expression")
.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)
.InputAttr("aria-label", "Search Timeout")
.OnValueChanged("searchTimeout_changed")
)
</div>
<div class="option">
<div>Minimum Search Length</div>
@(Html.DevExtreme().NumberBox()
.Min(0)
.Max(5)
.Value(0)
.ShowSpinButtons(true)
.InputAttr("aria-label", "Minimum Search Length")
.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.store().clearRawDataCache();
dataSource.reload();
})
data.customItem = result;
}
</script>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
The following properties help you configure the feature:
- searchExpr
Specifies one or several data fields to search. - searchMode
Specifies whether found items should contain the typed-in string or start with it. - searchTimeout
Specifies the delay between the moment a user stops typing and the moment the search is executed. - minSearchLength
Specifies the minimum number of characters that a user should type in to trigger the search. - showDataBeforeSearch
Specifies whether the SelectBox should display the unfiltered item list until a user have typed in the minimum number of characters (minSearchLength).
Set the acceptCustomValue property to true to allow users to add values to the SelectBox. You should also implement the onCustomItemCreating handler to create new data source entries.