DevExtreme jQuery - 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() {
$("#tagBoxContainer").dxTagBox({
dataSource: new DevExpress.data.ArrayStore({
data: products,
onLoaded: function() {
// Event handling commands go here
}
}),
valueExpr: 'price',
displayExpr: 'name'
});
});Angular
TypeScript
HTML
import ArrayStore from "devextreme/data/array_store";
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
products = [ /* ... */ ];
productsStore: ArrayStore = new ArrayStore({
data: this.products,
onLoaded: function () {
// Event handling commands go here
}
});
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})
<dx-tag-box
[dataSource]="productsStore"
valueExpr="price"
displayExpr="name">
</dx-tag-box>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() {
$("#tagBoxContainer").dxTagBox({
dataSource: new DevExpress.data.DataSource({
store: products,
sort: { getter: "name", asc: true }
}),
valueExpr: 'price',
displayExpr: 'name'
});
});Angular
TypeScript
HTML
import DataSource from "devextreme/data/data_source";
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
products = [
{ name: "HD Video Player", price: 100 },
{ name: "SuperHD Video Player", price: 420 },
{ name: "SuperPlasma 50", price: 1500 },
{ name: "SuperLED 50", price: 200 }
];
productsDataSource: DataSource = new DataSource({
store: this.products,
sort: { getter: "name", asc: true }
});
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})
<dx-tag-box
[dataSource]="productsDataSource"
valueExpr="price"
displayExpr="name">
</dx-tag-box>NOTE
Even if you have passed a JavaScript array to the dataSource option, the TagBox automatically places it into an ArrayStore wrapped into the DataSource you can get with the getDataSource() method.
See Also
Feedback