Back to Devexpress

DxDropDownBox.EditBoxDisplayTemplate Property

blazor-devexpress-dot-blazor-dot-dxdropdownbox-374b30c7.md

latest3.0 KB
Original Source

DxDropDownBox.EditBoxDisplayTemplate Property

Specifies the template used to display edit box content.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

TypeDescription
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: </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

See Also

DxDropDownBox Class

DxDropDownBox Members

DevExpress.Blazor Namespace