DxPivotTable.ShowFieldList(DialogDisplayOptions) Method

Displays the Field List and positions it based on specified display options.

Namespace: DevExpress.Blazor.PivotTable

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

NuGet Package: DevExpress.Blazor.PivotTable

Declaration

public void ShowFieldList(
    DialogDisplayOptions dialogOptions
)

Parameters

Name	Type	Description
dialogOptions	DialogDisplayOptions	An object that contains the Field List’s display options.

Remarks

The Pivot Table includes a Field List that allows users to manage component structure:

• Reorder fields within each area. This action modifies a field’s AreaIndex property value.
• Move fields across different areas. This action modifies a field’s Area property value.
• Display or hide fields. The Hidden Fields list shows hidden fields. To display a field, users must drag the field to the desired area’s field list. This action modifies a field’s Visible property value.
• Change field sort order. When a user hovers the mouse pointer over a field name in the list, the sort glyph appears next to the field name. A user can click the glyph to change the sort order. The sort glyph and the filter menu button remain visible when users change the sort order or applies filters in the component or Field List. If a user resets the sort order and filters to their default state, the glyph and button disappear.
• Apply field filters. When a user hovers a mouse pointer over a field name in the list, the filter menu button appears next to the field name. This button invokes the Filter Menu that allows users to select or clear the desired field values. The sort glyph and the filter menu button remain visible if a user changed the sort order or applies filters in the component or Field List. If a user resets the sort order and filters to their default state, the glyph and button disappear.
• Defer layout update. When the corresponding checkbox is enabled, the Pivot Table layout is not updated after each customization. Instead, changes are applied only when the user clicks the Update button.

To display the Field List, call the ShowFieldList() or ShowFieldList(DialogDisplayOptions) method. The following code invokes the Field List at the target point:

Razor

@rendermode InteractiveServer

<DxButton Text="Show Field List" Click="OnShowFieldList"/>

<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; }
    IEnumerable<Sales.SaleInfo> SalesData;
    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
    }
    void OnShowFieldList() {
        MyPivotTable.ShowFieldList(new DialogDisplayOptions(new System.Drawing.Point(100, 100)));
    }
}

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: Pivot Table - Field Customization

Implements

ShowFieldList(DialogDisplayOptions)