DxPivotTable.SaveLayout() Method

Returns Pivot Table layout information so you can save it to a variable or a custom storage.

Namespace: DevExpress.Blazor.PivotTable

Assembly: DevExpress.Blazor.PivotTable.v25.1.dll

NuGet Package: DevExpress.Blazor.PivotTable

Declaration

public PivotTablePersistentLayout SaveLayout()

Returns

Type	Description
PivotTablePersistentLayout	A PivotTablePersistentLayout object that stores layout information.

Remarks

The Blazor Pivot Table allows you to save and restore its layout between application work sessions. The layout information includes settings that users can change: field settings (area, area index, sort order, visibility), filter criteria, expanded/collapsed state of rows and columns.

Use the SaveLayout method to save the Pivot Table’s layout on demand. To respond to each layout change automatically, handle the LayoutAutoSaving event.

To restore the saved layout, pass an object returned by the SaveLayout method to any of the following members:

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

The following code snippet displays two buttons: Save Layout and Load Layout. When a user clicks the first button, the current Pivot Table layout is saved to the Layout variable. Once a user clicks the second button, the component loads the most recently saved layout and applies it to the Pivot Table.

Razor

@rendermode InteractiveServer
@using Services

<DxButton Text="Save Layout" Click="OnSaveClick" />
<DxButton Text="Load Layout" Click="OnLoadClick" />

<DxPivotTable Data="SalesData" @ref=MyPivotTable >
    <Fields>
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Region)"
                           Area="@PivotTableArea.Row"
                           AreaIndex="0" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Country)"
                           Area="@PivotTableArea.Row"
                           SortOrder="@PivotTableSortOrder.Descending"
                           AreaIndex="1" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
                           GroupInterval="@PivotTableGroupInterval.DateYear"
                           Area="@PivotTableArea.Column"
                           AreaIndex="0"
                           Caption="Year" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
                           GroupInterval="@PivotTableGroupInterval.DateQuarter"
                           Area="@PivotTableArea.Column"
                           AreaIndex="1"
                           Caption="Quarter" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Amount)"
                           SortOrder="@PivotTableSortOrder.Ascending"
                           Area="@PivotTableArea.Data"
                           SummaryType="@PivotTableSummaryType.Sum" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.City)"
                           Area="@PivotTableArea.Filter"/>
    </Fields>
</DxPivotTable>

@code {
    IPivotTable MyPivotTable { get; set; }
    PivotTablePersistentLayout Layout { get; set; }
    IEnumerable<Sales.SaleInfo> SalesData;
    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
    }
    void OnSaveClick() {
        Layout = MyPivotTable.SaveLayout();
    }
    void OnLoadClick() {
        MyPivotTable.LoadLayout(Layout);
    }
}

Sales.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Sales {
    static IList<SaleInfo> dataSource;

    public class SaleInfo {
        public int OrderId { get; set; }
        public string Region { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public int Amount { get; set; }
        public DateTime Date { get; set; }
    }

    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
        new SaleInfo {
            OrderId = 10248,
            Region = "North America",
            Country = "United States",
            City = "New York",
            Amount = 1740,
            Date = DateTime.Parse("2017/01/06")
        },
        new SaleInfo {
            OrderId = 10249,
            Region = "North America",
            Country = "United States",
            City = "Los Angeles",
            Amount = 850,
            Date = DateTime.Parse("2017/02/13")
        },
        new SaleInfo {
            OrderId = 10250,
            Region = "North America",
            Country = "United States",
            City = "Denver",
            Amount = 2235,
            Date = DateTime.Parse("2017/02/07")
        },
        new SaleInfo {
            OrderId = 10251,
            Region = "North America",
            Country = "Canada",
            City = "Vancouver",
            Amount = 1965,
            Date = DateTime.Parse("2017/03/03")
        },
        new SaleInfo {
            OrderId = 10252,
            Region = "North America",
            Country = "Canada",
            City = "Edmonton",
            Amount = 880,
            Date = DateTime.Parse("2017/03/10")
        },
        new SaleInfo {
            OrderId = 10253,
            Region = "South America",
            Country = "Brazil",
            City = "Rio de Janeiro",
            Amount = 5260,
            Date = DateTime.Parse("2017/01/17")
        },
        new SaleInfo {
            OrderId = 10254,
            Region = "South America",
            Country = "Argentina",
            City = "Buenos Aires",
            Amount = 2790,
            Date = DateTime.Parse("2017/05/21")
        },
        new SaleInfo {
            OrderId = 10255,
            Region = "South America",
            Country = "Paraguay",
            City = "Asuncion",
            Amount = 3140,
            Date = DateTime.Parse("2017/05/01")
        },
        new SaleInfo {
            OrderId = 10256,
            Region = "Europe",
            Country = "United Kingdom",
            City = "London",
            Amount = 6175,
            Date = DateTime.Parse("2017/06/24")
        },
        new SaleInfo {
            OrderId = 10257,
            Region = "Europe",
            Country = "Germany",
            City = "Berlin",
            Amount = 4575,
            Date = DateTime.Parse("2017/06/11")
        },
        new SaleInfo {
            OrderId = 10517,
            Region = "North America",
            Country = "United States",
            City = "New York",
            Amount = 7710,
            Date = DateTime.Parse("2018/07/18")
        },
        new SaleInfo {
            OrderId = 10518,
            Region = "North America",
            Country = "United States",
            City = "Los Angeles",
            Amount = 7975,
            Date = DateTime.Parse("2018/01/10")
        },
        new SaleInfo {
            OrderId = 10519,
            Region = "North America",
            Country = "United States",
            City = "Denver",
            Amount = 3285,
            Date = DateTime.Parse("2018/03/13")
        },
        new SaleInfo {
            OrderId = 10520,
            Region = "North America",
            Country = "Canada",
            City = "Vancouver",
            Amount = 2580,
            Date = DateTime.Parse("2018/04/22")
        },
        new SaleInfo {
            OrderId = 10521,
            Region = "North America",
            Country = "Canada",
            City = "Edmonton",
            Amount = 2160,
            Date = DateTime.Parse("2018/05/26")
        },
        new SaleInfo {
            OrderId = 10522,
            Region = "South America",
            Country = "Brazil",
            City = "Rio de Janeiro",
            Amount = 1100,
            Date = DateTime.Parse("2018/05/25")
        },
        new SaleInfo {
            OrderId = 10523,
            Region = "South America",
            Country = "Argentina",
            City = "Buenos Aires",
            Amount = 4425,
            Date = DateTime.Parse("2018/08/21")
        },
        new SaleInfo {
            OrderId = 10524,
            Region = "South America",
            Country = "Paraguay",
            City = "Asuncion",
            Amount = 1360,
            Date = DateTime.Parse("2018/08/22")
        },
        new SaleInfo {
            OrderId = 10525,
            Region = "Europe",
            Country = "United Kingdom",
            City = "London",
            Amount = 3250,
            Date = DateTime.Parse("2018/11/14")
        },
        new SaleInfo {
            OrderId = 10526,
            Region = "Europe",
            Country = "Germany",
            City = "Berlin",
            Amount = 5550,
            Date = DateTime.Parse("2018/12/21")
        },
    };
}

Run Demo: Save and Restore the Layout

Implements

SaveLayout()