GridFilterBuilderTemplateContext.FilterCriteria Property

Specifies filter criteria applied to grid data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public CriteriaOperator FilterCriteria { get; set; }

Property Value

Type	Description
CriteriaOperator	The current filter criteria.

Remarks

Specify a FilterBuilderTemplate to customize the filter builder dialog in the Grid component. Implement two-way data binding between context.FilterCriteria and DxFilterBuilder.FilterCriteria properties to synchronize Filter Builder and Grid components.

Read Tutorial: Filter Panel and Filter Builder Run Demo: Filter Builder Customization

Example

The following code snippet customizes the filter builder dialog as follows:

• Displays the applied filter condition above the Filter Builder component
• Limits available logical operators to And and Or
• Adds a Country filter field

Razor

@inject NwindDataService NwindDataService

<DxGrid Data="Data"
        FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
        FilterPanelDisplayMode="GridFilterPanelDisplayMode.Always">
    <Columns>
        <DxGridDataColumn FieldName="SalesPerson" Caption="Salesperson">
            <EditSettings>
                <DxComboBoxSettings Data="Salespersons" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridBandColumn Caption="Order">
            <Columns>
                <DxGridDataColumn FieldName="CompanyName" />
                <DxGridDataColumn FieldName="OrderDate" Caption="Date" />
                <DxGridBandColumn Caption="Product">
                    <Columns>
                        <DxGridDataColumn FieldName="ProductName" Caption="Name">
                            <EditSettings>
                                <DxComboBoxSettings Data="ProductNames" />
                            </EditSettings>
                        </DxGridDataColumn>
                        <DxGridDataColumn FieldName="UnitPrice" />
                    </Columns>
                </DxGridBandColumn>
                <DxGridDataColumn FieldName="Quantity" />
            </Columns>
        </DxGridBandColumn>
    </Columns>
    <FilterBuilderTemplate>
        <b>Currently Applied Filter:</b> @(context.Grid.GetFilterCriteria()?.ToString() ?? "No filter")
        <DxFilterBuilder @bind-FilterCriteria="context.FilterCriteria" 
            GroupOperatorTypes="[FilterBuilderGroupOperatorType.And, FilterBuilderGroupOperatorType.Or]">
            <Fields>
                @context.RenderDefaultFields()
                <DxFilterBuilderField FieldName="ShipCountry" Caption="Country"
                    CaptionFullPath="Shipping Info.Country">
                    <EditSettings>
                        <DxComboBoxSettings Data="ShipCountries" />
                    </EditSettings>
                </DxFilterBuilderField>
            </Fields>
        </DxFilterBuilder>
    </FilterBuilderTemplate>
</DxGrid>

@code {
    object Data { get; set; }

    IEnumerable<string> Salespersons { get; set; }
    IEnumerable<string> ProductNames { get; set; }
    IEnumerable<string> ShipCountries { get; set; }

    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        var customers = await NwindDataService.GetCustomersAsync();

        var invoiceList = invoices.ToList();
        Salespersons = invoiceList.Select(i => i.Salesperson)
                              .Where(s => !string.IsNullOrWhiteSpace(s)).Distinct().OrderBy(s => s).ToList();
        ProductNames = invoiceList.Select(i => i.ProductName)
                              .Where(s => !string.IsNullOrWhiteSpace(s)).Distinct().OrderBy(s => s).ToList();
        ShipCountries = invoiceList.Select(i => i.ShipCountry)
                              .Where(s => !string.IsNullOrWhiteSpace(s)).Distinct().OrderBy(s => s).ToList();

        Data = invoiceList.OrderBy(i => i.OrderDate).Join(customers, i => i.CustomerId, c => c.CustomerId, 
            (i, c) => { return new {
                CompanyName = c.CompanyName,
                SalesPerson = i.Salesperson,
                UnitPrice = i.UnitPrice,
                OrderDate = i.OrderDate,
                ProductName = i.ProductName,
                Quantity = i.Quantity,
                ShipCountry = i.ShipCountry,
                ShipCity = i.ShipCity,
                ShipName = i.ShipName
            };
        });
    }
}

Invoice

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public class Invoice {
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }
        public string CustomerId { get; set; }
        public string CustomerName { 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 Salesperson { get; set; }
        public int OrderId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipperName { get; set; }
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }
        public decimal? ExtendedPrice { get; set; }
        public decimal? Freight { get; set; }
    }
}

Customer

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public partial class Customer {
        public Customer() {
            Orders = new HashSet<Order>();
        }

        public string CustomerId { 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 virtual ICollection<Order> Orders { get; set; }
    }
}

NwindDataService.Invoices

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Northwind;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class NwindDataService {
        public Task<IEnumerable<Invoice>> GetInvoicesAsync(CancellationToken ct = default) {
            // Return your data here
        }
        public Task<IEnumerable<Customer>> GetCustomersAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}

Program.cs

// ...
builder.Services.AddScoped<NwindDataService>();