DevExtreme jQuery - Lookup Columns
A lookup column is a special type of data columns. It contains a restricted set of values that is useful when filtering and editing.
Each lookup column has an individual data source - a collection of objects that map the column's actual values to display values...
jQuery
JavaScript
$(function() {
$("#dataGridContainer").dxDataGrid({
dataSource: orders,
columns: [{
dataField: 'statusId', // provides actual values
lookup: {
dataSource: {
store: {
type: 'array',
data: [
{ id: 1, name: 'Not Started' },
{ id: 2, name: 'Need Assistance' },
{ id: 3, name: 'In Progress' },
// ...
],
key: "id"
},
pageSize: 10,
paginate: true
},
valueExpr: 'id', // contains the same values as the "statusId" field provides
displayExpr: 'name' // provides display values
}
}]
});
});Angular
HTML
TypeScript
<dx-data-grid [dataSource]="orders">
<dxi-column
dataField="statusId"> <!-- provides actual values -->
<dxo-lookup
[dataSource]="lookupData"
valueExpr="id" <!-- contains the same values as the "statusId" field provides -->
displayExpr="name"> <!-- provides display values -->
</dxo-lookup>
</dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
import "devextreme/data/array_store";
// ...
export class AppComponent {
orders = [ ... ];
lookupData = {
store: {
type: 'array',
data: [
{ id: 1, name: 'Not Started' },
{ id: 2, name: 'Need Assistance' },
{ id: 3, name: 'In Progress' },
// ...
],
key: "id"
},
pageSize: 10,
paginate: true
};
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})... or simply an array of column values if the actual and display values are the same.
jQuery
JavaScript
$(function() {
$("#dataGridContainer").dxDataGrid({
dataSource: orders,
columns: [{
dataField: 'status', // provides column values
lookup: {
dataSource: [ // contains the same values as the "status" field provides
'Not Started',
'Need Assistance',
'In Progress',
// ...
]
}
}]
});
});Angular
HTML
TypeScript
<dx-data-grid [dataSource]="orders">
<dxi-column
dataField="status"> <!-- provides column values -->
<dxo-lookup
[dataSource]="lookupData"> <!-- contains the same values as the "status" field provides -->
</dxo-lookup>
</dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
orders = [ ... ];
lookupData = [
'Not Started',
'Need Assistance',
'In Progress',
// ...
];
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})If your data source accepts null values, set the allowClearing option to true. In editing state, each of the lookup column's cells will have a button that nullifies the value.
Each cell in the lookup column is based on the SelectBox widget. Use editorOptions to customize it. See the Customize Editors topic for more details.
See Also
Feedback