DxFilterBuilderField.ValueEditTemplate Property
Allows you to replace an autogenerated value editor with custom content.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v26.1.dll
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.
<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>
Collection Fields
Enable the IsCollection property to define a collection field. Such a field stores an object collection and supports aggregate operators (functions). Aggregate functions calculate collection summaries and allow users to create filter conditions based on aggregated results. For example, users can filter out invoices containing fewer than 5 items in the Products field.
The following aggregate functions are available:
ExistsCountAvgSumMinMax
A collection field’s ValueEditTemplate affects only an editor displayed for the Count function. In this editor, users can select the target number of items in the collection (an integer value).
The following code snippet displays a spin editor with custom command buttons for the Orders collection’s Count function:
<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">
<ValueEditTemplate Context="valueContext">
@{
int count = Convert.ToInt32(valueContext.Value);
}
<DxSpinEdit T="@int"
Value="count"
ValueChanged="@(value => {valueContext.Value=value;})"
ValueExpression="@(() => count)"
BindValueMode="BindValueMode.OnInput"
ShowSpinButtons="false">
<Buttons>
<DxEditorButton IconCssClass="editor-icon editor-icon-chevron-left"
Tooltip="Decrement by 10"
Click="@(_ => {valueContext.Value = Convert.ToInt32(valueContext.Value) - 10;})"/>
<DxSpinButtons />
<DxEditorButton IconCssClass="editor-icon editor-icon-chevron-right"
Tooltip="Increment by 10"
Click="@(_ => {valueContext.Value = Convert.ToInt32(valueContext.Value) + 10;})"/>
</Buttons>
</DxSpinEdit>
</ValueEditTemplate>
<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>