Filter Operators in Blazor Filter Builder

Jan 20, 2026
10 minutes to read

The DevExpress Blazor Filter Builder ships with the following operators:

Logical operators used to combine filter conditions (And, Or, NotAnd, and NotOr).
Filter operators used to build filter expressions.

Run Demo: Filter Builder - Operator Customization

This article contains information about built-in filter operators and describes how to access, manage, and customize operator collections or individual items.

Built-In Filter Operators

The DxFilterBuilder component stores all available filter operators in the FilterBuilderOperatorType enumeration:

Criteria operators (for example, Equals, Is between, Contains, Is Today)
Aggregate functions (Exists, Count, Avg, Sum, Min, Max)

Criteria Operators

When a user creates or changes a filter condition, the DxFilterBuilder component populates operator lists with items based on associated data types. The table below lists data types and supported criteria operators.

String

Numeric

Enum

Equals | Does not equal Is any of | Is none of Is blank | Is not blank

Boolean

Equals | Does not equal Is blank | Is not blank |

DateTime, DateOnly

TimeOnly

Aggregate Functions

The Filter Builder component displays aggregate operators for fields that store object collections (the DxFilterBuilderField.IsCollection property is true). Aggregate functions calculate collection summaries and allow users to create filter conditions based on the aggregated results. For example, users can filter out invoices containing fewer than 5 items in the Products * field.

Run Demo: Filter Builder - Collection Fields and Aggregate Operators

The following aggregate functions are available:

ExistsReturns true if the collection contains at least one field (object).CountCalculates the number of fields (objects) in the collection.AverageCalculates the average of all values in the collection.SumCalculates the total sum of all values in the collection.MinimumReturns the minimum value in the collection.MaximumReturns the maximum value in the collection.

The following code snippet defines an Orders collection field:

razor

<DxFilterBuilder @bind-FilterCriteria="FilterCriteria">
    <Fields>
        <DxFilterBuilderField FieldName="ProductName" Caption="Product" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="UnitPrice" Caption="Unit Price" Type="@typeof(decimal)" />
        <DxFilterBuilderField FieldName="UnitsInStock" Caption="Units In Stock" Type="@typeof(int)" />
        <DxFilterBuilderField FieldName="Orders" Caption="Orders" IsCollection="true">
            <Fields>
                <DxFilterBuilderField FieldName="OrderDate" Caption="Order Date" Type="@typeof(DateTime?)" />
                <DxFilterBuilderField FieldName="CustomerName" Caption="Customer" Type="@typeof(string)" />
                <DxFilterBuilderField FieldName="Quantity" Caption="Quantity" Type="@typeof(int)" />
            </Fields>
        </DxFilterBuilderField>
    </Fields>
</DxFilterBuilder>

Access Filter Operators

The DxFilterBuilder.CustomizeOperators event allows you to change operator lists or access/customize individual filter operators. Handle the event and use its Operators argument to access operator collections. You can obtain an item by its type.

You can also use the FieldName or FieldType argument property to access collections associated with a specific data field or type.

razor

<DxFilterBuilder CustomizeOperators="CustomizeOperators">
    <Fields>
        <DxFilterBuilderField FieldName="Subject" Caption="Name" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="CreatedDate" Caption="Created Date" Type="@typeof(DateTime)" />
        <DxFilterBuilderField FieldName="Amount" Caption="Amount" Type="@typeof(int)" />
    </Fields>
</DxFilterBuilder>

@code {
    void CustomizeOperators(FilterBuilderCustomizeOperatorsEventArgs args) {
        if(args.FieldType == typeof(DateTime)) {
            // Obtains a predefined operator item by its type
            FilterBuilderOperatorItem equalOperator = args.Operators[FilterBuilderOperatorType.Equals];
        }
    }
}

Add Filter Operators

Call the Operators.Add(item) or Operators.Insert(position, item) method in a CustomizeOperators event handler to add items to operator collections. The FilterBuilderOperatorType enumerator contains all built-in filter operators.

razor

