Angular Lookup - Array Only
Bind the Lookup to an array by passing it to the dataSource property. The array may contain primitive values...
jQuery
JavaScript
const products = ["HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50"]; $(function() { $("#lookupContainer").dxLookup({ dataSource: products }); });
Angular
HTML
TypeScript
<dx-lookup [dataSource]="lookupDataSource"> </dx-lookup>
import { DxLookupModule } from "devextreme-angular"; // ... export class AppComponent { lookupDataSource = ["HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50"]; } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup :data-source="products"/> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; export default { components: { DxLookup }, data() { return { products: ['HD Video Player', 'SuperHD Video Player', 'SuperPlasma 50', 'SuperLED 50'] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; const products = ['HD Video Player', 'SuperHD Video Player', 'SuperPlasma 50', 'SuperLED 50']; class App extends React.Component { render() { return ( <Lookup dataSource={products}/> ); } } export default App;
... or objects.
jQuery
JavaScript
const 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
HTML
TypeScript
<dx-lookup [dataSource]="lookupDataSource" valueExpr="price" displayExpr="name"> </dx-lookup>
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 ], // ... })
Vue
<template> <DxLookup :data-source="products" value-expr="price" display-expr="name" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; export default { components: { DxLookup }, data() { return { products: [ { name: 'HD Video Player', price: 100 }, { name: 'SuperHD Video Player', price: 420 }, { name: 'SuperPlasma 50', price: 1500 }, { name: 'SuperLED 50', price: 200 } ] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; const products = [ { name: 'HD Video Player', price: 100 }, { name: 'SuperHD Video Player', price: 420 }, { name: 'SuperPlasma 50', price: 1500 }, { name: 'SuperLED 50', price: 200 } ]; class App extends React.Component { render() { return ( <Lookup dataSource={products} valueExpr="price" displayExpr="name" /> ); } } export default App;
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
const products = [ { name: "HD Video Player", price: 100 }, // ... ]; $(function() { $("#lookupContainer").dxLookup({ dataSource: DevExpress.data.query(products) .sortBy("price", true) .toArray(), valueExpr: 'price', displayExpr: 'name' }); });
Angular
HTML
TypeScript
<dx-lookup [dataSource]="getSortedProducts()" valueExpr="price" displayExpr="name"> </dx-lookup>
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 ], // ... })
Vue
<template> <DxLookup :data-source="getSortedProducts()" value-expr="price" display-expr="name" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; import query from "devextreme/data/query"; export default { components: { DxLookup }, data() { return { products: [ { name: 'HD Video Player', price: 100 }, // ... ] }; }, methods: { getSortedProducts () { return query(this.products) .sortBy("price", true) .toArray(); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; import query from "devextreme/data/query"; class App extends React.Component { constructor(props) { super(props); this.products = [ { name: 'HD Video Player', price: 100 }, // ... ]; this.getSortedProducts = this.getSortedProducts.bind(this); } getSortedProducts() { return query(this.products) .sortBy("price", true) .toArray(); } render() { return ( <Lookup dataSource={this.getSortedProducts()} valueExpr="price" displayExpr="name" /> ); } } export default App;
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.