DevExtreme jQuery/JS - 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.

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

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.

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

Local Array

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