Configuration Options - Preferences/Settings

Parent Previous Next

In the previous sections, we saw how to enable a basic set of filters, footers, paging, and addition of Print/Export functionality. In this section, we will look into another highly visible feature of the product, user settings and preferences.

Enabling this behavior is quite straightforward.  

<ReactDataGrid id={"grid"} enablePrint enablePreferencePersistence enableExport forcePagerRow enablePaging pageSize={"2"} enableFilters enableFooters >


This will enable the settings and the save settings button buttons like below:  

Clicking on the Settings button shows a popup like this:

Clicking on the Save Settings Button, shows a popup like this:

As should be obvious from the above screen, the settings popup allows you to change the visibility of your columns, visibility of footers and filters, and the page size. The grid headers are sortable, resizable, and re-arrangeable via drag and drop. All of these settings, once changed are usually lost when the user closes the application that uses the product. With the preference persistence mechanism, all these settings can be persisted and loaded in the future when the grid is loaded.

There are a few properties that you should keep in mind for preference persistence:

setPreferencePersistenceKey (or the preferencePersistenceKey property in XML)

The other nice addition in regards to this feature is the ability to save preferences on the server. The grid has a robust persistence preference mechanism that "just works" out of the box, but the preferences are stored on the client machine in the form of LocalStorage by default. This enables the preference persistence mechanism to work without any additional coding on the part of the developers utilizing the library. While this may be sufficient for most people, this will not work in scenarios when the same user uses multiple machines to access your application, or if multiple users access the application using the same machine.  This is where the preferencePersistenceMode comes into play:



String value "server" or "client". When this property is set to client(default), the grid uses local storage on the client to store preference settings. When it is set to server, the grid fires an event, preferencesChanged, which contains a string representation of the preference values. This can then be persisted on the backend, tied to a specific user id.

Default: client


This post discusses the backend implementation: