FilterBuilderViewMode Enum

Lists filter expression view modes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

Declaration

public enum FilterBuilderViewMode

Members

Name	Description
Visual	Users can build/edit filter conditions using a tree view only.
VisualAndText	Users can build/edit filter conditions using both a tree view and a built-in text editor.

Related API Members

The following properties accept/return FilterBuilderViewMode values:

• DxFilterBuilder.ViewMode

Remarks

Set the ViewMode property to VisualAndText to display the built-in text editor where users can modify filter expressions (in addition to a tree view).

Run Demo: Filter Builder - View Mode

The following code snippet disables the Apply button if a user enters an invalid filter expression in the text area:

<DxFilterBuilder @ref="@FilterBuilderRef"
                 @bind-FilterCriteria="@FilterCriteria"
                 ViewMode="@ViewMode">
    <Fields>
        <DxFilterBuilderField FieldName="ProductName" Caption="Product Name" Type="@typeof(string)"/>
        <DxFilterBuilderField FieldName="CategoryId" Caption="Category" Type="@typeof(int)">
            @* ... *@
        </DxFilterBuilderField>
        <DxFilterBuilderField FieldName="SupplierId" Caption="Supplier" Type="@typeof(int)">
            @* ... *@
            <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>

<DxCheckBox @bind-Checked="@ShowTextEditor">Text Editor</DxCheckBox>
<DxButton Text="Clear" Click="ClearFilterCriteria" />
<DxButton Text="Apply" Enabled="@IsApplyButtonEnabled"/>

@code {
    CriteriaOperator FilterCriteria { get; set; }
    DxFilterBuilder FilterBuilderRef { get; set; }
    bool ShowTextEditor { get; set; }
    bool IsApplyButtonEnabled { get; set; } = true;
    IEnumerable<Category> Categories { get; set; }
    IEnumerable<Supplier> Suppliers { get; set; }

    FilterBuilderViewMode ViewMode => ShowTextEditor ? FilterBuilderViewMode.VisualAndText :
                                                       FilterBuilderViewMode.Visual;

    protected override async Task OnInitializedAsync() {
        // ...
        FilterCriteria = CriteriaOperator.Parse("StartsWith([ProductName], 'C') And
                                                 ([UnitPrice] < 50 Or [Discontinued] = true)");
    }

    protected override void OnAfterRender(bool firstRender) {
        base.OnAfterRender(false);

        if(firstRender) {
            FilterBuilderRef.GetEditContext().OnValidationStateChanged += HandleValidationStateChanged;
        }
    }

    private void HandleValidationStateChanged(object? sender, ValidationStateChangedEventArgs e) {
        var isValid = FilterBuilderRef.GetEditContext().GetValidationMessages();
        IsApplyButtonEnabled = !isValid.Any();

        StateHasChanged();
    }

    void ClearFilterCriteria() {
        FilterCriteria = null;
    }
}