DxComboBox<TData, TValue>.EditBoxDisplayTemplate Property

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

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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

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
StaticAssetUtils
CSS

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

csharp

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

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 class="content">Selected City: </span>
        }
        <DxInputBox/>
    </EditBoxDisplayTemplate>
</DxComboBox>

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

css

.content {
    white-space: pre;
}

Run Demo: ComboBox - EditBoxTemplate

Implements

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