DxTreeList.LayoutAutoLoading Event

Fires when the DxTreeList component finishes initialization and starts to load its layout.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Func<TreeListPersistentLayoutEventArgs, Task> LayoutAutoLoading { 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 LayoutAutoLoading event to restore a previously-saved TreeList layout when the component is initialized. The event fires once the component applies its initial state that matches the markup.

Read the TreeList event argument to obtain additional information about the TreeList. Use the Layout argument to customize the layout.

You can obtain an object that stores the TreeList layout in one of the following ways:

• Use the LayoutAutoSaving event’s Layout argument.
• Use the object returned by the SaveLayout() method.
• Create an object that stores the TreeList layout manually and use the Deserialize method to convert the object to the TreeListPersistentLayout type.

Note that when <DxTreeList> loads a layout, the component validates the layout object. If the column collection was modified, the TreeList component does not restore the column layout or column-related settings. The control only loads component-level settings, such as page size or active page index. You need to update the column collection manually.

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