Preserve Grid State Using Local Data Storage

Preserving the grid state to local storage is very helpful, in cases where connection to the server is lost, but you want to continue working offline with the Grid. If the browser has support for local storage, then you can take advantage of it to save crucial data required to work with the gird offline.

In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows preserve grid state by using the local data storage.

In this example, the grid has some data and option to sort and filter it using inline filtering. Whenever a sorting order changes or a new filter parameters are applied, the current state of the Grid is saved in the browser local storage. So, when page reloads the data that is saved is used to refresh the grid and continue working from previous state.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Save Grid Data in Local Storage

Although many modern browsers have support for local storage, there may be other restrictions, like for private use only or there is a limit on data that you can keep. Because of this, if you are working with thousands or rows you cannot save the grid data in full in the local storage (in most cases this is not required). However, you can keep some data that may help you to restore the grid state and continue working with the grid data.

As an example, you can store columns with all their settings for data formats currently in use, sort order, filtering parameters etc. This is possible, because in general column objects don't occupy to much of memory space, even if you have hundreds of columns.

How to Keep Sorting Data in Local Storage

To use local storage is simple; you can check in code if that option is available and create a name under which you can save specific grid data. For example, when column is clicked, the grid data is sorted and in local storage, you can keep the sort order and the current sorting column.

To apply this, you need to handle the columnClick event that is fired whenever the grid column is clicked. In this event handler, you can set the clicked column as sorting column and change the sorting order from None to Ascending or Descending. If the same column is clicked again, only the sorting order changes. Therefore, whenever column is clicked, we are saving the column object and the sort order in the local storage under the name of 'grid-data'.

• JavaScript
• Angular
• React
• Vue

When saving data in the local storage, you need to convert it to a string. For this purpose, you can use JSON.stringify method.

In similar way, you can save other information about the current grid state, for example, current filtering that is in use.

How to Save Grid Filtering Parameters in Local Storage

This example demonstrates inline filtering feature of the grid, where in the first row there are input fields under each column where you can enter the values by which grid data is filtered. In addition, you can choose the filtering operation, by which data is filtered. There are different operations depending on the data type: string, number or dates.

To filter the grid data, in the input field under column, you can enter the filter value and press ENTER to the filter the data. Whenever grid data is filtered, the filterChanged event is fired. You can handle this event in your code and save the current filtering operation, value and parameters used in local storage.

You can use the same name in the local storage by which grid data is saved. So at first, check out whether there is some data already present. If it is, just add grid columns and save the new data under the same name.

• JavaScript
• Angular
• React
• Vue

Although filterChanged event data contains information about column object an filtering parameters used, because inline filtering is enabled and grid data can be filtered by each column inclusively, it's much easier to keep all grid columns in the local storage.

Now with all this set, every time when grid is sorted by a new column or is filtered by a different column or even different filter values or operations, these events will fire. When it happens, the current grid data is saved in the browser local storage.

How to Load Grid State from Local Storage

If you reload the page, the grid will refresh to its initial state. Because we have already saved the grid state from the previous session, we can just check whether local storage have some data saved, if that's the case, just refresh the grid using this preserved data. This is done when page loads initially.

Related: How to Convert JSON Data into Grid Component

In this example, if there is sorting information (sort order and by which column data is sorted) in preserved data, it is applied to the grid and all columns already saved in the grid are recreated and attached to the grid columns property.

• JavaScript
• Angular
• React
• Vue

Of course, if you are adding or removing columns in the grid, you need to save the grid state in those cases also, by simply handling add/remove column events and keep currently columns in use.

Conclusion

Using Local Storage can help you save the grid state in the client and continue working with the grid data offline. This is very useful when connections to the server breaks, and when back online you can update the grid state using information from the server and current grid state already saved in the client.

Because of restrictions set by the browser concerning local storage, you can only keep partial grid data. In most cases, only information that is crucial to continue working with the Grid offline, like sorting, filtering, new values of grid cells during editing etc.

This example has code available in JavaScript, Angular, React and Vue. It can help you to see how you use local storage feature to save the grid data in different frameworks. The Grid is part of IntegralUI Web, a suite of native web components that you can use to develop web applications for any JavaScript frameworks.