DevExtreme DataSource
DevExtreme Data Layer components can perform two types of data operations: shaping (sorting, filtering, grouping) and modification (creation, update, deletion).
Data Shaping
The DataSource object implements data shaping methods. You can call these methods on DataSource variables and UI component DataSource instances. To get a component DataSource instance, call getDataSource().
The following code demonstrates the filter(filterExpr) data shaping method on a component DataSource instance and a DataSource variable. After shaping a component DataSource, call the load() method to apply your shaping operations:
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.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.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.