Best Practices for saving and error states

Tags: #<Tag:0x00007efc6020cac0> #<Tag:0x00007efc6020c958>

What is the recommended way to indicate that a cell is being saved via remote XHR? Is a spinner recommended? Also, what is the best way to display a server error being returned after an individual cell update?

The documentation here https://handsontable.com/docs/javascript-data-grid/saving-data/#save-changes-using-a-callback does not give examples of how handle individual cell save states and callbacks.

Do you have a better example?

Thanks

Hi @jed

Handsontable is a purely front-end library. We do not want to be involved in the back-end related processes and limit our users so we do ot have many examples that show how to handle that part of development.

Now to indicate that a cell is being saved via remote XHR with Handsontable, you can use a spinner. It’s a common and effective way to show that something is happening in the background. The afterLoadData() hook may help you as it indicates that the whole data is loaded to the table.

For displaying a server error after an individual cell update, you can consider showing a pop-up message or a notification near the affected cell. This will inform the user about the error and allow them to take appropriate action. Generally, while conducting some testing some time ago I found Toaster libraries to be the best pick, but you can also use Handsontable build-in comments. Here’s an example with a cell validator https://jsfiddle.net/w82euLkj/ (as I believe you’d like to set a validator with the same criteria as those in the database).

And the example at https://handsontable.com/docs/javascript-data-grid/saving-data/#save-changes-using-a-callback shows how to save/load the whole dataset but the same hook trigger for each change in the table so you can use it to update the server with a single cell value alteration.