DxInputBox Class

The input box component that can be added to the DxComboBox‘s EditBoxTemplate template.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxInputBox :
    RenderComponentBase,
    IDisposable

Remarks

If you use the DxComboBox.EditBoxTemplate property to customize the appearance of a ComboBox item displayed in the edit box, you can also add the DxInputBox component to this template. The DxInputBox component allows you to enable user input and filter mode for the edit box.

Follow the steps:

• Add <EditBoxTemplate>…</EditBoxTemplate> to the ComboBox markup.
• Declare a DxInputBox object within the EditBoxTemplate markup.
• Use the DxComboBox‘s InputCssClass to customize input box appearance.
• Optional. Set the DxComboBox.AllowUserInput to true.
• Optional. Use the DxComboBox.FilteringMode property to enable filter 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"
            FilteringMode="DataGridFilteringMode.StartsWith"            
            NullText="Select City ..."
            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
    <EditBoxTemplate>
        @if (context != null) {
            <span style="white-space: pre;">Selected City: </span>
        }
        <DxInputBox/>
    </EditBoxTemplate>
</DxComboBox>

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

Run Demo: ComboBox - EditBoxTemplate

Implements

IComponent

IHandleAfterRender

IHandleEvent

IDisposable

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.RenderComponentBase

DxInputBox