<DxFilterBuilder CustomizeOperators="CustomizeOperators">
    <Fields>
        <DxFilterBuilderField FieldName="Subject" Caption="Name" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="CreatedDate" Caption="Created Date" Type="@typeof(DateTime)" />
        <DxFilterBuilderField FieldName="Amount" Caption="Amount" Type="@typeof(int)" />
    </Fields>
</DxFilterBuilder>

@code {
    void CustomizeOperators(FilterBuilderCustomizeOperatorsEventArgs args) {
        if(args.FieldType == typeof(DateTime)){

            FilterBuilderOperatorItem equalOperator = args.Operators[FilterBuilderOperatorType.Equals];
            FilterBuilderOperatorItem anyOperator = args.Operators[FilterBuilderOperatorType.AnyOf];

            args.Operators.Clear();

            // Inserts the Equal operator item at the end of the collection
            args.Operators.Add(equalOperator);
            // Inserts the DoesNotEqual operator item at the end of the collection using the constructor
            args.Operators.Add(new FilterBuilderOperatorItem(FilterBuilderOperatorType.DoesNotEqual));

            // Inserts the AnyOf operator item at the first position in the collection
            args.Operators.Insert(0, anyOperator);
            // Inserts the NoneOf operator item at the second position in the collection using the constructor
            args.Operators.Insert(1, new FilterBuilderOperatorItem(FilterBuilderOperatorType.NoneOf));
        }
    }
}

Note

The Filter Builder validates item collections for each field type and hides unsupported operator items (even if you add these items in a CustomizeOperators event handler).

Add Custom Functions

The DevExpress Blazor Filter Builder component supports custom criteria functions. Follow the steps below to use a custom operator item in the Filter Builder:

Create a custom filter function - a class that implements one of the following interfaces:

Pass the function class to the CriteriaOperator.RegisterCustomFunction method to register the function and make it available in filter expressions.
Pass the function name to the FilterBuilderOperatorItem(String) constructor to create a new operator item in the Filter Builder component.
Add the item to the collection using the Operators.Add(item) or Operators.Insert(position, item) method.
Optional. Specify the item’s GroupName property (refer to the Manage Groups section for additional information).

Razor
CustomFunction.cs
Program.cs

razor

<DxFilterBuilder CustomizeOperators="CustomizeOperators">
    <Fields>
        <DxFilterBuilderField FieldName="Subject" Caption="Name" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="CreatedDate" Caption="Created Date" Type="@typeof(DateTime)" />
        <DxFilterBuilderField FieldName="Amount" Caption="Amount" Type="@typeof(int)" />
    </Fields>
</DxFilterBuilder>

@code {
    void CustomizeOperators(FilterBuilderCustomizeOperatorsEventArgs args) {
        if(args.FieldType == typeof(DateTime)) {
            FilterBuilderOperatorItem customItem =
                new FilterBuilderOperatorItem(IsEarlierThisMonth.Instance.Name) {
                GroupName = "Custom Functions"
            };
            args.Operators.Add(customItem);
        }
    }
}

csharp

using DevExpress.Data.Filtering;

class IsEarlierThisMonth : ICustomFunctionOperator, ICustomFunctionDisplayAttributes {
    public static IsEarlierThisMonth Instance { get; } = new IsEarlierThisMonth();

    public static void Register() => CriteriaOperator.RegisterCustomFunction(Instance);
    public static bool Unregister() => CriteriaOperator.UnregisterCustomFunction(Instance);

    private IsEarlierThisMonth() { }

    public string Name => nameof(IsEarlierThisMonth);
    public string DisplayName => "Is earlier this month";
    public object Image => null;
    public int MinOperandCount => 1;
    public int MaxOperandCount => -1;
    public string Description => "Function description";
    public FunctionCategory Category => FunctionCategory.DateTime;

    public object Evaluate(params object[] operands) {
        DateTime dateTime;
        if(operands[0] is DateOnly dateOnly)
            dateTime = dateOnly.ToDateTime(TimeOnly.MinValue);
        else
            dateTime = Convert.ToDateTime(operands[0]);
        DateTime today = DateTime.Today;
        DateTime startOfMonth = new DateTime(today.Year, today.Month, 1);
        return dateTime >= startOfMonth && dateTime < today;
    }

    public bool IsValidOperandCount(int count) => count == 1;

