DxFilterBuilder.FilterCriteriaChanged Event

Fires when a user changes filter criteria.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<CriteriaOperator> FilterCriteriaChanged { get; set; }

Parameters

Type	Description
CriteriaOperator	The new FilterCriteria property value.

Remarks

Use the FilterCriteria property to specify filter expression and build the corresponding filter condition. When a user changes filter criteria in the UI, the component raises the FilterCriteriaChanged event. This event is handled automatically when you use two-way data binding for the FilterCriteria property (@bind-FilterCriteria).

The following code snippet binds the Filter Builder to the DevExpress Blazor Grid component using the FilterCriteria property. An Apply button click filters grid data using a DxGrid.SetFilterCriteria method call. A Clear button click clears all filter conditions.

Razor

<DxFilterBuilder @bind-FilterCriteria="FilterCriteria">
    <Fields>
        <DxFilterBuilderField FieldName="ProductName" Caption="Product Name" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="CategoryId" Caption="Category" Type="@typeof(int)">
            <EditSettings>
                <DxComboBoxSettings Data="Categories" ValueFieldName="CategoryId" TextFieldName="CategoryName" />
            </EditSettings>
        </DxFilterBuilderField>
        <DxFilterBuilderField FieldName="SupplierId" Caption="Supplier" Type="@typeof(int)">
            <EditSettings>
                <DxComboBoxSettings Data="Suppliers" ValueFieldName="SupplierId" TextFieldName="CompanyName">
                    <ItemDisplayTemplate>
                        @{
                            var item = (Supplier)context.DataItem;
                        }
                        @item.CompanyName (@item.ContactName)
                    </ItemDisplayTemplate>
                </DxComboBoxSettings>
            </EditSettings>
            <Fields>
                <DxFilterBuilderField FieldName="Supplier.CompanyName" Caption="Company Name" CaptionFullPath="Supplier.Company Name" Type="@typeof(string)" />
                <DxFilterBuilderField FieldName="Supplier.ContactName" Caption="Contact Name" CaptionFullPath="Supplier.Contact Name" Type="@typeof(string)" />
            </Fields>
        </DxFilterBuilderField>
        <DxFilterBuilderField FieldName="UnitPrice" Caption="Unit Price" Type="@typeof(int)" />
        <DxFilterBuilderField FieldName="UnitsInStock" Caption="Units in Stock" Type="@typeof(int)" />
        <DxFilterBuilderField FieldName="QuantityPerUnit" Caption="Quantity per Unit" Type="@typeof(int)" />
        <DxFilterBuilderField FieldName="Discontinued" Type="@typeof(bool)" />
    </Fields>
</DxFilterBuilder>

<div>
    <DxButton Text="Clear" Click="ClearFilterCriteria" RenderStyle="ButtonRenderStyle.Secondary"/>
    <DxButton Text="Apply" Click="ApplyFilterCriteria" />
</div>

<DxGrid @ref="Grid" Data="Data"
        PageSize="15"
        ColumnResizeMode="GridColumnResizeMode.NextColumn"
        TextWrapEnabled="false" VirtualScrollingEnabled="true"
        FilterCriteriaChanged="GridFilterCriteriaChanged"
        FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always">
    <Columns>
        <DxGridDataColumn FieldName="ProductName" MinWidth="100" />
        <DxGridDataColumn FieldName="Category.CategoryName" Caption="Category" MinWidth="100" />
        <DxGridDataColumn FieldName="Supplier.CompanyName" Caption="Company Name" MinWidth="100" />
        <DxGridDataColumn FieldName="Supplier.ContactName" Caption="Contact Name" MinWidth="100" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%" />
        <DxGridDataColumn FieldName="UnitsInStock" Caption="Units in Stock" Width="10%" />
        <DxGridDataColumn FieldName="QuantityPerUnit" Caption="Quantity per Unit" Width="15%" MinWidth="80" />
        <DxGridDataColumn FieldName="Discontinued" Width="10%" MinWidth="90" />
    </Columns>
</DxGrid>

@code {
    IGrid Grid { get; set; }
    object Data { get; set; }
    CriteriaOperator FilterCriteria { get; set; } = CriteriaOperator.Parse("StartsWith([ProductName], 'C') And ([UnitPrice] < 50 Or [Discontinued] = true)");
    IEnumerable<Product> Products { get; set; }
    IEnumerable<Category> Categories { get; set; }
    IEnumerable<Supplier> Suppliers { get; set; }
    List<Category> SelectedCategories { get; set; } = [];
    protected override async Task OnInitializedAsync() {
        Suppliers = await NwindDataService.GetSuppliersAsync();
        Categories = await NwindDataService.GetCategoriesAsync();
        Products = await NwindDataService.GetProductsAsync();
        // ...
    }
    protected override void OnAfterRender(bool firstRender) {
        base.OnAfterRender(false);
        if (firstRender && Grid != null)
            ApplyFilterCriteria();
    }
    void ApplyFilterCriteria() {
        Grid.SetFilterCriteria(FilterCriteria);
    }
    void ClearFilterCriteria() {
        FilterCriteria = null;
        Grid.ClearFilter();
    }
    void GridFilterCriteriaChanged(GridFilterCriteriaChangedEventArgs args) {
        FilterCriteria = args.FilterCriteria;
    }
}

Product.cs

public partial class Product {
    public Product() {
        OrderDetails = new HashSet<OrderDetail>();
    }
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public int? SupplierId { get; set; }
    public int? CategoryId { get; set; }
    public string QuantityPerUnit { get; set; }
    public decimal? UnitPrice { get; set; }
    public short? UnitsInStock { get; set; }
    public short? UnitsOnOrder { get; set; }
    public short? ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public bool InStock => !Discontinued;
    public virtual Category Category { get; set; }
    public virtual Supplier Supplier { get; set; }
    public virtual ICollection<OrderDetail> OrderDetails { get; set; }
}

Supplier.cs

public partial class Supplier {
    public Supplier() {
        Products = new HashSet<Product>();
    }
    public int SupplierId { get; set; }
    public string CompanyName { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
    public string HomePage { get; set; }
    public virtual ICollection<Product> Products { get; set; }
}

Category.cs

public partial class Category {
    public Category() {
        Products = new HashSet<Product>();
    }
    public int CategoryId { get; set; }
    public string CategoryName { get; set; }
    public string Description { get; set; }
    public byte[] Picture { get; set; }
    public virtual ICollection<Product> Products { get; set; }
}

Run Demo: Filter Builder