Supply Predefined Values for the String Property Editor Dynamically (ASP.NET Core Blazor)

• Oct 17, 2023
• 2 minutes to read

This topic describes how to implement a custom Property Editor for an ASP.NET Core Blazor application and how to dynamically populate the editor’s drop-down list with predefined values. In the scenario below, the editor is used to edit a business object’s CultureCode (locale) property of the String type. The drop-down list of the Property Editor’s control displays cultures returned by the GetCultures method.

Note

You can also use the PredefinedValues property to specify predefined values in the Model Editor. This approach is simpler as it requires no additional code, but in this case you cannot dynamically update the list of values in code.

To implement a Property Editor and supply predefined values for it, follow the steps below:

1. Add a new CultureInfoPropertyEditor class to your ASP.NET Core Blazor Application Project. Inherit the newly created class from the StringPropertyEditor class and override the CreateComponentAdapter method to instantiate a DxComboBoxModel object. This object defines a DxComboBox<TData, TValue> component.

   Apply the PropertyEditor attribute to the editor. In the attribute declaration, indicate String as the corresponding property type.

   using System.Globalization;
   using DevExpress.Blazor;
   using DevExpress.ExpressApp.Blazor.Components.Models;
   using DevExpress.ExpressApp.Blazor.Editors;
   using DevExpress.ExpressApp.Blazor.Editors.Adapters;
   using DevExpress.ExpressApp.Editors;
   using DevExpress.ExpressApp.Model;
   
   namespace YourSolutionName.Blazor.Server;
   
   [PropertyEditor(typeof(String), "CultureInfoPropertyEditor", false)]
   public class CultureInfoPropertyEditor : StringPropertyEditor {
   
       public CultureInfoPropertyEditor(Type objectType, IModelMemberViewItem model) : base(objectType, model) {
       }
   
       protected override IComponentAdapter CreateComponentAdapter() {
   
           DxComboBoxModel<string, string> componentModel = new DxComboBoxModel<string, string>();
           componentModel.AllowUserInput = true;
           List<string> data = new List<string>();
   
           foreach(CultureInfo culture in CultureInfo.GetCultures(CultureTypes.AllCultures)) {
               data.Add($"{culture.EnglishName} ({culture.Name})");
           }
   
           componentModel.Data = data;
           componentModel.FilteringMode = DataGridFilteringMode.Contains;
           return new DxComboBoxAdapter<string, string>(componentModel);
       }
   }
   

2. Apply the EditorAlias attribute to the required property in the business class’s definition. In this example, we use the implemented Property Editor for a business object’s CultureCode property:

   namespace YourSolutionName.Module.BusinessObjects;
   // ...
   public class YourBusinessClass {
       //... 
       [EditorAlias("CultureInfoPropertyEditor")]
       public String CultureCode { get; set; }
   }
   

   The EditorAlias attribute changes the PropertyEditorType property of the Application Model’s IModelMember node. This node corresponds to the CultureCode property. You can apply the same change in the Model Editor.

   You can also implement an IComplexViewItem in this Property Editor. This interface allows the editor to access the XafApplication instance and use an Object Space to load data from an application database.

3. Build and run your application. The image below shows the resulting Property Editor: