Array Only
To bind the DataGrid to an array, pass this array to the dataSource option.
jQuery
JavaScript
var books = [ { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' }, { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi' }, { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction' } ]; $(function(){ $("#gridContainer").dxDataGrid({ dataSource: books }); });
Angular
TypeScript
HTML
import { DxDataGridModule } from 'devextreme-angular'; // ... export class AppComponent { books = [ { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' }, { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi' }, { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction' } ]; } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
<dx-data-grid [dataSource]="books"> </dx-data-grid>
If objects in the array need to be processed (sorted or filtered), you can create a Query. For example, in the following code, a Query sorts objects in the books
array in the descending order by the author
field and selects objects with a title
containing 'it'.
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: DevExpress.data.query(books) .filter("title", "contains", "it") .sortBy("author", true) .toArray() }); });
Angular
TypeScript
HTML
import { DxDataGridModule } from 'devextreme-angular'; import query from 'devextreme/data/query'; // ... export class AppComponent { books = [ { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' }, // ... ]; getSortedAndFilteredBooks () { return query(this.books) .filter("title", "contains", "it") .sortBy("author", true) .toArray(); } } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
<dx-data-grid [dataSource]="getSortedAndFilteredBooks()"> </dx-data-grid>
See Also
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.