Add a Custom Button to a Property Editor (ASP.NET Core Blazor)

• Sep 11, 2026
• 4 minutes to read

In the XAF ASP.NET Core Blazor UI, you can add custom buttons to built-in Property Editors, such as text, numeric, date/time, and lookup editors. Handle the custom button’s Click event to implement required functionality.

How Custom Buttons Work in Property Editors

Property Editors that support custom buttons expose a custom button collection (Buttons). Each collection element is a DxEditorButtonModel object. This type is a XAF wrapper model that you can use to access DxEditorButton properties.

When you add, remove, or replace items in the Buttons collection, XAF automatically updates the application’s UI.

XAF renders buttons in the Property Editor’s button area in the following order:

• The Clear button
• Built-in buttons, such as Edit and Add
• Custom buttons
• The drop-down button

Custom buttons appear in the same order as they are defined in the Buttons collection.

Supported Editors

The following Property Editor classes support custom buttons:

• BooleanPropertyEditor based on DxComboBox<TData, TValue>
• ComboBoxListPropertyEditor
• DateTimePropertyEditor and TimeSpanPropertyEditor
• DxFileDataPropertyEditor
• EnumPropertyEditor
• LookupPropertyEditor and ObjectPropertyEditor
• NumericPropertyEditor
• StringPropertyEditor based on DxTextBox, DxMaskedInput<T>, or DxComboBox<TData, TValue>
• TypePropertyEditor

Tip

You can also add custom buttons to a property editor based on a custom component.

Add a Custom Button

The following code snippet adds a custom button and specifies its icon, tooltip, and a text message that appears when a user clicks the button.

SolutionName.Blazor.Server/Controllers/PropertyEditorCustomButtonDetailViewController.cs

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Components.Models;
using DevExpress.ExpressApp.Blazor.Editors;
using DevExpress.ExpressApp.Blazor.Utils;
using SolutionName.Module.BusinessObjects;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace SolutionName.Blazor.Server.Controllers;

public class PropertyEditorCustomButtonDetailViewController : ObjectViewController<DetailView, PhoneNumber> {
    protected override void OnActivated() {
        base.OnActivated();
        View.CustomizeViewItemControl<StringPropertyEditor>(this, Customize_PhoneNumberEditor, nameof(PhoneNumber.Number));
    }

    private void Customize_PhoneNumberEditor(StringPropertyEditor editor) {
        var customButtonModel = new DxEditorButtonModel() {
            IconCssClass = "fluent-icon fluent-icon-phone",
            Tooltip = "Call this phone number",
            Click = EventCallback.Factory.Create<MouseEventArgs>(this,
                 (e) => Application.ShowViewStrategy.ShowMessage($"Calling {ViewCurrentObject.Number}..."))
        };
        editor.Buttons.Add(customButtonModel);
    }
}

You can use the same technique in List Views. Use a ListView-specific controller base and target an editable List View.

Tip

Ensure that in-place editing is enabled for the required List View. Otherwise, XAF does not create Property Editors in List Views.

SolutionName.Blazor.Server/Controllers/PropertyEditorCustomButtonListViewController.cs

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Components.Models;
using DevExpress.ExpressApp.Blazor.Editors;
using DevExpress.ExpressApp.Blazor.Utils;
using SolutionName.Module.BusinessObjects;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace SolutionName.Blazor.Server.Controllers;

public class PropertyEditorCustomButtonListViewController : ObjectViewController<ListView, PhoneNumber> {
    public PropertyEditorCustomButtonListViewController() {
        TargetViewId = "Employee_PhoneNumbers_ListView";
    }
    protected override void OnActivated() {
        base.OnActivated();
        View.CustomizeViewItemControl<StringPropertyEditor>(this, Customize_PhoneNumberEditor, nameof(PhoneNumber.Number));
    }

    private void Customize_PhoneNumberEditor(StringPropertyEditor editor) {
        var customButtonModel = new DxEditorButtonModel() {
            IconCssClass = "fluent-icon fluent-icon-phone",
            Tooltip = "Call this phone number",
            Click = EventCallback.Factory.Create<MouseEventArgs>(this,
                 (e) => Application.ShowViewStrategy.ShowMessage($"Calling {((PhoneNumber)editor.CurrentObject).Number}..."))
        };
        editor.Buttons.Add(customButtonModel);
    }
}

Add Custom Buttons to the Lookup Property Editor

When LookupEditorMode is set to AllItems or Auto, and View mode is enabled, XAF displays the Lookup Property Editor as a Text Box with an Edit button. When the user clicks the button, XAF changes the editor to a ComboBox.

Each mode uses a different collection to maintain editor buttons:

• Use the ViewModeButtons collection to add custom buttons to the Lookup Property Editor in View mode.
• Use the Buttons collection to add custom buttons to the Lookup Property Editor in Edit mode.

SolutionName.Blazor.Server/Controllers/LookupPropertyEditorCustomButtonController.cs

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Components.Models;
using DevExpress.ExpressApp.Blazor.Editors;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace SolutionName.Blazor.Server.Controllers;

public class LookupPropertyEditorCustomButtonController : ViewController<DetailView> {
    protected override void OnActivated() {
        base.OnActivated();
        View.CustomizeViewItemControl<LookupPropertyEditor>(this, (editor) => {
            var customButtonModel = new DxEditorButtonModel() {
                Text = "Test",
                Tooltip = "Test",
                Click = EventCallback.Factory.Create<MouseEventArgs>(this,
                                (e) => Application.ShowViewStrategy.ShowMessage($"Test..."))
            };
            if (editor.Buttons != null) {
                // Add the custom button an the editor in Edit mode 
                editor.Buttons.Add(customButtonModel);
            }
            else {
                // Add the custom button to an editor in View mode
                editor.ViewModeButtons.Add(customButtonModel);
            }
        });
    }

}