The requested page is not available for the requested platform. You are viewing the content for Default platform.

How to: Customize Action Controls

  • 6 min 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.

AccessActionControl

Note

You can see a demonstration of the following controllers (the CustomizeMenuActionsController for ASP.NET and CustomizeParametrizedActionController for WinForms) in the Actions section of the Feature Center application that is shipped with XAF. The Feature Center demo is installed in %PUBLIC%\Documents\DevExpress Demos 19.1\Components\eXpressApp Framework\FeatureCenter by default. The ASP.NET version of this demo is available online at http://demos.devexpress.com/XAF/FeatureCenter/.

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.

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>("CreatedOn"); }
        set { SetPropertyValue("CreatedOn", value); }
    }

    public string Title {
        get { return GetPropertyValue<string>("Title"); }
        set { SetPropertyValue("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.

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

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

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.

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();
    }
}

Mobile

To specify a date-time format, use symbols from the Unicode Date Field Symbol Table or the predefined formats the DevExtreme Library supports.

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using System.Collections.Generic;
// ...
public class CustomizeActionControlControllerMobile : Controller {
    protected override void OnActivated() {
        base.OnActivated();
        MyFilterController controller = Frame.GetController<MyFilterController>();
        if (controller != null) {
            controller.dateFilterAction.CustomizeControl += 
CustomizeActionControlControllerMobile_CustomizeControl;
        }
    }
    private void CustomizeActionControlControllerMobile_CustomizeControl(object sender,
CustomizeControlEventArgs e) {
        List<object> controls = (List<object>)e.Control;
        Dictionary<string, object> editor = (Dictionary<string, object>)controls[1];
        editor["displayFormat"] = "longdate";
    }
    protected override void OnDeactivated() {
        MyFilterController controller = Frame.GetController<MyFilterController>();
        if (controller != null) {
            controller.dateFilterAction.CustomizeControl -=
CustomizeActionControlControllerMobile_CustomizeControl;
        }
        base.OnDeactivated();
    }
}
See Also