-
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
-
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
Lookup - Basics
The Lookup component allows users to search through its drop-down list and select a single item. The drop-down list can be grouped by category.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
@model IEnumerable<string>
@using DevExtreme.AspNet.Mvc.Builders;
<div class="dx-fieldset">
<div class="dx-fieldset-header">Simple lookup</div>
<div class="dx-field">
@(Html.DevExtreme().Lookup()
.DataSource(Model)
.DropDownOptions(p => p.ShowTitle(false))
.Value(Model.First())
.InputAttr("aria-label", "Simple lookup")
)
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Grouped lookup</div>
<div class="dx-field">
@(Html.DevExtreme().Lookup()
.DataSource(d => d.WebApi()
.Controller("EmployeesTasks")
.Key("ID")
)
.DataSourceOptions(o => o.Group("Assigned"))
.DropDownOptions(p => p.HideOnOutsideClick(true)
.ShowTitle(false)
)
.Grouped(true)
.DisplayExpr("Subject")
.InputAttr("aria-label", "Grouped lookup")
)
</div>
</div>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
Bind the Component to Data
To bind the component to data, use one of these properties:
-
items[]
Accepts a local data array (see the Simple Lookup code below). -
dataSource
Accepts a local data array or a DataSource object. This object works with local and remote arrays and allows you to shape data. In this demo, a DataSource instance is configured to group a local array of objects (see the Grouped Lookup code below).
Both properties work with arrays of primitives or objects. If you use objects, specify the following properties:
-
valueExpr
A data field that contains unique values used to identify items. -
displayExpr
A data field whose values should be displayed in the drop-down list.
When a user selects an item, the Lookup component saves the corresponding value from the valueExpr data field in the value property. You can also specify the value property in code to preselect an item as shown in the Simple Lookup use case.
Group Data
You can group data items in the drop-down list.
If the data source contains ungrouped data items, use the DataSource's group property to specify the data field to group by.
The Lookup component can also work with initially grouped data items. In this case, the data array should contain objects with the key and items fields:
xxxxxxxxxx
let dataSource = [{
key: "Group 1", // Group caption
items: [ // Items in Group 1
{ /* ... */ },
{ /* ... */ }
]
}, {
key: "Group 2",
items: [
{ /* ... */ },
{ /* ... */ }
]
}];
If data objects are grouped but use other field names, implement the DataSource's map function to create key and items field mappings.
Only one-level grouping is supported.
Regardless of the data source structure, enable the grouped property.
Configure the Drop-Down List
The Lookup component uses the Popover component as a drop-down list. To customize the Popover, use the dropDownOptions property. It accepts an object with Popover properties. Alternatively, you can set the usePopover property to false to display lookup items in a pop-up window.