Save and Restore the Layout


The DevExpress Grid for Blazor allows you to save its layout between application work sessions. The saved information includes settings that end users can change: column position, sort order and direction, current page number, filter values, and grouped columns.

To save and restore the component layout, handle the following events:

  • LayoutAutoSaving — Raised when the layout settings change. The event's e.Layout argument contains a GridPersistentLayout object with updated layout settings. Save this object to desired storage (in this demo, the browser's local storage is used). When you need to restore the Grid layout, retrieve the object from the storage and apply it to the Grid (for example, in the LayoutAutoLoading event handler).
  • LayoutAutoLoading — Raised when the Grid is initialized. The component starts loading the layout after it applies the initial state specified in the markup. To load layout settings from a previously saved GridPersistentLayout object, assign it to this event's e.Layout argument.

You can also call the SaveLayout and LoadLayout methods to save and restore the Grid layout on demand (for example, on a button click).

In this demo, changes that you make persist after a page reload. Reorder and regroup columns, apply filters, switch between pages, and change the page size. Then, click the Reload Page button above the Grid and ensure that your changes persist. If you want to reset the layout to the state specified in the markup, click Reset Layout.