DevExtreme jQuery - 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
Feedback