Save and Restore Client Layout

• Oct 29, 2020
• 2 minutes to read

ASPxGridView allows you to save the following layout information to a database and then restore it:

• column visible positions;
• grid and column width;
• grid appearance settings;
• filter, group, sort, and pager information.

Use the ASPxGridView.SettingsCookies property to specify which ASPxGridView layout information to save.

Save Layout Automatically

Set the ASPxGridCookiesSettings.Enabled property to true to save a grid layout to cookies automatically.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server">
    <SettingsCookies Enabled="true" />
</dx:ASPxGridView>

Save and Restore Layout Manually

• The ASPxGridBase.ClientLayout event allows you to save a grid’s layout each time a user changes it and restore this layout on the first page load. Use the event’s ASPxClientLayoutArgs.LayoutMode property to specify whether to save or restore the grid’s layout.

  Note

  The grid requires a round trip to the server (a callback) to raise the ASPxGridBase.ClientLayout event.

  This example shows how to save or restore the ASPxGridView layout to or from a data store.

  C#

  protected void ASPxGridView1_ClientLayout(object sender, 
  DevExpress.Web.ASPxClientLayoutArgs e) {
      if (e.LayoutMode == DevExpress.Web.ClientLayoutMode.Saving) {
          SaveUserLayoutToDatabase(userID, "AccountGrid", e.LayoutData);
      }
      else {
          if (System.IO.File.Exists(fileName))
              e.LayoutData = RestoreUserLayoutFromDatabase(userID, "AccountGrid");
      }
  }
  

  VB.NET

  Protected Sub ASPxGridView1_ClientLayout(sender As Object,_
  e As DevExpress.Web.ASPxClientLayoutArgs)
     If e.LayoutMode = DevExpress.Web.ClientLayoutMode.Saving Then
        SaveUserLayoutToDatabase(userID, "AccountGrid", e.LayoutData)
     Else
        If File.Exists(fileName) Then
           e.LayoutData = RestoreUserLayoutFromDatabase(userID, "AccountGrid")
        End If
     End If
  End Sub
  

• The following two methods enable you to save and restore the grid layout.

  • ASPxGridBase.SaveClientLayout - Returns a string that contains the grid’s layout data.
  • ASPxGridBase.LoadClientLayout - Restores the grid’s layout from a specified string, which contains its layout data.

  This example shows how to save and restore the previously saved layout manually. The grid calls the ASPxClientGridView.PerformCallback method to send a callback to the server when a user clicks the Save Layout or Load Layout button. This generates the server-side ASPxGridView.CustomCallback event. Handle this event to save or restore the grid’s layout.

  C#

  protected void ASPxGridView1_CustomCallback(object sender,
      DevExpress.Web.ASPxGridViewCustomCallbackEventArgs e) {
      if (e.Parameters == "save") {
          SaveUserLayoutToDatabase("userID", "GridLayout", ASPxGridView1.SaveClientLayout());
      }
      if (e.Parameters == "load") {
          ASPxGridView1.LoadClientLayout(GetUserLayoutFromDatabase("userID", "GridLayout"));
      }
  }
  

  VB.NET

  Protected Sub ASPxGridView1_CustomCallback(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxGridViewCustomCallbackEventArgs)
      If e.Parameters = "save" Then
          SaveUserLayoutToDatabase("userID", "GridLayout", ASPxGridView1.SaveClientLayout())
      End If
  
      If e.Parameters = "load" Then
          ASPxGridView1.LoadClientLayout(GetUserLayoutFromDatabase("userID", "GridLayout"))
      End If
  End Sub