Vue TreeList - columns.lookup
A lookup column restricts the set of values that can be chosen when a user edits or filters the column. In a lookup column, each cell is a drop-down menu. You can use a lookup column when you need to substitute displayed values with required values. For example, consider that you have two arrays of objects: drivers
and buses
.
var drivers = [ { driverID: 1, firstName: "John", lastName: "Smith", busID: 2 }, { driverID: 2, firstName: "Lizzy", lastName: "Cook", busID: 1 }, { driverID: 3, firstName: "Brian", lastName: "Hawkins", busID: 3 } ]; var buses = [ { busID: 1, plates: "123456" }, { busID: 2, plates: "AB-1234" }, { busID: 3, plates: "CD-9876" } ];
All drivers
have the busID
field, which refers to a bus. If drivers
is the main dataSource, the Bus ID column displays bus IDs, which provides little information to a user. It will be more useful to display bus license plates instead of IDs. For this, the buses
array must be set as a lookup dataSource for the Bus ID column. Then, the names of data fields must be assigned to the valueExpr and displayExpr options. Values from the valueExpr data field will be replaced with values from the displayExpr data field.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ dataSource: drivers, // ... columns: [{ dataField: "busID", lookup: { dataSource: buses, valueExpr: "busID", displayExpr: "plates" } }] }); });
Angular
<dx-tree-list [dataSource]="drivers"> <dxi-column dataField="busID"> <dxo-lookup [dataSource]="buses" valueExpr="busID" displayExpr="plates"> </dxo-lookup> </dxi-column> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { drivers = [ { driverID: 1, firstName: "John", lastName: "Smith", busID: 2 }, { driverID: 2, firstName: "Lizzy", lastName: "Cook", busID: 1 }, { driverID: 3, firstName: "Brian", lastName: "Hawkins", busID: 3 } ]; buses = [ { busID: 1, plates: "123456" }, { busID: 2, plates: "AB-1234" }, { busID: 3, plates: "CD-9876" } ]; } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
With this code, the Bus ID column contains license plates instead of IDs. Moreover, the user can choose a plate number from the drop-down menu when editing cells or applying a filter to this column.
See Also
dataSource
This option accepts one of the following:
Array of Objects
A simple JavaScript array containing a collection of plain objects.DataSource Configuration Object
A DataSource configuration object. See Bind a Lookup Column to a Custom Data Source.Store instance
An ArrayStore, LocalStore, ODataStore, or CustomStore instance.Function
A function that returns an array of objects, a store instance, or a DataSource configuration object.
The lookup data source should contain fields assigned to the valueExpr and displayExpr options.
displayExpr
This option accepts a string - the name of the data field that provides displayed values, or a function that returns the displayed value, combined from values of several data fields.
Values in a lookup column are sorted by the valueExpr field. Implement the column's calculateSortValue function if you want to sort by the displayExpr field instead:
jQuery
columns: [{ // ... lookup: { // ... }, calculateSortValue: function (data) { var value = this.calculateCellValue(data); return this.lookup.calculateCellValue(value); } }]
Angular
<dxi-column ... [calculateSortValue]="calculateSortValue"> <dxo-lookup ... ></dxo-lookup> </dxi-column>
export class AppComponent { calculateSortValue (data) { let column = this as any; let value = column.calculateCellValue(data); return column.lookup.calculateCellValue(value); } }
If you have technical questions, please create a support ticket in the DevExpress Support Center.