Optimized way of saving gridster item params to database.

[imSurya-georgian]

Undoubtedly this is an awesome package. Three different options i can think of in order to save.

1. on Item Change calling a httpService by posting updated gridster item params to it. Problem
   1. In the large dashboard with so many widgets, if we change one tile then lot of other tiles will also change resulting in multiple httpService Calls for one widget movement.
2. Calling httpService in ngOnDestroy because on destroying the dashboard component and user moving to another place, can post the updated array to server. Problem
   1. Instead of user moving to another component if he/she closes the entire web app at once results in loss of layout information.
3. Adding a recurring httpService Call to update array to server in intervals.
4. Using Local Storage to track the change in gridster items before pushing them to server.

Please let me know what could be the best approach or how you have implemented.

[austenstone]

I would set a boolean to true when the grid changes.

Use canDeactivate on the route to prevent the user from leaving the page. Put a popup that asks the user if they want to save their changes.

Don't hit the database more than it needs to. You already know it's ideal to do this once during onDestroy but that's not guaranteed to work.

[imSurya-georgian]

Thanks, @astone2014. I can implement something around canDeactivate property but I want to implement UI in such a way where user interaction is not needed to save the layout.

[tiberiuzuld]

Hello @astone2014 , You could make a debounce on the Item Change and then make one request to backend with all the widgets that changed position or with all of them.

[tmtron]

You can also use browser events, e.g.

• beforeunload event
• pagehide event

But note that these are not 100% reliable - eg. on mobile