Skip to main content

Save and Restore Client Layout

  • 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.

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");

Manual Layout Saving/Restoring

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

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.

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"));

Example: How to store a focused node key in cookies

function OnFocusedNodeChanged(s, e) {
    ASPxClientUtils.SetCookie( + '_focudedKey', s.GetFocusedNodeKey());
function OnInit(s, e){ 
<dx:ASPxTreeList ID="ASPxTreeList1" runat="server" AutoGenerateColumns="False" DataSourceID="ads" 
    KeyFieldName="EmployeeID" ParentFieldName="ReportsTo"  >
    <SettingsBehavior AllowFocusedNode="true" AutoExpandAllNodes="true" />
    <ClientSideEvents Init="OnInit" FocusedNodeChanged="OnFocusedNodeChanged" />
        <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" />