JavaScript/jQuery Lookup - ArrayStore
Extend a JavaScript array's functionality by placing it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.
jQuery
JavaScript
$(function() { $("#lookupContainer").dxLookup({ dataSource: new DevExpress.data.ArrayStore({ data: products, onLoaded: function() { // Event handling commands go here } }), valueExpr: 'price', displayExpr: 'name' }); });
Angular
HTML
TypeScript
<dx-lookup [dataSource]="lookupDataSource" valueExpr="price" displayExpr="name"> </dx-lookup>
import { DxLookupModule } from "devextreme-angular"; import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { products = [/* ... */ ]; lookupDataSource = new ArrayStore({ data: this.products, onLoaded: function () { // Event handling commands go here } }); } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup :data-source="dataSource" value-expr="price" display-expr="name" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; import ArrayStore from "devextreme/data/array_store"; const products = [/* ... */ ]; export default { components: { DxLookup }, data() { return { dataSource: new ArrayStore({ data: products, onLoaded: function () { // Event handling commands go here } }) }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; import ArrayStore from "devextreme/data/array_store"; const products = [/* ... */ ]; class App extends React.Component { constructor(props) { super(props); this.dataSource = new ArrayStore({ data: products, onLoaded: function () { // Event handling commands go here } }); } render() { return ( <Lookup dataSource={this.dataSource} valueExpr="price" displayExpr="name" /> ); } } export default App;
Data kept in the ArrayStore can be processed in a DataSource. For example, the DataSource can sort data.
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: new DevExpress.data.DataSource({ store: products, sort: { getter: "name", desc: true } }), valueExpr: 'price', displayExpr: 'name' }); });
Angular
HTML
TypeScript
<dx-lookup [dataSource]="lookupDataSource" valueExpr="price" displayExpr="name"> </dx-lookup>
import { DxLookupModule } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { products = [/* ... */ ]; lookupDataSource = new DataSource({ store: this.products, sort: { getter: "name", desc: true } }); } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup :data-source="dataSource" value-expr="price" display-expr="name" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; import DataSource from "devextreme/data/data_source"; const products = [/* ... */ ]; export default { components: { DxLookup }, data() { return { dataSource: new DataSource({ store: products, sort: { getter: "name", desc: true } }) }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; import DataSource from "devextreme/data/data_source"; const products = [/* ... */ ]; class App extends React.Component { constructor(props) { super(props); this.dataSource = new DataSource({ store: products, sort: { getter: "name", desc: true } }); } render() { return ( <Lookup dataSource={this.dataSource} valueExpr="price" displayExpr="name" /> ); } } export default App;
NOTE
Even if you have passed a JavaScript array to the dataSource property, the Lookup automatically places it into an ArrayStore wrapped into the DataSource you can get with the getDataSource() method.
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.