Save and Restore Client Layout

• Aug 29, 2023
• 2 minutes to read

The ASPxTreeList allows you to save information on its layout to a database, and then restore it. This information can include column width and visible position, expanded nodes, selection and paging information. To specify what information on the ASPxTreeList layout should be saved, use options provided by the ASPxTreeList.SettingsCookies property.

Automatic Layout Saving/Restoring

The ASPxTreeList ASPxTreeList.ClientLayout event enables you to save the tree list’s layout each time it is being changed, and restore it on first page load. This event provides the ASPxClientLayoutArgs.LayoutMode property that indicates whether the tree list’s layout should be saved or restored.

This example shows how to save/restore the ASPxTreeList’s layout to/from a data store.

C#

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

VB.NET

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

Manual Layout Saving/Restoring

The ASPxTreeList provides two methods that enable you to manually save and restore its layout. These are:

• ASPxTreeList.SaveClientLayout - returns a string that contains ASPxTreeList layout data.
• ASPxTreeList.LoadClientLayout - restores the ASPxTreeList layout from the specified string that contains its layout data.

This example shows how to manually save and restore the previously saved layout. When the Save Layout or Load Layout button is clicked, the tree list’s client ASPxClientTreeList.PerformCallback method is used to send a callback to the server. This generates the server-side ASPxTreeList.CustomCallback event, which is handled to save or restore the tree list’s layout.

C#

protected void ASPxTreeList1_CustomCallback(object sender,
DevExpress.Web.ASPxTreeList.TreeListCustomCallbackEventArgs e) {
    if (e.Parameters == "save") {
        SaveUserLayoutToDatabase("userID", "TreeListLayout", ASPxTreeList1.SaveClientLayout());
    }
    if (e.Parameters == "load") {
        ASPxTreeList1.LoadClientLayout(GetUserLayoutFromDatabase("userID", "TreeListLayout"));
    }
}

VB.NET

Protected Sub ASPxTreeList1_CustomCallback(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxTreeList.TreeListCustomCallbackEventArgs)
    If e.Parameters = "save" Then
        SaveUserLayoutToDatabase("userID", "TreeListLayout", ASPxTreeList1.SaveClientLayout())
    End If

    If e.Parameters = "load" Then
        ASPxTreeList1.LoadClientLayout(GetUserLayoutFromDatabase("userID", "TreeListLayout"))
    End If
End Sub

Example: How to store a focused node key in cookies

function OnFocusedNodeChanged(s, e) {
    ASPxClientUtils.SetCookie(s.name + '_focudedKey', s.GetFocusedNodeKey());
}
function OnInit(s, e){ 
    if(ASPxClientUtils.GetCookie(s.name+'_focudedKey')!=null)
        s.SetFocusedNodeKey(ASPxClientUtils.GetCookie(s.name+'_focudedKey')); 
}

<dx:ASPxTreeList ID="ASPxTreeList1" runat="server" AutoGenerateColumns="False" DataSourceID="ads" 
    KeyFieldName="EmployeeID" ParentFieldName="ReportsTo"  >
    <SettingsBehavior AllowFocusedNode="true" AutoExpandAllNodes="true" />
    <ClientSideEvents Init="OnInit" FocusedNodeChanged="OnFocusedNodeChanged" />
    <Columns>
        <dx:TreeListTextColumn FieldName="LastName" />
        <dx:TreeListTextColumn FieldName="FirstName" />
        <dx:TreeListTextColumn FieldName="Title" />
        <dx:TreeListTextColumn FieldName="TitleOfCourtesy" />
        <dx:TreeListDateTimeColumn FieldName="BirthDate" />
        <dx:TreeListDateTimeColumn FieldName="HireDate" />
        <dx:TreeListTextColumn FieldName="Address" />
        <dx:TreeListTextColumn FieldName="City" />
        <dx:TreeListTextColumn FieldName="Region" />
    </Columns>
</dx:ASPxTreeList>