Multiple records are added, updated and deleted locally in grid with ability to undo and redo any number of times.
All the changes are committed to the server in a single transaction.
Server returns the updated rows along with primary key values (Product ID) for new inserted rows.
Grid posts a consolidated list ( in saveChanges function in our example ) to the server
irrespective of the server side environment.
This list is obtained by API call grid.getChanges({ format: 'byVal' })
This list is an object comprising of 3 further lists.
list: {
addList: [{field1: value1, field2, value2,...}, {field1: value1, field1: value2}, ...],
deleteList: [{id: 10}, {id: 29},....],
updateList: [{id: 3, field1: value1, field2, value2,...}, {id: 7, field1: value1, field1: value2}, ...]
}
id is the primary key name of records which is ProductID in our example.
Open your browser developer network console to see the log of sample request and response.
Server side processes the received list and sends it back as response in this format.
Difference between request and response lies in addList in which id of the new rows are added by server side code.
Repetition of records in other lists serve as confirmation to grid.commit() method
that the records were processed successfully by the server.
list: {
addList: [{id: 1000, field1: value1, field2, value2,...}, {id: 1001, field1: value1, field1: value2}, ...],
deleteList: [{id: 10}, {id: 29},....],
updateList: [{id: 3, field1: value1, field2, value2,...}, {id: 7, field1: value1, field1: value2}, ...]
}
This example is for Batch editing with local paging or when no paging is used.
In case of remote paging, please refer to this example: Batch editing with remote paging and for infinite scrolling, please refer to this example: Batch editing with infinite scrolling