DxFilterBuilderField.ValueEditTemplate Property

Allows you to replace an autogenerated value editor with custom content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public RenderFragment<FilterBuilderValueEditTemplateContext> ValueEditTemplate { get; set; }

Property Value

Type	Default	Description
RenderFragment<FilterBuilderValueEditTemplateContext>	null	Template markup.

Remarks

The DevExpress Blazor Filter Builder automatically generates and configures value editors for individual fields based on associated data types.

You can use the DxFilterBuilderField.EditSettings property for the following tasks:

• Access the editor’s API.
• Specify a different editor (choose from compatible DevExpress types such as DxComboBoxSettings or DxCheckBoxSettings).

If your customization tasks go beyond what’s possible with built-in API, use the ValueEditTemplate property. This property accepts a FilterBuilderValueEditTemplateContext object as the context parameter. You can use the parameter’s DisplayText and Value properties to obtain the field value and its display text.

You can also use the ValueDisplayTemplate property to specify custom content and change the appearance of value captions.

Example

The following code snippet uses ValueEditTemplate properties to configure ComboBox editors:

• Allows text box input for the Owner field.
• Displays values with icons for the Status field.

Razor

<DxFilterBuilder @bind-FilterCriteria="FilterCriteria" SizeMode="Params.SizeMode">
    <Fields>
    @* ... *@
        <DxFilterBuilderField FieldName="Creator" Caption="Owner" Type="@typeof(string)">
            <ValueEditTemplate>
                @{
                    var userFullName = (string)context.Value;
                }
                <DxComboBox TData="User" TValue="User"
                            Data="@UserList" AllowUserInput="true"
                            TextFieldName="@nameof(User.FullName)"
                            NullText="Type or select a value"
                            Text="@userFullName"
                            TextChanged="@((string v) => context.Value = v)"
                            TextExpression="@(() => userFullName)" />
            </ValueEditTemplate>
            @* ... *@
        </DxFilterBuilderField>
        <DxFilterBuilderField FieldName="Status" Caption="Status" Type="@typeof(IssueStatus)">
            <ValueEditTemplate>
                @{
                    var status = (IssueStatus?)context.Value;
                }
                <DxComboBox Data="@(Enum.GetValues(typeof(IssueStatus)).OfType<IssueStatus?>())"
                            Value="@(status)"
                            ValueChanged="@((IssueStatus? v) => context.Value = v)"
                            ValueExpression="@(() => status)"
                            NullText="Select a status"
                            Context="comboBoxContext">
                    <EditBoxDisplayTemplate>
                        <div class="d-flex align-items-center">
                            @if(comboBoxContext.DataItem != null) {
                                @DemoTemplateIconUtils.GetIssueStatusIconHtml((IssueStatus)comboBoxContext.DataItem)
                            }
                            <DxInputBox/>
                        </div>
                    </EditBoxDisplayTemplate>
                    <ItemDisplayTemplate>
                        <div class="d-flex align-items-center">
                            @DemoTemplateIconUtils.GetIssueStatusIconHtml((IssueStatus)comboBoxContext.Value)
                            @comboBoxContext.DisplayText
                        </div>
                    </ItemDisplayTemplate>
                </DxComboBox>
            </ValueEditTemplate>
            @* ... *@
        </DxFilterBuilderField>
        @* ... *@
    </Fields>
</DxFilterBuilder>

Run Demo: Value Template