Skip to main content
All docs
V24.1

GridDataColumnFilterMenuTemplateContext.HierarchicalDateView Property

Specifies whether filter menu displays dates as a hierarchy.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public RenderFragment HierarchicalDateView { get; }

Property Value

Type Description
RenderFragment

Visual representation of filter menu values.

Remarks

Default filter menu displays DateTime and DateTime? values hierarchically. You can also use the ListView property to display dates as a plain list.

Dates filter menu

Hierarchical filter menu treats filter items as dates and does not convert them to strings. That is why a column with a hierarchical filter menu does not support filtering by display text.

The following code snippet adds space after the caption and restores default filter menu functionality:

<DxGrid Data="GridData"
        FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate">
            <FilterMenuTemplate>
                <div class="pt-3">
                    @context.HierarchicalDateView
                </div>
            </FilterMenuTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" MinWidth="100" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
        <DxGridDataColumn FieldName="Total"
                          UnboundType="GridUnboundColumnType.Decimal"
                          UnboundExpression="[UnitPrice] * [Quantity] * (1 - [Discount])"
                          DisplayFormat="c2" />
    </Columns>
</DxGrid>

@code {
    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
            };
        });
    }
}

Custom hierarchical filter menu

See Also