    public bool IsValidOperandType(int operandIndex, int operandCount, Type type) => type == typeof(DateTime) || type == typeof(DateOnly);

    public Type ResultType(params Type[] operands) => typeof(bool);

}

csharp

// ...
IsEarlierThisMonth.Register();
// ...
app.Run();

Once you create a custom function, you can obtain its name using the FilterBuilderOperatorItem.Name property. The FilterBuilderOperatorItem.OperatorType property returns the CustomFunction enumeration value.

Remove Filter Operators

Call one of the following methods to remove operators from collections:

Operators.Remove(item)Removes the specified operator.Operators.Remove(operator type)Removes the operator with the specified type.Operators.RemoveAt(index)Removes the operator with the specified index.Operators.ClearRemoves all operators.

razor

<DxFilterBuilder CustomizeOperators="CustomizeOperators">
    <Fields>
        <DxFilterBuilderField FieldName="Subject" Caption="Name" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="CreatedDate" Caption="Created Date" Type="@typeof(DateTime)" />
        <DxFilterBuilderField FieldName="Amount" Caption="Amount" Type="@typeof(int)" />
    </Fields>
</DxFilterBuilder>

@code {
    void CustomizeOperators(FilterBuilderCustomizeOperatorsEventArgs args) {
        if(args.FieldType == typeof(DateTime)){

            FilterBuilderOperatorItem sameDateItem = args.Operators[FilterBuilderOperatorType.IsSameDay];
            // Removes the specified item
            args.Operators.Remove(sameDateItem);

            // Removes the item with the specified type
            args.Operators.Remove(FilterBuilderOperatorType.IsBeyondThisYear);

            // Removes the first item
            args.Operators.RemoveAt(0);

            // Removes all items
            args.Operators.Clear();
        }
    }
}

Customize Filter Operator Presentation

You can also use the Filter Builder component’s CustomizeOperators event to modify operator groups, change default operators, and customize captions/icons.

Manage Groups

The Filter Builder allows you to arrange filter operators into groups. Built-in operators automatically belong to Basic Comparison and Date Ranges groups. For DateTime and DateOnly data types, groups are visible. For other data types, groups are hidden.

Use the ShowGroups event argument to control group visibility. If enabled, custom functions appear in separate groups with empty captions (names).

Use the FilterBuilderOperatorItem.GroupName property to change group names for individual operators.

The following example hides group names for the DateType field type, displays groups for the Amount field, and changes the group caption for Is blank and Is not blank operators:

razor

<DxFilterBuilder CustomizeOperators="CustomizeOperators">
    <Fields>
        <DxFilterBuilderField FieldName="Subject" Caption="Name" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="CreatedDate" Caption="Created Date" Type="@typeof(DateTime)" />
        <DxFilterBuilderField FieldName="Amount" Caption="Amount" Type="@typeof(int)" />
    </Fields>
</DxFilterBuilder>

@code {
    void CustomizeOperators(FilterBuilderCustomizeOperatorsEventArgs args) {
        if(args.FieldType == typeof(DateTime)) {
            // Hides groups for the DateTime field type
            args.ShowGroups = false;
        }

        if(args.FieldName == "Amount") {
            // Displays groups for the Amount field
            args.ShowGroups = true;
            // Changes the group name for IsNull and IsNotNull operator items
            foreach(var item in args.Operators) {
                if(item.OperatorType == FilterBuilderOperatorType.IsNull ||
                   item.OperatorType == FilterBuilderOperatorType.IsNotNull) {
                    item.GroupName = "Unary Operators";
                }
            }
        }
    }
}

Note that custom functions appear in separate groups with empty captions unless you specify the GroupName property.

Change the Default Operator

When a user creates a filter condition, the Filter Builder populates the operator list with items, and then selects the default item. Use the DefaultOperator event argument to change the default operator:

razor

<DxFilterBuilder CustomizeOperators="CustomizeOperators" >
    <Fields>
        <DxFilterBuilderField FieldName="Subject" Caption="Name" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="CreatedDate" Caption="Created Date" Type="@typeof(DateTime)" />
        <DxFilterBuilderField FieldName="Amount" Caption="Amount" Type="@typeof(int)" />
        <DxFilterBuilderField FieldName="Discontinued" Type="@typeof(bool)" />
    </Fields>
