DxFilterBuilder.FilterCriteriaChanged Event

Fires when filter criteria changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.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. To respond to filter criteria changes, handle 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