Editing entities without breaking the network tab (part 5/5)
This is the final step of our example for implementing batch editing with the Ignite UI for Angular Grid control and Web API. You may find the previous step, in which we have updated the Angular application to work with the Web API, here.
Step 5: Send the request to the server and update the database
We are beginning the final section of this tutorial. Congratulations!
Make sure the Web API is up and running. Then run the application that we have created using the Ignite UI CLI (execute the ig start command in a terminal inside the root folder of the project) or refresh the page if the application is already running.
When the page loads, you would see the IgxGrid is populated with the data from our database.
Let us make some changes and see if the database would be updated correctly.
First, we are going to update an existing record. Double click the Population cell on the third row (“Galapagar”) and change the value to 40 000. Press “Done”.
We see the style of the cell is updated to provide a visual clue that the value is changed but not yet saved.
Next, we are going to delete an existing record. Click the “DELETE” button for the second record (“Collado Villalba”).
Again, we see an indication that the record is deleted but this action is still not saved. At this moment, we are still able to undo those operations, as they are not sent to the server.
Finally, we will add a new record to the grid. Click the “ADD ROW” button. A new record is created with the default properties values we have provided in our component’s addRow() method. We should update this record with meaningful data.
Double click the Population cell in the new record and enter “173000”. Change the City Name to “Getafe”. Double click the Train Station cell and check the checkbox. Finally, update the Description cell with “One of the most industrialized cities in the Madrid area”.
After all those changes are made, click the “COMMIT” button. A modal dialog window that contains a summary of all the executed transactions is shown. We see we have a single update transaction, also a delete transaction and an add transaction. Everything looks as expected so we click the “COMMIT” button to send those request to the server in a single POST request.
We see the dialog closes and the updated records are available in the grid. The cell styles show that there are no pending changes — all the transactions were successfully saved in the database. We may refresh our page and would see the very same records get from the server.
Well, that is it! We have a working application created with Ignite UI CLI, which takes advantage of the IgxGrid that implements batch updating feature. It sends all the updates from the client-side to a Web API with EF in a single request, which is processed on the backend and the database is updated.
You may get the whole example on GitHub and explore it or expand it even further.
Thank you for following me through this tutorial! If you have any questions or if you find an issue with the example code — please let me know in the comments or create an issue on GitHub!
Have fun with Ignite UI for Angular!
