DxDropDownBox.QueryDisplayText Property

Defines text displayed in the editor input element.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Func<DropDownBoxQueryDisplayTextContext, string> QueryDisplayText { get; set; }

Property Value

Type	Description
Func<DropDownBoxQueryDisplayTextContext, String>	A delegate method that returns input text.

Remarks

The DxDropDownBox input element is read-only for users. Use the Value property to assign an editor value programmatically and implement the QueryDisplayText function to define how the editor value is displayed in the input element. The function parameters allow you get the editor value (Value) and the previous input text (DisplayText).

You can use the NullText property to display prompt text in the editor when Value is null.

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>
</ChildContentWithParameters>

@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);
}

If you use the EditBoxDisplayTemplate property to specify input element content, the QueryDisplayText function result does not affect the input element.