DxDropDownBox.Value Property

Specifies the editor value.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public object Value { get; set; }

Property Value

Type	Default	Description
Object	null	The editor value.

Remarks

The DxDropDownBox‘s input element is read-only for users. Use the Value property to assign an editor value programmatically based on user interaction with window content. To respond to value changes, handle the ValueChanged event.

You can use the @bind attribute to bind the Value property to a data field. Refer to the following topic for details: Two-Way Data Binding.

Note

If you add a DxDropDownBox to an EditForm component and use one-way binding for the Value property, you need to specify the ValueExpression property.

Implement the QueryDisplayText function to define how the editor value is displayed in the input element. You can use the NullText property to specify the editor text when Value is null.

Note that you should enclose your code between the BeginUpdate() and EndUpdate() method calls to change the value outside the component’s markup. Otherwise, an exception occurs.

Run Demo: DropDown Box - Multiple Selection ListBox

<label for="ddbMultipleSelectionListBox" class="demo-text cw-480 mb-1">Employees</label>
<DxDropDownBox @bind-Value="Value"
               QueryDisplayText="QueryText"
               DropDownWidthMode="DropDownWidthMode.EditorWidth"
               SizeMode="Params.SizeMode"
               InputId="ddbMultipleSelectionListBox"
               CssClass="cw-480">
    <DropDownBodyTemplate>
        <DxListBox Data="@ListBoxData" TData="Employee" TValue="Employee"
                   Values="@(GetListBoxValues(context.DropDownBox))"
                   ValuesChanged="@(values => ListBoxValuesChanged(values, context.DropDownBox))"
                   TextFieldName="@nameof(Employee.Text)"
                   SelectionMode="ListBoxSelectionMode.Multiple"
                   ShowCheckboxes="true"
                   ShowSearchBox="true"
                   CssClass="templateListbox"
                   >
        </DxListBox>
    </DropDownBodyTemplate>
</DxDropDownBox>

@code {
    IEnumerable<Employee> ListBoxData { get; set; }
    object Value { get; set; }

    string QueryText(DropDownBoxQueryDisplayTextContext arg) {
        var names = (arg.Value as IEnumerable<Employee>)?.Select(x => x.LastName);
        return names != null ? string.Join(",", names) : string.Empty;
    }

    IEnumerable<Employee> GetListBoxValues(IDropDownBox dropDownBox) {
        return dropDownBox.Value as IEnumerable<Employee>;
    }

    void ListBoxValuesChanged(IEnumerable<Employee> values, IDropDownBox dropDownBox) {
        dropDownBox.BeginUpdate();
        dropDownBox.Value = values;
        dropDownBox.EndUpdate();
}

protected override async Task OnInitializedAsync() {
    ListBoxData = await NwindDataService.GetEmployeesAsync();
    Value = ListBoxData.Take(2);
}

Implements

Value