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

Properties

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

Events

  • 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

Utils

The applyChanges function applies an array of changes to a source data array.
DevExpress.data.applyChanges(data, 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:
Angular:
// app.component.html

<dx-data-grid
  keyExpr="ID"
  [dataSource]="data"
  (onSaving)="onSaving($event)" 
>
  <dxo-editing 
    mode="batch"
    [allowUpdating]="true"
    [(changes)]="changes"
    [(editRowKey)]="editRowKey"
    [(editColumnName)]="editColumnName"
  ></dxo-editing>
// app.component.ts

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

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

  onSaving(e) {
    // apply changes to local data
    applyChanges(this.data, 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.

Feedback

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 Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
No Comments

Please login or register to post comments.