Skip to main content
All docs
V25.1

DxPivotTableField.FilterMenuTemplate Property

Specifies a template used to display the field’s Filter Menu in the Pivot Table.

Namespace: DevExpress.Blazor.PivotTable

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

NuGet Package: DevExpress.Blazor.PivotTable

Declaration

[Parameter]
public RenderFragment<PivotTableFieldFilterMenuTemplateContext> FilterMenuTemplate { get; set; }

Property Value

Type Description
RenderFragment<PivotTableFieldFilterMenuTemplateContext>

The template content.

Remarks

Use the FilterMenuTemplate property to define a template for the field’s Filter Menu.

The FilterMenuTemplate accepts a PivotTableFieldFilterMenuTemplateContext object as the context parameter. This parameter allows you to do the following:

To define a common filter menu template for all fields, use the DxPivot.FieldFilterMenuTemplate property.

Run Demo: Field Filter Menu

The following code customizes filter menus for the MPGCity and MPGHighway fields:

<DxPivotTable Data="@PivotData">
    <Fields>
       <DxPivotTableField Field="@nameof(VehiclesData.TrademarkItem.MPGCity)"
                            Name="@MPGCityName"
                            Area="@PivotTableArea.Filter">
            <FilterMenuTemplate>
                <MPGCustomFiltersList FilterMenuContext="context" Filters="@MPGCityFilterItems"></MPGCustomFiltersList>
            </FilterMenuTemplate>
        </DxPivotTableField>
        <DxPivotTableField Field="@nameof(VehiclesData.TrademarkItem.MPGHighway)"
                            Name="@MPGHighwayName"
                            Area="@PivotTableArea.Filter">
            <FilterMenuTemplate>
                <MPGCustomFiltersList FilterMenuContext="context" Filters="@MPGHighwayFilterItems"></MPGCustomFiltersList>
            </FilterMenuTemplate>
        </DxPivotTableField>
    </Fields>
</DxPivotTable>

@code {
    IPivotTable PivotTable { get; set;}
    IEnumerable<VehiclesData.TrademarkItem> PivotData { get; set; }
    IReadOnlyList<MPGCustomFilterItem> MPGCityFilterItems { get; set; }
    IReadOnlyList<MPGCustomFilterItem> MPGHighwayFilterItems { get; set; }
    protected override async Task OnInitializedAsync() {
        PivotData = await VehiclesDataProvider.GetDataAsync(1000, NumberOfDaysToDisplay);
        MPGCityFilterItems = GetMPGCityFilterItems();
        MPGHighwayFilterItems = GetMPGHighwayFilterItems();
        dataLoadedTcs.TrySetResult(true);
    }
    IReadOnlyList<MPGCustomFilterItem> GetMPGCityFilterItems() {
        return new List<MPGCustomFilterItem> {
            new MPGCustomFilterItem { Text = "High",
                                      Key = 0,
                                      FilterCriteria = CriteriaOperator.Parse($"[{MPGCityName}]>25") },
            new MPGCustomFilterItem { Text = "Medium",
                                      Key = 1,
                                      FilterCriteria = CriteriaOperator.Parse($"[{MPGCityName}]>=15 AND [{MPGCityName}]<=25") },
            new MPGCustomFilterItem { Text = "Low",
                                      Key = 2,
                                      FilterCriteria = CriteriaOperator.Parse($"[{MPGCityName}]<15") }
        };
    }
    IReadOnlyList<MPGCustomFilterItem> GetMPGHighwayFilterItems() {
        return new List<MPGCustomFilterItem> {
            new MPGCustomFilterItem { Text = "High",
                                      Key = 3,
                                      FilterCriteria = CriteriaOperator.Parse($"[{MPGHighwayName}]>30") },
            new MPGCustomFilterItem { Text = "Medium",
                                      Key = 4,
                                      FilterCriteria = CriteriaOperator.Parse($"[{MPGHighwayName}]>=20 AND [{MPGHighwayName}]<=30") },
            new MPGCustomFilterItem { Text = "Low",
                                      Key = 5,
                                      FilterCriteria = CriteriaOperator.Parse($"[{MPGHighwayName}]<20") }
        };
    }
}

Implements

See Also