ComboBox - Buttons

• Jul 06, 2025
• 3 minutes to read

The DevExpress Blazor ComboBox component allows you to show the Clear button, hide built-in drop-down button, and add custom command buttons.

Clear Button and Placeholder

Set the ClearButtonDisplayMode property to Auto to show the Clear button when the editor has a non-null value. Users can click this button to clear the editor’s value (set it to null).

Use the NullText property to display the prompt text (placeholder) in the editor when its value is null.

Razor

<DxComboBox NullText="Select a country..."
            Data="@CountryData.Countries"
            @bind-Value="@CurrentCountry"
            TextFieldName="@nameof(Country.CountryName)"
            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
</DxComboBox>

@code {
    Country CurrentCountry { get; set; } = CountryData.Countries[1];
}

Country

public class Country {
    public int Id { get; set; }
    public string CountryName { get; set; }
}

public static class CountryData {
    private static readonly Lazy<List<Country>> countries = new Lazy<List<Country>>(() => {
        return new List<Country>()
        {
            new Country() { Id = 0, CountryName = "USA" },
            new Country() { Id = 1, CountryName = "Germany" },
            new Country() { Id = 2, CountryName = "Japan" }
        };
    });
    public static List<Country> Countries { get { return countries.Value; } }
}

Run Demo: ComboBox – Clear Button and Placeholder

Note

If you use the EditBoxDisplayTemplate property and need to show the clear button and placeholder, you should also add a DxInputBox object to the template markup.

Hide Built-In Drop-Down Button

Set the ShowDropDownButton property to false to hide the built-in button that invokes a drop-down menu. If you need a custom button, you can add a new command button.

Add Command Buttons

You can add custom command buttons to the ComboBox. Refer to Command Buttons for more information.

The following code snippet adds the Add Employee button to the ComboBox.

Razor

<DxComboBox Data="@Data"
            TextFieldName="@nameof(Employee.Text)"
            @bind-Value="@SelectedEmployee"
            CssClass="dx-demo-editor-width">
    <Buttons>
        <DxEditorButton IconCssClass="editor-icon editor-icon-add"
                        Tooltip="Add an employee"
                        Click="@(_ => OnButtonClick())" />
    </Buttons>
</DxComboBox>

@code{
    IObserver<string> toasterRef;
    IEnumerable<Employee> Data { get; set; }
    Employee SelectedEmployee { get; set; }
    bool AddEmployeePopupVisible { get; set; }
    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetEmployeesAsync();
        SelectedEmployee = Data.FirstOrDefault();
    }
    void OnButtonClick() {
        AddEmployeePopupVisible = true;
    }
    void OnEmployeeAdded(Employee newEmployee) {
        AddEmployeePopupVisible = false;
        if (newEmployee != null) {
            Data = Data.Append(newEmployee);
        }
    }
}

AddEmployeePopup

<DxPopup
    @bind-Visible="@Visible"
    ShowFooter="true"
    HeaderText="Add Employee"
   >
    <BodyContentTemplate>
        <EmployeeEditForm @ref="@EditForm"/>
    </BodyContentTemplate>
    <FooterContentTemplate>
        <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Primary" Text="Add" Click="@(() => ClosePopup(true))" />
        <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Secondary" Text="Cancel" Click="@(() => ClosePopup(false))" />
    </FooterContentTemplate>
</DxPopup>

@code {
    [Parameter] public bool Visible { get; set; }
    [Parameter] public SizeMode? SizeMode { get; set; }
    [Parameter] public EventCallback<Employee> OnPopupClosed { get; set; }
    EmployeeEditForm EditForm { get; set; }
    async Task ClosePopup(bool isResultSuccessful) {
        var result = isResultSuccessful
            ? new Employee {
                FirstName = EditForm.FirstName,
                HireDate = EditForm.HiredDate,
                City = EditForm.City,
                Title = EditForm.Position
            }
            : null;
        await OnPopupClosed.InvokeAsync(result);
    }
}

EmployeeEditForm

<div class="d-flex flex-fill pt-1 pb-2 w-100">
    <DxFormLayout CssClass="w-100">
        <DxFormLayoutItem Caption="Employee First Name:"
                          CaptionPosition="CaptionPosition.Vertical"
                          CaptionCssClass="popup-demo-caption"
                          CssClass="popup-demo-item"
                          ColSpanMd="12">
            <div class="editor-demo-layout-item">
                <span class="editor-icon popup-icon-user"></span>
                <DxTextBox @bind-Text="@FirstName" CssClass="popup-demo-textbox" />
            </div>
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Hired Date:"
                          CaptionPosition="CaptionPosition.Vertical"
                          CaptionCssClass="popup-demo-caption"
                          CssClass="popup-demo-item"
                          ColSpanMd="12">
            <div class="editor-demo-layout-item">
                <span class="editor-icon editor-icon-birthdate"></span>
                <DxDateEdit @bind-Date="@HiredDate" CssClass="popup-demo-textbox" />
            </div>
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="City:"
                          CaptionPosition="CaptionPosition.Vertical"
                          CaptionCssClass="popup-demo-caption"
                          CssClass="popup-demo-item"
                          ColSpanMd="12">
            <div class="editor-demo-layout-item">
                <span class="editor-icon editor-icon-city"></span>
                <DxTextBox @bind-Text="@City" CssClass="popup-demo-textbox" />
            </div>
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Position:"
                          CaptionPosition="CaptionPosition.Vertical"
                          CaptionCssClass="popup-demo-caption"
                          CssClass="popup-demo-item"
                          ColSpanMd="12">
            <div class="editor-demo-layout-item">
                <span class="editor-icon popup-icon-position"></span>
                <DxComboBox CssClass="popup-demo-textbox"
                            Data="@(new List<string>{"Sales Representative", "Designer"})"
                            @bind-Value="@Position">
                </DxComboBox>
            </div>
        </DxFormLayoutItem>
    </DxFormLayout>
</div>

@code {
    public string FirstName { get; set; }
    public DateTime? HiredDate { get; set; }
    public string City { get; set; }
    public string Position { get; set; }
}

CSS

.dx-demo-form-layout-width {
    max-width: 640px;
    width: 100%;
}
.dx-demo-editor-width {
    max-width: 320px;
    width: 100%;
}

Run Demo: Editors - Command Buttons