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