DevExtreme jQuery - ArrayStore
If you want to extend the functionality of a JavaScript array, place it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.
jQuery
JavaScript
$(function() { $("#treeListContainer").dxTreeList({ dataSource: new DevExpress.data.ArrayStore({ data: employees, onLoaded: function () { // Event handling commands go here } }) }); });
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular"; import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { employees = [ // ... ]; employeeStore = new ArrayStore({ data: this.employees, onLoaded: function () { // Event handling commands go here } }); } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
<dx-tree-list [dataSource]="employeeStore"> </dx-tree-list>
Data kept in the ArrayStore can be processed in the DataSource. For example, the DataSource can sort data.
jQuery
JavaScript
var employees = [ { id: '1', fullName: "John Heart", position: "CEO" }, { id: '1_1', parentId: '1', fullName: "Samantha Bright", position: "COO" }, { id: '1_2', parentId: '1', fullName: "Arthur Miller", position:"CTO" }, { id: '2_1', parentId: '2', fullName: "Robert Reagan", position: "CMO" }, { id: '2', fullName: "Greta Sims", position: "HR Manager" } ]; $(function() { $("#treeListContainer").dxTreeList({ dataSource: new DevExpress.data.DataSource({ store: employees, sort: { getter: "fullName", desc: true } }) }); });
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { employees = [ // ... ]; employeeDataSource = new DataSource({ store: this.employees, sort: { getter: "fullName", desc: true } }); } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
<dx-tree-list [dataSource]="employeeDataSource"> </dx-tree-list>
NOTE
Even if you have passed a JavaScript array to the dataSource option, the TreeList automatically places it into an ArrayStore wrapped in the DataSource that you can get using the getDataSource() method.
See Also
Feedback