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() { $("#gridContainer").dxDataGrid({ dataSource: new DevExpress.data.ArrayStore({ data: books, onLoaded: function () { // Event handling commands go here } }) }); });
Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular"; import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { books = [ /* ... */ ]; bookStore = new ArrayStore({ data: this.books, onLoaded: function () { // Event handling commands go here } }); } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
<dx-data-grid [dataSource]="bookStore"> </dx-data-grid>
Data kept in the ArrayStore can be processed in the DataSource. For example, the DataSource can sort data.
jQuery
JavaScript
var books = [{ author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' }, // ... ]; $(function() { $("#gridContainer").dxDataGrid({ dataSource: new DevExpress.data.DataSource({ store: books, sort: { getter: "title", desc: true } }) }); });
Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { books = [ /* ... */ ]; bookDataSource = new DataSource({ store: this.books, sort: { getter: "fullName", desc: true } }); } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
<dx-data-grid [dataSource]="bookDataSource"> </dx-data-grid>
NOTE
Even if you have passed a JavaScript array to the dataSource option, the DataGrid automatically places it into the ArrayStore wrapped in the DataSource that you can get using the getDataSource() method.
See Also
Feedback