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.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[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.

<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" };
}

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.

Razor

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

StaticAssetUtils

class StaticAssetUtils {
    static string libraryPath = System.Reflection.Assembly.GetExecutingAssembly().GetName().Name;

    public static string GetContentPath(string assetPath) {
        return $"./_content/{libraryPath}/{assetPath}";
    }

    public static string GetImagePath(string imageFileName) {
        return GetContentPath($"images/{imageFileName}");
    }
}

CSS

.template-container {
    display: flex;
    align-items: center;
}
.template-icon {
    fill: currentColor;
    width: 1rem;
    height: 1rem;
    margin-right: 0.375rem;
}
.low-level {
    color: #D73F3F;
}
.high-level {
    color: #1B8A10;
}
.normal-level {
    color: #406CF4;
}

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. Note that you can add only one DxInputBox to the template.
• 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.

<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" };
}

Run Demo: ComboBox - EditBoxTemplate

Implements

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