DxFilterBuilderField.ValueDisplayTemplate Property

Specifies a template used to display field values or their placeholders.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Default	Description
RenderFragment<FilterBuilderValueDisplayTemplateContext>	null	Template markup.

Remarks

The ValueDisplayTemplate property allows you to specify custom content and change the appearance of field values or their placeholders.

The ValueDisplayTemplate property accepts a FilterBuilderValueDisplayTemplateContext object as the context parameter. You can use the parameter’s DisplayText and Value properties to obtain a field value and its display text.

Note

Field values are rendered as button HTML elements. According to the HTML specification, a button must not contain interactive elements or elements with the tabindex attribute specified.

You can also use the ValueEditTemplate property to replace an autogenerated value editor with custom content.

Example

The following code snippet uses ValueDisplayTemplate properties:

• Shows placeholder text if no value is selected (for both Owner and Status fields).
• Shows selected values with icons (for the Status field).

Razor

<DxFilterBuilder @bind-FilterCriteria="FilterCriteria" SizeMode="Params.SizeMode">
    <Fields>
        <DxFilterBuilderField FieldName="Name" Caption="Subject" Type="@typeof(string)"/>
        <DxFilterBuilderField FieldName="Creator" Caption="Owner" Type="@typeof(string)">
        @* ... *@
            <ValueDisplayTemplate>
                @if(string.IsNullOrEmpty(context.DisplayText)) {
                    <span>Type or select a value</span>
                } else {
                    @context.DisplayText
                }
            </ValueDisplayTemplate>
        </DxFilterBuilderField>
        <DxFilterBuilderField FieldName="Status" Caption="Status" Type="@typeof(IssueStatus)">
        @* ... *@
            <ValueDisplayTemplate>
                @if(context.Value != null) {
                    <div class="d-flex align-items-center">
                        @DemoTemplateIconUtils.GetIssueStatusIconHtml((IssueStatus)context.Value)
                        @context.DisplayText
                    </div>
                } else {
                    <span>Select a status</span>
                }
            </ValueDisplayTemplate>
        </DxFilterBuilderField>
        @* ... *@
    </Fields>
</DxFilterBuilder>

Run Demo: Value Template