Free Trial Buy

Lookup Columns

A lookup column is a special case of data columns. A lookup column contains a restricted set of values. It is useful for filtering and, often, editing.

DevExtreme HTML5 JavaScript TreeList LookupColumns

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() {
    $("#treeListContainer").dxTreeList({
        dataSource: orders,
        columns: [{
            dataField: 'statusId', // provides actual values
            lookup: {
                dataSource: [
                    { id: 1, name: 'Not Started' },
                    { id: 2, name: 'Need Assistance' },
                    { id: 3, name: 'In Progress' },
                    // ...
                ],
                valueExpr: 'id', // contains the same values as the "statusId" field provides
                displayExpr: 'name' // provides display values
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list [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-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    orders = [ ... ];
    lookupData = [
        { id: 1, name: 'Not Started' },
        { id: 2, name: 'Need Assistance' },
        { id: 3, name: 'In Progress' },
        // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

... or simply an array of column values if actual and display values are the same.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        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-tree-list [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-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    orders = [ ... ];
    lookupData = [
        'Not Started',
        'Need Assistance',
        'In Progress',
        // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

Each cell in the lookup column is constructed on the SelectBox widget which can be customized using editorOptions. See the Customize Editors topic for details.

See Also