Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxListEditorBase<TData, TValue>.ValueFieldName Property

Specifies the data source field that populates values for component items.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue("")]
[Parameter]
public string ValueFieldName { get; set; }

#Property Value

Type Default Description
String String.Empty

The field name.

#Remarks

If an editor is bound to a field that stores IDs or other non-user-friendly values, you may want to use lookup functionality. You can replace IDs with human-readable strings and let users select values from a lookup list.

For example, the images below shows how lookup functionality is used for the Employee.ID field of the Employees data source object. The component finds the IDs from a different collection and replaces them with the corresponding DisplayText values.

#ComboBox

Value Field Scheme

Use the ValueFieldName property to specify a data source field to obtain item values from. To access the editor’s selected value, use the Value property.

Note

If the ValueFieldName property is not specified and TValue and TData are different, the editor searches for a Value field in the data source. If the field is found and its type matches TValue, the component uses this field as a value field.

Razor
<DxComboBox Data="@Employees.DataSource"
            ValueFieldName="@nameof(Employee.ID)"
            TextFieldName="@nameof(Employee.DisplayText)"
            @bind-Value="@Value">
</DxComboBox>

@code {
    int Value { get; set; } = 1;
}

Run Demo: ComboBox - Item Values

#List Box

List Box - Value Field Scheme

Use the ValueFieldName property to specify a data source field to obtain item values from. To access the editor’s selected values, use the Values property.

Note

If the ValueFieldName property is not specified and TValue and TData are different, the List Box component searches for a Value field in the data source. If the field is found and its type matches TValue, the component uses this field as a value field.

Razor
<DxListBox Data="@Employees.DataSource" 
           ValueFieldName="@nameof(Employee.ID)"
           TextFieldName="@nameof(Employee.DisplayText)"
           @bind-Values="@Values">
</DxListBox>

@code {
    IEnumerable<int> Values { get; set; } = Employees.DataSource.Take(2).Select(t => t.ID);
}

Run Demo: List Box - Item Values

#TagBox

Value Field Scheme

Use the ValueFieldName property to specify a data source field to obtain item values from. To access the editor’s selected values, use the Values property.

Note

If the ValueFieldName property is not specified and TValue and TData are different, the editor searches for a Value field in the data source. If the field is found and its type matches TValue, the component uses this field as a value field.

Razor
<DxTagBox Data="@Employees.DataSource"
          ValueFieldName="@nameof(Employee.ID)"
          TextFieldName="@nameof(Employee.DisplayText)"
          @bind-Values="Values">
</DxTagBox>

@code {
    IEnumerable<int> Values { get; set; } = Employees.DataSource.Take(2).Select(t => t.ID);
}

Run Demo: TagBox - Item Values

#Implements

DevExpress.Blazor.IListEditorBase<TData, TValue>.ValueFieldName
See Also