DevExtreme Angular - Update Data

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.

  • 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();
    • }
    • }

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.

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) => { /* ... */ }
  • );
  • }
  • }
See Also

Local Array

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