DxComboBox<TData, TValue>.Buttons Property

Allows you to add command buttons to the ComboBox.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment Buttons { get; set; }

Property Value

Type	Description
RenderFragment	A collection of buttons (UI fragments).

Remarks

The ComboBox has the built-in button that invokes a drop-down menu. You can use the ShowDropDownButton property to hide this button.

You can also add custom command buttons to the ComboBox:

1. Add the <Buttons></Buttons> tag to the component’s markup to define the Buttons collection.

2. Fill the Buttons collection. The following buttons are available:

   • DxComboBoxDropDownButton - A button that invokes a drop-down menu (can be added to the DxComboBox<TData, TValue> only).
   • DxEditorButton - A custom button displayed in an editor.

3. Set up button properties to customize the buttons:

   • CssClass
   • Position
   • and so on

Buttons are displayed in an editor in the following order:

• The “Clear” button
• Custom buttons and customized default buttons (in the same order as they appear in markup)
• Built-in buttons

The code below 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

We do not recommend that you use conditional render within the <Buttons></Buttons tag. This may cause an incorrect button order. The following example demonstrates a case when the Button1 may change its position.

<Buttons>    
    @if(condition) {
        <DxEditorButton Text="Button1"/>    
    }    
    <DxEditorButton Text="Button2"/>    
    <DxEditorButton Text="Button3"/>
</Buttons>

If you need to hide a button, set the Visible property to false.