DevExtreme DataSource
DevExtreme Data Layer components can perform two types of data operations: shaping (sorting, filtering, grouping) and modification (creation, update, deletion).
Data Shaping
Data shaping is implemented by the DataSource component and its methods. To call them, get a DataSource instance from your UI component using the getDataSource() method. Alternatively, you can use a standalone instance saved in a constant/component property when you created the DataSource.
The following code obtains a DataSource instance using both approaches and calls one of the data shaping methods—filter(filterExpr). Such methods only set up data shaping settings. To apply them, the load() method is called.
jQuery
$(function() { var dataSource = new DevExpress.data.DataSource({ // ... // DataSource is configured here // ... }); // ===== or getting a DataSource from the UI component (DataGrid here) ===== var dataSource = $("#dataGridContainer").dxDataGrid("getDataSource"); // ===== applying a filter ===== dataSource.filter(['age', '>', 18]); dataSource.load(); });
Angular
Using a standalone DataSource instance
app.component.tsimport { Component } from '@angular/core'; import DataSource from 'devextreme/data/data_source'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { dataSource: DataSource; constructor() { this.dataSource = new DataSource({ // ... // DataSource is configured here // ... }); } filter() { this.dataSource.filter(['age', '>', 18]); this.dataSource.load(); } }
Getting a DataSource instance from the UI component (DataGrid here)
app.component.tsimport { Component } from '@angular/core'; import { DxDataGridComponent } from 'devextreme-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; // Prior to Angular 8 // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent; filter() { const dataSource = this.dataGrid.instance.getDataSource(); dataSource.filter(['age', '>', 18]); dataSource.load(); } }
Vue
Using a standalone DataSource instance
App.vue<template> <!-- ... --> </template> <script> import DataSource from 'devextreme/data/data_source'; const dataSource = new DataSource({ // ... // DataSource is configured here // ... }); export default { data() { return { dataSource } }, methods: { filter() { dataSource.filter(['age', '>', 18]); dataSource.load(); } } } </script>
Getting a DataSource instance from the UI component (DataGrid here)
App.vue<template> <DxDataGrid ... ref="myDataGrid"> </DxDataGrid> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxDataGrid from 'devextreme-vue/data-grid'; export default { components: { DxDataGrid }, data() { return { // ... } }, methods: { filter() { const dataSource = this.$refs['myDataGrid'].instance.getDataSource(); dataSource.filter(['age', '>', 18]); dataSource.load(); } } } </script>
React
Using a standalone DataSource instance
App.jsimport React from 'react'; import DataSource from 'devextreme/data/data_source'; const dataSource = new DataSource({ // ... // DataSource is configured here // ... }); class App extends React.Component { filter() { dataSource.filter(['age', '>', 18]); dataSource.load(); } render() { return ( {/* ... */} ); } } export default App;
Getting a DataSource instance from the UI component (DataGrid here)
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DataGrid from 'devextreme-react/data-grid'; class App extends React.Component { constructor(props) { super(props); this.dataGridRef = React.createRef(); } filter() { const dataSource = this.dataGridRef.current.instance.getDataSource(); dataSource.filter(['age', '>', 18]); dataSource.load(); } render() { return ( <DataGrid ... ref={this.dataGridRef}> </DataGrid> ); } } export default App;
Data Modification
Data modification is implemented by the store and its methods. To call them, you need a store instance that you can get using the DataSource's store() method.
Stores provide three data modification methods: insert(values), update(key, values), and remove(key). Use them to edit local and remote data. Call the DataSource's reload() method afterwards to update data in the DataSource.
jQuery
$(function() { var dataSource = new DevExpress.data.DataSource({ // ... }); var store = dataSource.store(); store.insert({ id: 1, name: "John Doe" }) .done(function (dataObj, key) { dataSource.reload(); }) .fail(function (error) { /* ... */ }); store.update(1, { name: "John Smith" }) .done(function (dataObj, key) { dataSource.reload(); }) .fail(function (error) { /* ... */ }); store.remove(1) .done(function (key) { dataSource.reload(); }) .fail(function (error) { /* ... */ }); });
Angular
import { Component } from '@angular/core'; import DataSource from 'devextreme/data/data_source'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { dataSource: DataSource; constructor() { this.dataSource = new DataSource({ // ... }); const store = this.dataSource.store(); store.insert({ id: 1, name: "John Doe" }) .then( (dataObj) => { this.dataSource.reload(); }, (error) => { /* ... */ } ); store.update(1, { name: "John Smith" }) .then( (dataObj) => { this.dataSource.reload(); }, (error) => { /* ... */ } ); store.remove(1) .then( (key) => { this.dataSource.reload(); }, (error) => { /* ... */ } ); } }
Vue
<template> <!-- ... --> </template> <script> import DataSource from 'devextreme/data/data_source'; const dataSource = new DataSource({ // ... }); export default { // ... mounted() { const store = dataSource.store(); store.insert({ id: 1, name: "John Doe" }) .then( (dataObj) => { dataSource.reload(); }, (error) => { /* ... */ } ); store.update(1, { name: "John Smith" }) .then( (dataObj) => { dataSource.reload(); }, (error) => { /* ... */ } ); store.remove(1) .then( (key) => { dataSource.reload(); }, (error) => { /* ... */ } ); } } </script>
React
import React from 'react'; import DataSource from 'devextreme/data/data_source'; const dataSource = new DataSource({ // ... }); class App extends React.Component { constructor(props) { super(props); const store = dataSource.store(); store.insert({ id: 1, name: "John Doe" }) .then( (dataObj) => { dataSource.reload(); }, (error) => { /* ... */ } ); store.update(1, { name: "John Smith" }) .then( (dataObj) => { dataSource.reload(); }, (error) => { /* ... */ } ); store.remove(1) .then( (key) => { dataSource.reload(); }, (error) => { /* ... */ } ); } // ... } export default App;
See Also
Local Array
jQuery
Change the array using standard methods and reassign it to the dataSource property using the option(optionName, optionValue) method.
var fruits = [ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 } ]; fruits.push({ fruit: 'Pineapples', count: 3 }); $("#chartContainer").dxChart("option", "dataSource", fruits);
See Also
Angular
Ensure that one- or two-way binding is used to bind the dataSource property to the array. Then, use standard methods to change the array. This updates the UI component automatically.
<dx-chart ... [dataSource]="fruits"> </dx-chart>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { fruits = [ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 } ]; addPineapple() { this.fruits.push({ fruit: 'Pineapples', count: 3 }); } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxChartModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxChartModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
See Also
Vue
Ensure that one- or two-way binding is used to bind the dataSource property to the array. In Vue 2 applications, use standard methods to change the array. This updates the UI component automatically. In Vue 3 applications, create a new array and assign it to the data-bound property to replace the previous array:
<template> <DxChart ... :data-source="fruits"> </DxChart> </template> <script> import DxChart from 'devextreme-vue/chart'; export default { components: { DxChart }, data() { return { fruits: [ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 } ] } }, methods: { addPineapple() { // Vue 2 this.fruits.push({ fruit: 'Pineapples', count: 3 }); // Vue 3 this.fruits = [...this.fruits, { fruit: 'Pineapples', count: 3 }]; } } } </script>
See Also
React
Store the array in the state and pass it to the dataSource property. When you need to modify the array, create a new array and use this.setState
to save it in the state. Do not use standard array modification methods, such as push()
or pop()
. They modify the original array, and thus violate the rules of React state updates.
import React from 'react'; import Chart from 'devextreme-react/chart'; class App extends React.Component { constructor(props) { super(props); this.state = { fruits: [ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 } ] } } addPineapple() { this.setState(prevState => { const pineapple = { fruit: 'Pineapples', count: 3 }; return { fruits: [...prevState.fruits, pineapple] } }); } render() { return ( <Chart ... dataSource={this.state.fruits}> </Chart> ); } } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.