Access the Settings of a Property Editor in a Detail View

Jun 26, 2025
3 minutes to read

This lesson explains how to access editors in a Detail View and change their settings.

The instructions below show how to make the Birthday property editor display a scrollable date picker in its drop-down window.

Note

Before you proceed, take a moment to review the previous lessons:

Step-by-Step Instructions

In the MySolution.Blazor.Server and MySolution.Win projects, add a View Controller to the Controllers folder. Name the new controller DateEditCalendarController. Specify the controller ancestor class ObjectViewController<ViewType, ObjectType>:

using DevExpress.ExpressApp;
using MySolution.Module.BusinessObjects;
// ...
namespace MySolution.Blazor.Server.Controllers {
    public class DateEditCalendarController : ObjectViewController<DetailView, Employee> {
    // ...
    }
}

using MySolution.Module.BusinessObjects;

namespace MySolution.Win.Controllers {
    public class DateEditCalendarController : ObjectViewController<DetailView, Employee> {
        public DateEditCalendarController() {
            //...
        }
        // ...
    }
}

The DateEditCalendarController inherits from the ObjectViewController<ViewType, ObjectType> base class. The parameters of the base class enable the Controller only for Detail Views that display and edit Employee objects.

Override the OnActivated method. Use the DetailViewExtensions.CustomizeViewItemControl method to access the Birthday property editor settings:

// ...
using DevExpress.ExpressApp.Blazor.Editors;

namespace MySolution.Blazor.Server.Controllers {
    public partial class DateEditCalendarController : ObjectViewController<DetailView, Employee> {
        protected override void OnActivated() {
            base.OnActivated();
            //Access the Birthday property editor settings
            View.CustomizeViewItemControl<DateTimePropertyEditor>(this, SetCalendarView, nameof(Employee.Birthday));
        }

        private void SetCalendarView(DateTimePropertyEditor propertyEditor) {
            //Set the date picker display mode to scroll picker
            propertyEditor.ComponentModel.PickerDisplayMode = DevExpress.Blazor.DatePickerDisplayMode.ScrollPicker;
        }
    }
}

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Editors;
using DevExpress.XtraEditors;
using MySolution.Module.BusinessObjects;

namespace MySolution.Win.Controllers {
    //...
    public class DateEditCalendarController : ObjectViewController<DetailView, Employee> {
        public DateEditCalendarController() {
             // ...
        }
        protected override void OnActivated() {
            base.OnActivated();
            //Access the Birthday property editor settings
            View.CustomizeViewItemControl(this, SetCalendarView, nameof(Employee.Birthday));
        }
        private void SetCalendarView(ViewItem viewItem) {
            //Set the currently displayed View Item control to a drop-down calendar
            DateEdit dateEdit = (DateEdit)viewItem.Control;
            //Set the appearance of the calendar in the drop-down window
            dateEdit.Properties.CalendarView = DevExpress.XtraEditors.Repository.CalendarView.TouchUI;
        }
     //...
    }
}

Run the application and open the Employee Detail View. The Birthday editor shows a scrollable date picker in its drop-down window:

ASP.NET Core Blazor

Windows Forms

Tip

For general information on Property Editor architecture and UI Controls used by XAF, review the following articles:

Next Lesson

Format a Property Value

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Step-by-Step Instructions

Next Lesson