DxDropDownBox.EditBoxDisplayTemplate Property

Specifies the template used to display edit box content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<DropDownBoxEditBoxDisplayTemplateContext> EditBoxDisplayTemplate { get; set; }

Property Value

Type	Description
RenderFragment<DropDownBoxEditBoxDisplayTemplateContext>	Template content.

Remarks

Use the EditBoxDisplayTemplate property to customize edit box content.

Razor

<DxDropDownBox @ref="ddbox" @bind-Value="Value" QueryDisplayText="QueryText" CssClass="ddBox">
    <EditBoxDisplayTemplate>
        <b>Selected employees:&nbsp;</b> @ddbox.GetDisplayText()
    </EditBoxDisplayTemplate>
    <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"
                    CssClass="templateListbox" />
    </DropDownBodyTemplate>
</DxDropDownBox>

@code {
    DxDropDownBox ddbox;
    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();
    }
}

CSS

.templateListbox {
    --dxbl-list-box-border-width: 0px;
    width: 100%
}
.ddBox {
    max-width: 480px;
    width: 100%;
}

Implements

EditBoxDisplayTemplate