Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGridDataColumn.FilterMenuTemplate Property

Specifies a template used to display the column’s filter menu.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#Property Value

Type Description
RenderFragment<GridDataColumnFilterMenuTemplateContext>

The template for the column filter menu.

#Remarks

Use the FilterMenuTemplate property to define a template for the column filter menu.

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

Note

The GetDataItemsAsync() method cannot obtain unique values from a column whose data items do not implement IComparable type. If you call the method for such a column, an error may occur.

To define a common column filter menu template for all Grid columns, use the DxGrid.DataColumnFilterMenuTemplate property.

Run Demo: Column Filter Menu View Example: Implement a date range filter

The following code snippet creates custom ranges for the Order Date and Total column’s filter menu:

<DxGrid Data="GridData"
    FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate" Width="140px">
            <FilterMenuTemplate>
                <DateRange FilterContext="context" />
            </FilterMenuTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" MinWidth="100" />
        <DxGridDataColumn FieldName="CategoryId" Caption="Category" Width="130px">
            <EditSettings>
                <DxComboBoxSettings Data="Categories" ValueFieldName="CategoryId" TextFieldName="CategoryName" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" Width="140px" />
        <DxGridDataColumn FieldName="Quantity" Width="110px" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" Width="110px" />
        <DxGridDataColumn FieldName="Total"
                          UnboundType="GridUnboundColumnType.Decimal"
                          UnboundExpression="[UnitPrice] * [Quantity] * (1 - [Discount])"
                          DisplayFormat="c2"
                          Width="110px">
            <FilterMenuTemplate>
                <CustomRange FilterContext="context" Items="TotalPriceIntervals" />
            </FilterMenuTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Shipped"
                          UnboundType="GridUnboundColumnType.Boolean"
                          UnboundExpression="[ShippedDate] <> Null"
                          Width="100px" />
    </Columns>
</DxGrid>
@code {
    static IReadOnlyList<CustomRangeFilterItem> TotalPriceIntervals { get; } = CreateTotalPriceIntervals();

    object GridData { get; set; }
    IReadOnlyList<Category> Categories { get; set; }

    protected override async Task OnInitializedAsync() {
        Categories = (await NwindDataService.GetCategoriesAsync()).ToList();

        var invoices = await NwindDataService.GetInvoicesAsync();
        var products = await NwindDataService.GetProductsAsync();
        GridData = invoices.Join(products, i => i.ProductId, p => p.ProductId, (i, p) => {
            return new {
                ProductName = i.ProductName,
                CategoryId = p.CategoryId,
                OrderDate = i.OrderDate,
                UnitPrice = i.UnitPrice,
                Quantity = i.Quantity,
                Discount = i.Discount,
                ShippedDate = i.ShippedDate
            };
        });
    }

    static IReadOnlyList<CustomRangeFilterItem> CreateTotalPriceIntervals() {
        var prop = new OperandProperty("Total");
        var result = new List<CustomRangeFilterItem>();

        var step = 100M;
        for(var i = 0; i < 10; i++) {
            var start = step * i;
            var end = start + step;

            result.Add(new() {
                Criteria = prop >= start & prop < end,
                DisplayText = $"from {start:c} to {end - 0.01M:c}"
            });
        }
        result.Add(new() {
            Criteria = prop > 1000,
            DisplayText = $"> {1000:c}"
        });

        return result;
    }
}

Grid Filter Menu Template

For more information about templates in the Grid component, refer to the following topic: Templates in Blazor Grid.

#Implements

See Also