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 widget 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.
Using a standalone DataSource instance
app.component.ts- 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({
- // ...
- // DataSource is configured here
- // ...
- });
- }
- filter() {
- this.dataSource.filter(['age', '>', 18]);
- this.dataSource.load();
- }
- }
Getting a DataSource instance from the widget (DataGrid here)
app.component.ts- import { 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();
- }
- }
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.
- 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) => { /* ... */ }
- );
- }
- }
See Also
Angular
Ensure that one- or two-way binding is used to bind the dataSource option to the array. Then, use standard methods to change the array. This updates the widget 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 option to the array. Then, use standard methods to change the array. This updates the widget automatically.
- <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() {
- this.fruits.push({ fruit: 'Pineapples', count: 3 });
- }
- }
- }
- </script>
See Also
React
Store the array in the state and pass it to the dataSource option. 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;
jQuery
Change the array using standard methods and reassign it to the dataSource option 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.