DxFilterBuilder.ViewMode Property

Specifies the filter expression view mode.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public FilterBuilderViewMode ViewMode { get; set; }

Property Value

Type	Description
FilterBuilderViewMode	An enumeration value.

Available values:

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.

Remarks

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

<DxFilterBuilder ViewMode="@ViewMode">
    @* ... *@
</DxFilterBuilder>

@code {
    bool ShowTextEditor { get; set; }
    FilterBuilderViewMode ViewMode => ShowTextEditor ? FilterBuilderViewMode.VisualAndText :
                                                       FilterBuilderViewMode.Visual;
    // ...
}

Run Demo: Filter Builder - View Mode

In Visual mode, users can construct filter expressions using an interactive control. You can also activate the VisualAndText mode that allows users to edit conditions in a text box. Consider this mode in the following cases:

• Users prefer to edit filter conditions in text format.
• Users want to use the advanced syntax available in the DevExpress Criteria Operator language. This language offers capabilities beyond built-in operator types in the interactive control.

The typed-in filter condition may contain a syntax error or may use advanced Criteria Language capabilities. In such cases, the interactive control displays an error message instead of the condition tree:

Cannot display an interactive filter editor. Unsupported or invalid filter condition is applied.

Validate Filter Expressions in Text Mode

In VisualAndText view mode, the Filter Builder supports Blazor form validation and allows you to obtain the component edit context using the GetEditContext() method. You can check whether the filter expression was modified and apply validation rules if needed.

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;
    }
}