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