Skip to main content
All docs
V25.1
  • DxTreeList.LayoutAutoSaving Event

    Fires when the TreeList layout changes.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.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 expanded 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):

    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.

    Treelist - Auto Load and Save the Layout

    @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

    See Also