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

DxComboBox<TData, TValue>.EditBoxDisplayTemplate Property

Specifies a template used to display the ComboBox’s item in the edit box.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public RenderFragment<ComboBoxEditBoxDisplayTemplateContext<TData, TValue>> EditBoxDisplayTemplate { get; set; }

#Property Value

Type Description
RenderFragment<ComboBoxEditBoxDisplayTemplateContext<TData, TValue>>

The template content.

#Remarks

You can use the EditBoxDisplayTemplate property to customize the appearance of a ComboBox item displayed in the edit box.

Razor
<DxComboBox Data="@Items"
            @bind-Value="@Value">
    <EditBoxDisplayTemplate>
        Selected item: @context.DataItem 
    </EditBoxDisplayTemplate>
</DxComboBox>

@code {
    string Value { get; set; } = "Low";
    IEnumerable<string> Items = new List<string>() { "Low", "Normal", "High" };
}

ComboBox - EditBoxDisplayTemplate

#Show Item Icons in the Edit Box

The most popular usage scenario for the EditBoxDisplayTemplate property is to show item icons in the edit box.

<DxComboBox Data="@Items"
            @bind-Value="@Value"
            CssClass="cw-480" >
    <EditBoxDisplayTemplate>
        @GetTemplateContent(context.DataItem)
    </EditBoxDisplayTemplate>
    ...
</DxComboBox>

@code {
    string Value { get; set; } = "Low";
    IEnumerable<string> Items = new List<string>() {"Low", "Normal", "High"};
    RenderFragment GetTemplateContent(string item) {
        return @<div class="template-container">
                   <svg class="@GetIconCssClass(item)" role="img">
                       <use href="@GetIconHref(item)"/>
                   </svg>
                   @item
               </div>;
    }
    string GetIconHref(string item) {
        return item != null ? StaticAssetUtils.GetImagePath($"icons/levels.svg#dx-{item.ToLower()}-level") : string.Empty;
    }
    string GetIconCssClass(string item) {
        var cssClass = "template-icon";
        if (item != null)
            cssClass += $" {item.ToLower()}-level";
        return cssClass;
    }
}

EditBoxTemplate - Show Item Icons

Run Demo: ComboBox - Edit Box Display Template

#User Input Support and Filter Mode

You can also create an edit box template that supports user input and filter mode:

  • Add <EditBoxDisplayTemplate></EditBoxDisplayTemplate> to the ComboBox markup.
  • Declare a DxInputBox object within the EditBoxTemplate markup.
  • Optional. Use the DxComboBox‘s InputCssClass to customize input box appearance.
  • Optional. Set the DxComboBox.AllowUserInput to true.
  • Optional. Use the SearchMode property to enable search mode.
  • Optional. Use the NullText property to display the prompt text in the edit box when the editor’s Value is null.
Razor
<DxComboBox Data="@Cities"
            @bind-Value="@CurrentCity"
            AllowUserInput="true"
            SearchMode="ListSearchMode.AutoSearch"
            SearchFilterCondition="ListSearchFilterCondition.StartsWith"
            NullText="Select City ..."
            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
    <EditBoxDisplayTemplate>
        @if (context != null) {
            <span style="white-space: pre;">Selected City: </span>
        }
        <DxInputBox/>
    </EditBoxDisplayTemplate>
</DxComboBox>

@code {
    string CurrentCity { get; set; } = "London";
    IEnumerable<string> Cities = new List<string>() { "New York", "London", "Berlin", "Paris" };
}

EditBoxTemplate - User Input Support and Filter Mode

Run Demo: ComboBox - EditBoxTemplate

#Implements

DevExpress.Blazor.IComboBox<TData, TValue>.EditBoxDisplayTemplate
See Also