DevExtreme Angular - 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
TypeScript
HTML
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 ], // ... })
<dx-lookup [dataSource]="lookupDataSource" valueExpr="price" displayExpr="name"> </dx-lookup>
Data kept in the ArrayStore can be processed in a DataSource. For example, the DataSource can sort data.
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: new DevExpress.data.DataSource({ store: products, sort: { getter: "name", desc: true } }), valueExpr: 'price', displayExpr: 'name' }); });
Angular
TypeScript
HTML
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 ], // ... })
<dx-lookup [dataSource]="lookupDataSource" valueExpr="price" displayExpr="name"> </dx-lookup>
NOTE
Even if you have passed a JavaScript array to the dataSource option, 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.