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:
- editRowKey - the key for the row being edited
- editColumnName - the name of the column being edited
- changes - pending row changes
`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.