Access the Settings of a Property Editor in a Detail View

• Nov 11, 2022
• 2 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 following lessons:

• Inherit from the Business Class Library Class (XPO/EF core)
• Add a Simple Action

Step-by-Step Instructions

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

   using DevExpress.ExpressApp;
   // ...
   
   public partial class DateEditCalendarController : ObjectViewController<DetailView, Contact> {
       public DateEditCalendarController() {
           InitializeComponent();
       }
       // ...
   }
   

   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 Contact objects.

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

   namespace MySolution.Blazor.Server.Controllers {
       public partial class DateEditCalendarController : ObjectViewController<DetailView, Contact> {
           public DateEditCalendarController() {
               InitializeComponent();
           }
           protected override void OnActivated() {
               base.OnActivated();
               //Access the Birthday property editor settings
               View.CustomizeViewItemControl<DateTimePropertyEditor>(this, SetCalendarView, nameof(Contact.Birthday));
           }
           private void SetCalendarView(DateTimePropertyEditor propertyEditor) {
               //Obtain the Component Adapter
               var dateEditAdapter = (DxDateEditAdapter)propertyEditor.Control;
               //Set the date picker display mode to scroll picker
               dateEditAdapter.ComponentModel.PickerDisplayMode = DevExpress.Blazor.DatePickerDisplayMode.ScrollPicker;
           }
       }
   }
   

   Use the Component Adapter‘s ComponentModel property to access the actual ASP.NET Core Blazor component properties.

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

   • Implement a Property Editor Based on a Custom Component (Blazor)
   • Data Types Supported by built-in Editors

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

   

Next Lesson

Access Grid Control Settings