DevExtreme jQuery/JS - Local Array
To bind a UI component to a local array, pass this array to the UI component's dataSource property. We recommend that you also set the keyExpr property OR the valueExpr and displayExpr properties, depending on your UI component:
index.js
- $(function() {
- const employees = [
- { ID: 1, FirstName: "Sandra", LastName: "Johnson" },
- { ID: 2, FirstName: "James", LastName: "Scott" },
- { ID: 3, FirstName: "Nancy", LastName: "Smith" }
- ];
- $("#dataGridContainer").dxDataGrid({
- dataSource: employees,
- keyExpr: "ID"
- });
- $("#selectBoxContainer").dxSelectBox({
- dataSource: employees,
- valueExpr: "ID",
- displayExpr: (item) => item && item.FirstName + ' ' + item.LastName
- });
- });
If you plan to update the data or need to handle data-related events, wrap the array in an ArrayStore. You can use the store's key property instead of the UI component's keyExpr or valueExpr. You can further wrap the ArrayStore in a DataSource if you need to filter, sort, group, and otherwise shape the data.
The following example declares an ArrayStore, wraps it in a DataSource, and binds the DataGrid and SelectBox UI components to this DataSource:
index.js
- $(function() {
- // ...
- const employeesStore = new DevExpress.data.ArrayStore({
- data: employees,
- key: "ID",
- onLoaded: function() {
- // ...
- }
- });
- const employeesDataSource = new DevExpress.data.DataSource({
- store: employeesStore,
- sort: "LastName"
- });
- $("#dataGridContainer").dxDataGrid({
- dataSource: employeesDataSource
- });
- $("#selectBoxContainer").dxSelectBox({
- dataSource: employeesDataSource,
- displayExpr: (item) => item && item.FirstName + ' ' + item.LastName
- });
- });
NOTE
If you pass a JavaScript array to a UI component's dataSource property, the UI component automatically places it in an ArrayStore that is wrapped in a DataSource. You can then call the getDataSource() method to get this DataSource.
Feedback