DxTreeList.LayoutAutoSaving Event

Fires when the TreeList layout changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Func<TreeListPersistentLayoutEventArgs, Task> LayoutAutoSaving { get; set; }

Parameters

Type	Description
TreeListPersistentLayoutEventArgs	An object that defines data for this event.

Remarks

The TreeList allows you to save and restore the component’s layout when necessary. You can use SaveLayout() and LoadLayout(TreeListPersistentLayout) methods for this purpose. The saved layout object includes the current page, page size, column sort order/direction, column position, and filter values. Information about row expansion states is not saved.

Handle the LayoutAutoSaving event to save the TreeList’s layout when users change component UI characteristics mentioned above.

Read the TreeList event argument and its members to obtain information about the TreeList. Use Layout argument to obtain the new layout. Keep it in an appropriate storage. You can later pass this object to any of the following members (restore the saved layout):

• The LayoutAutoLoading event’s Layout argument.
• The LoadLayout(TreeListPersistentLayout) method’s parameter.

Important

DevExpress components can incorrectly serialize custom enumeration values in criteria operators. Refer to the following troubleshooting topic for more information: The XXX enumeration type is not registered for the parse operation…

You can use the following approach to implement different default layouts for mobile and desktop devices:

• Save layouts to a database instead of a browser storage in the LayoutAutoSaving event handler.
• In the LayoutAutoLoading event handler, use the DxLayoutBreakpoint component to load the layout based on the screen size.

Example

The following code snippet ensures layout persistence. When the component layout changes, the LayoutAutoSaving event handler saves the updated layout to the browser’s local storage. Once the page is reloaded or restored, the LayoutAutoLoading event handler loads the most recently saved layout from the local storage and applies it to the TreeList component.

@inject IJSRuntime JSRuntime
@using System.Text.Json

<DxButton Text="Reload" Click="ReloadPageButton_ClickAsync" />

<DxTreeList Data="@Data"
            ShowFilterRow="true"
            KeyFieldName="ID" 
            ParentKeyFieldName="ParentID" 
            HasChildrenFieldName="HasChildren"
            LayoutAutoLoading="TreeList_LayoutAutoLoading"
            LayoutAutoSaving="TreeList_LayoutAutoSaving">
    <Columns>
        <DxTreeListDataColumn Caption="Location" FieldName="Name" />
        <DxTreeListDataColumn FieldName="CityType" />
        <DxTreeListDataColumn FieldName="Year" DisplayFormat="d"/>
        <DxTreeListDataColumn FieldName="RecordType" />
        <DxTreeListDataColumn FieldName="Population" />
    </Columns>
</DxTreeList>

@code {
    const string LocalStorageKey = "TreeList-LayoutPersistence-Data";

    async Task TreeList_LayoutAutoLoading(TreeListPersistentLayoutEventArgs e) {
        e.Layout = await LoadLayoutFromLocalStorageAsync();
    }

    async Task TreeList_LayoutAutoSaving(TreeListPersistentLayoutEventArgs e) {
        await SaveLayoutToLocalStorageAsync(e.Layout);
    }

    async Task<TreeListPersistentLayout> LoadLayoutFromLocalStorageAsync() {
        try {
            var json = await JSRuntime.InvokeAsync<string>("localStorage.getItem", LocalStorageKey);
            return JsonSerializer.Deserialize<TreeListPersistentLayout>(json);
        } catch {
            // Mute exceptions for the server prerender stage
            return null;
        }
    }

    async Task SaveLayoutToLocalStorageAsync(TreeListPersistentLayout layout) {
        try {
            var json = JsonSerializer.Serialize(layout);
            await JSRuntime.InvokeVoidAsync("localStorage.setItem", LocalStorageKey, json);
        } catch {
            // Mute exceptions for the server prerender stage
        }
    }

    async Task ReloadPageButton_ClickAsync() {
        await JSRuntime.InvokeVoidAsync("location.reload");
    }

    object Data { get; set; }

    // ...
}

Run Demo: Save and Restore the Layout