Data Editors in DevExpress Data Form for .NET MAUI

• Nov 25, 2024
• 4 minutes to read

The DataFormView component generates editors based on the data type of fields in the bound business object.

DataFormView stores its editors in the Items collection. An individual editor is a DataFormItem class descendant.

When you assign a data object to the DataFormView.DataObject property, the data form generates editors for all object properties and populates the Items collection with objects that correspond to property types.

To associate a DataFormView item with a DataObject nested property, set this item’s FieldName to a corresponding complex path (for example, “Address.Street”).

Property Value Type	Data Form Item	Editor
String, Char	DataFormTextItem	TextEdit
Numeric[1]	DataFormNumericItem	NumericEdit
Bool	DataFormSwitchItem	Switch
DateTime	DataFormDateItem	DateEdit
TimeSpan	DataFormTimeItem	TimeEdit
Enum	DataFormComboBoxItem	ComboBoxEdit

To disable automatic editor generation, set the IsAutoGenerationEnabled property to false.

Specify an Editor’s Properties

To explicitly specify the data form editor for a data object property, do one of the following:

• In C# code, apply an attribute to the data object class property.

  C#

  public partial class MainPage : ContentPage {
      public MainPage() {
          InitializeComponent();
          dataForm.DataObject = new EmployeeInfo();
          dataForm.PickerSourceProvider = new ComboBoxDataProvider();
      }
  }
  public class EmployeeInfo {
      public string FirstName { get; set; }
      public string LastName { get; set; }
  
      [DataFormComboBoxEditor(ValueMember = "DepartmentCode", DisplayMember = "DepartmentName")]
      public int Department { get; set; }
  
      [DataFormComboBoxEditor]
      public string Status { get; set; } = "Salaried";
  }
  

  The following table lists supported attributes and data form items used to define data form editors:

  Attribute	Data Form Item	Editor
  DataFormTextEditorAttribute DataFormMaskedEditorAttribute	DataFormTextItem DataFormMaskedItem	TextEdit
  DataFormNumericEditorAttribute	DataFormNumericItem	NumericEdit
  DataFormMultilineEditorAttribute	DataFormMultilineItem	MultilineEdit
  DataFormPasswordEditorAttribute	DataFormPasswordItem	PasswordEdit
  DataFormCheckBoxEditorAttribute	DataFormCheckBoxItem	CheckEdit
  DataFormSwitchEditorAttribute	DataFormSwitchItem	Switch
  DataFormDateEditorAttribute	DataFormDateItem	DateEdit
  DataFormTimeEditorAttribute	DataFormTimeItem	TimeEdit
  DataFormComboBoxEditorAttribute	DataFormComboBoxItem	ComboBoxEdit
  -	DataFormCustomItem	Any editor that you specify

• In XAML or C# code, add a data form item object to the DataFormView.Items collection and use the DataFormItem.FieldName property to bind the editor to the data object’s property. Note that the FieldName property does not support paths with indexers.

  XAML

  <dxdf:DataFormView x:Name="dataForm">
      <dxdf:DataFormView.DataObject>
          <local:EmployeeInfo/>
      </dxdf:DataFormView.DataObject>
      <dxdf:DataFormView.PickerSourceProvider>
          <local:ComboBoxDataProvider/>
      </dxdf:DataFormView.PickerSourceProvider>
      <dxdf:DataFormView.Items>
          <dxdf:DataFormComboBoxItem FieldName="Department" 
                                     ValueMember = "DepartmentCode"
                                     DisplayMember = "DepartmentName"
                                     BackgroundColor="LightGray" 
                                     RowOrder="2"/>
      </dxdf:DataFormView.Items>
  </dxdf:DataFormView>
  

Specify Properties in Styles

If a DataFormItem descendant and the target editor have the same property, use the DataFormItem descendant’s property to customize editor properties. For example, the IsReadOnly property is available both in the DataFormItem‘s descendant and target editor. In this case, you should define an implicit style for the DataFormItem.

The following code snippet enables read-only mode for the DataFormTextItem control:

XAML

<ContentPage ...
    xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors">
    <ContentPage.Resources>
        <Style TargetType="dxdf:DataFormTextItem">
            <Setter Property="IsReadOnly" Value="True"/>
        </Style>
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <dxdf:DataFormView x:Name="dataform" >
                <dxdf:DataFormTextItem FieldName="FirstName" LabelText="Name"/>
            </dxdf:DataFormView>
    </StackLayout>
    </ScrollView>
</ContentPage>

Specify the Editor’s Selected Value in Code

Use the following methods to manage an editor’s selected value programmatically:

• DataFormItem.SetValue(Object) – Specifies the Data Form editor value.
• DataFormView.GetValue(String) – Returns the current value of a Data Form editor by the name of the property to which the editor is bound.
• DataFormItem.GetValue() – Returns the current value of the data form editor.

Implement a Custom Editor

To create a custom editor on a data form, add the DataFormCustomItem item to the data form’s Items collection and set the EditorView property to a View class descendant that specifies a view or layout.

The binding context of the data form’s custom editor is an object assigned to the DataFormView.DataObject property. You can bind a custom editor view’s property to any property of this object.

Note

DataFormCustomItem.EditorView is a content property. You can skip property tags in the markup.

In this example, the data form is associated with an EmployeeInfo object. The Image view is added to the form as a custom editor and bound to the EmployeeInfo.PhotoPath property to display an employee photo.

View Example

XAML

<dx:DataFormCustomItem FieldName="PhotoPath">
    <dx:DXStackLayout Padding="16">
        <Frame Padding="0"
               HorizontalOptions="Center"
               BorderColor="#dadada"
               WidthRequest="100"
               HeightRequest="100"
               CornerRadius="50"
               IsClippedToBounds="True">
            <dx:DXImage Source="{Binding PhotoPath}"
                   BackgroundColor="Gray"
                   Aspect="AspectFill"/>
        </Frame>
    </dx:DXStackLayout>
</dx:DataFormCustomItem>

When you define a custom editor for the data form, you can bind the custom editor property to any property of the data object (it is the binding context of the data form’s custom editors). Note, in this case, the data form’s built-in validate and commit mechanisms are not available for the custom editor. If you need to validate and commit values entered within the custom editor, bind its value property to the EditorValue property.

Footnotes

1. Byte, Decimal, Double, Int16, Int32, Int64, SByte, Single, UInt16, UInt32, UInt64.