DevExtreme Data Grid & Tree List - Data Editing API Enhancements (v21.1)

DevExtreme Team Blog
06 April 2021
DevExtreme v21.1 will address a series of user requests and add a new data editing API to our Data Grid and Tree List components (these capabilities were available as a CTP in v20.2). This new API allows you to manage updated/inserted/deleted rows via declarative bindings (for Angular, React and Vue applications). You can use this API to implement your own logic (to save or process modified records) via our onSaving, onSaved, onEditCanceling and onEditCanceled event handlers. We've also added an applyChanges utility function to make it easier to apply a changeset to the original data array.

New API Members


The following properties allow you to access the edit state of a row:
`changes` is an array of objects with the following fields:
  • type - `insert`, `update`, or `remove`
  • data - the row's updated data fields
  • key - the row's key


  • onSaving - a callback function that is executed before edited data is saved
  • onSaved - a callback function that is executed after edited data is saved
  • onEditCanceling - a callback function that is called before editing is canceled
  • onEditCanceled - a callback function that is called after editing is canceled


The applyChanges function applies an array of changes to a source data array., changes, { keyExpr, immutable });
  • data - original data array
  • changes - changes to be applied to the original data array
  • keyExpr - the key property name
  • immutable - if true (default), applyChanges returns a new array instead of modifying the original array

How It Works

Our Data Grid and Tree List manage their edit states automatically. If you need additional control over the editing or data modification process, you can use our new API members to customize built-in behaviors/functionality. The editRowKey, editColumnName, and changes properties allow you to change internal edit state via two-way bindings. You can access and change these properties in code at runtime.
For instance, you can implement a custom `onSaving` handler to disable our built-in save logic (set the `cancel` field of the event handler’s argument to `true`) and send pending changes to the server manually with appropriate custom logic. If the server successfully saves changes, you can apply them to your local data using the new applyChanges helper function (to reflect the changes in the component UI).
The following code snippet implements this specific use case:
// app.component.html

// app.component.ts

export class AppComponent {
  data: any[];
  editRowKey: any;
  editColumnName: string;
  changes: Array<any>;

  constructor(service: Service) { = service.getData();
    this.editRowKey = null;
    this.editColumnName = null;
    this.changes = [];

  onSaving(e) {
    // apply changes to local data
    applyChanges(, this.changes, {
      keyExpr: 'ID',
      immutable: false

    this.editRowKey = null;
    this.editColumnName = null;
    this.changes = [];
    e.cancel = true;

Try It Live

Both our Edit State Management and Batch Update Request demos demonstrate these API enhancements in action.


As always, we look forward to your feedback. Please share your thoughts below or post a support ticket in the DevExpress Support Center. We also want to give you the ability to add a new record in a custom DataGrid or TreeList position/location. If you are interested in this type of functionality, please engage us on GitHub: DataGrid and TreeList - New record position.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
No Comments

Please login or register to post comments.