DevExtreme React - Array Only
Bind the Lookup to an array by passing it to the dataSource option. The array may contain primitive values...
jQuery
JavaScript
var products = ["HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50"]; $(function() { $("#lookupContainer").dxLookup({ dataSource: products }); });
Angular
TypeScript
HTML
import { DxLookupModule } from "devextreme-angular"; // ... export class AppComponent { lookupDataSource = ["HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50"]; } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
<dx-lookup [dataSource]="lookupDataSource"> </dx-lookup>
... or objects.
jQuery
JavaScript
var products = [ { name: "HD Video Player", price: 100 }, { name: "SuperHD Video Player", price: 420 }, { name: "SuperPlasma 50", price: 1500 }, { name: "SuperLED 50", price: 200 } ]; $(function() { $("#lookupContainer").dxLookup({ dataSource: products, valueExpr: 'price', displayExpr: 'name' }); });
Angular
TypeScript
HTML
import { DxLookupModule } from "devextreme-angular"; // ... export class AppComponent { lookupDataSource = [ { name: "HD Video Player", price: 100 }, { name: "SuperHD Video Player", price: 420 }, { name: "SuperPlasma 50", price: 1500 }, { name: "SuperLED 50", price: 200 } ]; } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
<dx-lookup [dataSource]="lookupDataSource" valueExpr="price" displayExpr="name"> </dx-lookup>
You can create a Query if objects in an array need to be processed (sorted, filtered, grouped, etc.). For example, in the following code, a Query sorts objects in the products
array by the price
field in descending order:
jQuery
JavaScript
var products = [ { name: "HD Video Player", price: 100 }, // ... ]; $(function() { $("#lookupContainer").dxLookup({ dataSource: DevExpress.data.query(products) .sortBy("price", true) .toArray(), valueExpr: 'price', displayExpr: 'name' }); });
Angular
TypeScript
HTML
import { DxLookupModule } from "devextreme-angular"; import query from "devextreme/data/query"; // ... export class AppComponent { products = [ { name: "HD Video Player", price: 100 }, // ... ]; getSortedProducts () { return query(this.products) .sortBy("price", true) .toArray(); } } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
<dx-lookup [dataSource]="getSortedProducts()" valueExpr="price" displayExpr="name"> </dx-lookup>
See Also
Feel free to share topic-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.