How to: Customize Action Controls

• Aug 20, 2024
• 4 minutes to read

This example demonstrates how to customize the control that visualizes an Action in a UI. A custom Action will be created, allowing users to enter a date and filter the List View accordingly. The implemented Action will accept keyboard input, as well as provide a drop-down calendar. The control representing the Action will be customized to accept keyboard input using a custom mask. The image below shows the resulting Action in a UI.

Note

You can see a demonstration of the following controllers (the CustomizeMenuActionsController for ASP.NET Web Forms and CustomizeParametrizedActionController for WinForms) in the Actions section of the Feature Center application that is shipped with XAF. The default location of the application is %PUBLIC%\Documents\DevExpress Demos 24.2\Components\XAF\FeatureCenter.NETFramework.XPO.

First, define the sample MyDomainObject business class. The class contains two properties. The first is the CreatedOn property of the DateTime type, and the second is the Title property of the string type.

C# (EF Core)

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl.EF;
// ...
[DefaultClassOptions]
public class MyDomainObject : BaseObject {
    public virtual DateTime CreatedOn { get; set; }
    public virtual string Title { get; set; }
}

// Make sure that you use options.UseChangeTrackingProxies() in your DbContext settings.

C# (XPO)

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
using DevExpress.Xpo;
// ...
[DefaultClassOptions]
public class MyDomainObject : BaseObject {
    public MyDomainObject(Session session) : base(session) { }

    public DateTime CreatedOn {
        get { return GetPropertyValue<DateTime>(nameof(CreatedOn)); }
        set { SetPropertyValue(nameof(CreatedOn), value); }
    }

    public string Title {
        get { return GetPropertyValue<string>(nameof(Title)); }
        set { SetPropertyValue(nameof(Title), value); }
    }
}

Next, create a new View Controller and define a ParametrizedAction. Configure the Controller and Action so that they activate for the MyDomainObject class only. Set the Action’s ParametrizedAction.ValueType to DateTime. In the Action’s ParametrizedAction.Execute event handler, check whether a date was entered. If a date was entered, filter the MyDomainObject List View to contain only the objects whose “CreatedOn” property’s value equals the entered date. If a user has executed the Action with an empty edit field, remove the applied filter, so that the List View displays all the objects, without regard to their creation date.

C#

using DevExpress.Data.Filtering;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.Persistent.Base;
//...
public class MyFilterController : ViewController {
    public ParametrizedAction dateFilterAction;
    public MyFilterController() {
        TargetViewType = ViewType.ListView;
        TargetObjectType = typeof(MyDomainObject);
        dateFilterAction = new ParametrizedAction(this, "MyDateFilter", PredefinedCategory.Search, typeof(DateTime));
        dateFilterAction.NullValuePrompt = "Enter date";
        dateFilterAction.Execute += dateFilterAction_Execute;
    }
    private void dateFilterAction_Execute(object sender, ParametrizedActionExecuteEventArgs e) {
        CriteriaOperator criterion = null;
        if(e.ParameterCurrentValue != null && e.ParameterCurrentValue.ToString() != string.Empty) {
            criterion = new BinaryOperator("CreatedOn", Convert.ToDateTime(e.ParameterCurrentValue));
        }
        ((ListView)View).CollectionSource.Criteria[dateFilterAction.Id] = criterion;
    }
}

To set up a custom edit mask, subscribe to the ActionBase.CustomizeControl event. This event allows you to customize the created items control, and provides access to the corresponding Action Control.

WinForms

C#

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.XtraBars;
using DevExpress.XtraEditors.Repository;
//...
public class CustomizeActionControlControllerWin : Controller {
    protected override void OnActivated() {
        base.OnActivated();
        Frame.GetController<MyFilterController>().dateFilterAction.CustomizeControl += CustomizeActionControlControllerWin_CustomizeControl;
    }
    private void CustomizeActionControlControllerWin_CustomizeControl(object sender, 
CustomizeControlEventArgs e) {
        BarEditItem barItem = e.Control as BarEditItem;
        if (barItem != null) {
            RepositoryItemDateEdit repositoryItem = (RepositoryItemDateEdit)barItem.Edit;
            repositoryItem.Mask.UseMaskAsDisplayFormat = true;
            repositoryItem.Mask.EditMask = "yyyy-MMM-dd";
            barItem.Width = 270;
        }
    }
    protected override void OnDeactivated() {
        Frame.GetController<MyFilterController>().dateFilterAction.CustomizeControl -= 
CustomizeActionControlControllerWin_CustomizeControl;
        base.OnDeactivated();
    }
}

ASP.NET Web Forms

This approach uses Server properties. Employ this approach when you need to change a control’s behavior. If you need to change a control’s appearance, use CSS styles as the Action Customization article describes.

C#

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Web.Templates.ActionContainers.Menu;
using DevExpress.Web;
//...
public class CustomizeActionControlControllerWeb : Controller {
    protected override void OnActivated() {
        base.OnActivated();
        Frame.GetController<MyFilterController>().dateFilterAction.CustomizeControl += CustomizeActionControlControllerWeb_CustomizeControl;
    }
    private void CustomizeActionControlControllerWeb_CustomizeControl(object sender, 
CustomizeControlEventArgs e) {
        ParametrizedActionMenuActionItem actionItem = e.Control as ParametrizedActionMenuActionItem;
        if (actionItem != null) {
            ASPxDateEdit editor = actionItem.Control.Editor as ASPxDateEdit;
            if (editor != null) {
                editor.UseMaskBehavior = true;
                editor.EditFormat = EditFormat.DateTime;
                editor.EditFormatString = "yyyy-MMM-dd";
                editor.Width = 270;
            }
        }
    }
    protected override void OnDeactivated() {
        Frame.GetController<MyFilterController>().dateFilterAction.CustomizeControl -= 
CustomizeActionControlControllerWeb_CustomizeControl;
        base.OnDeactivated();
    }
}

ASP.NET Core Blazor

Add the following Controller to the ASP.NET Core Blazor application project (MySolution.Blazor.Server).

C#

using MySolution.Module.Controllers;
using DevExpress.ExpressApp.Blazor.Components.Models;
using DevExpress.ExpressApp.Blazor.Templates.Toolbar.ActionControls;
// ...

public class CustomizeActionControlControllerBlazor : Controller {
    private MyFilterController myFilterController;
    protected override void OnActivated() {
        base.OnActivated();
        myFilterController = Frame.GetController<MyFilterController>();
        if(myFilterController != null) {
            myFilterController.dateFilterAction.CustomizeControl += 
                CustomizeActionControlController_CustomizeControl;
        }
    }
    private void CustomizeActionControlController_CustomizeControl(object sender, 
        CustomizeControlEventArgs e) {
        if(e.Control is DxToolbarItemParametrizedActionControl actionControl && 
            actionControl.EditModel is DxDateEditModel dateEditModel) {
            dateEditModel.Format = "yyyy-MMM-dd";
        }
    }
    protected override void OnDeactivated() {
        if(myFilterController != null) {
            myFilterController.dateFilterAction.CustomizeControl -= 
            CustomizeActionControlController_CustomizeControl;
            myFilterController = null;
        }
        base.OnDeactivated();
    }
}

Tip

You can also customize an inline Action control. For more information, refer to the following topic: Customize Inline Action Control (ASP.NET Core Blazor).