Save and Restore Client Layout

• Nov 29, 2023
• 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 that contains its layout data.

The example below shows how to save and restore the previously saved layout manually. When a user clicks the Save Layout or Load Layout button, the grid calls the ASPxClientGridView.PerformCallback method to send a callback to the server. This method raises 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

Online Examples

View Example: How to save/load the ASPxGridView's ClientLayout Data and choose them from the ASPxListBox

View Example: How to implement custom saving in XML and restoring of ASPxGridView client layout