</DxFilterBuilder>

@code {
    void CustomizeOperators(FilterBuilderCustomizeOperatorsEventArgs args) {
        if(args.FieldType == typeof(int)) {
            args.Operators.Clear();
            args.Operators.Add(new FilterBuilderOperatorItem(FilterBuilderOperatorType.Equals));
            args.Operators.Add(new FilterBuilderOperatorItem(FilterBuilderOperatorType.Greater));
            args.Operators.Add(new FilterBuilderOperatorItem(FilterBuilderOperatorType.Less));
            args.DefaultOperator = args.Operators[FilterBuilderOperatorType.Less];
            args.ShowGroups = true;
        }
    }
}

Note

If a user selects a non-default operator and then changes a field for this condition, the Filter Builder preserves the selected operator (instead of selecting the default operator). If you remove the default item from the collection, the component automatically selects the first item in the list.

Customize Captions

The Filter Builder uses operator captions to display corresponding filter operators in drop-down lists and resulting filter criteria. The FilterBuilderOperatorType enumeration lists all built-in operators and their captions. Custom functions inherit their captions from the ICustomFunctionDisplayAttributes.DisplayName property. Use an item’s Caption property to customize the operator caption.

razor

<DxFilterBuilder CustomizeOperators="CustomizeOperators" >
    <Fields>
        <DxFilterBuilderField FieldName="Subject" Caption="Name" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="CreatedDate" Caption="Created Date" Type="@typeof(DateTime)" />
        <DxFilterBuilderField FieldName="Amount" Caption="Amount" Type="@typeof(int)" />
    </Fields>
</DxFilterBuilder>

@code {
    void CustomizeOperators(FilterBuilderCustomizeOperatorsEventArgs args) {
        if(args.FieldType == typeof(DateTime)) {
            FilterBuilderOperatorItem thisMonthItem = args.Operators[FilterBuilderOperatorType.IsThisMonth];
            thisMonthItem.Caption = "Falls in this month";
        }
    }
}

Add or Customize Icons

The Filter Builder allows you to add or customize icons for individual operator items. You can use the following properties:

IconUrlSpecifies the URL of the operator item icon.IconCssClassSpecifies the name of the CSS class applied to the operator item icon.

DevExpress Blazor components support pre-defined icon sets (such as Iconic or Bootstrap-recommended libraries) and custom icon libraries. Refer to the following topic for additional information: Icons.

The following code snippet modifies the operator collection for the DateTime data type and uses icons to customize item appearance:

Razor
CSS

razor

<DxFilterBuilder CustomizeOperators="CustomizeOperators">
    <Fields>
        <DxFilterBuilderField FieldName="Subject" Caption="Name" Type="@typeof(string)" />
        <DxFilterBuilderField FieldName="CreatedDate" Caption="Created Date" Type="@typeof(DateTime)" />
        <DxFilterBuilderField FieldName="Amount" Caption="Amount" Type="@typeof(int)" />
    </Fields>
</DxFilterBuilder>

@code {
    void CustomizeOperators(FilterBuilderCustomizeOperatorsEventArgs args) {
        if(args.FieldType == typeof(DateTime)) {
            args.Operators.Clear();
            args.Operators.Add(new FilterBuilderOperatorItem(FilterBuilderOperatorType.IsOctober) {
                IconCssClass = "october-icon"
            });
            args.Operators.Add(new FilterBuilderOperatorItem(FilterBuilderOperatorType.IsNovember) {
                IconUrl = "../images/november.png"
            });
            args.Operators.Add(new FilterBuilderOperatorItem(FilterBuilderOperatorType.IsDecember) {
                IconUrl = "https://cdn-icons-png.freepik.com/16/6606/6606304.png"
            });
            args.Operators.Add(new FilterBuilderOperatorItem(FilterBuilderOperatorType.IsThisYear) {
                IconCssClass = "oi oi-calendar"
            });
        }
    }
}

css

.october-icon {
    width: 16px;
    height: 16px;
    background-image: url("../images/october.png");
}