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

index.js

$(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.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 UI component (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();
    }
}

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.js

import 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.js

import 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

index.js

$(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

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({
            // ...
        });

        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

App.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

App.js

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;

Local Array

jQuery

Change the array using standard methods and reassign it to the dataSource property using the option(optionName, optionValue) method.

JavaScript

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);

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.

app.component.html

app.component.ts

app.module.ts

<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 { }

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:

App.vue

<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>

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.

App.js

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;

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - Update Data

DevExtreme DataSource

Data Shaping

jQuery

Angular

Vue

React

Data Modification

jQuery

Angular

Vue

React

See Also

Local Array

jQuery

See Also

Angular

See Also

Vue

See Also

React