.NET MAUI DataForm Custom Editors

DataForm has a support for custom editors with 5.1.0 version of Telerik UI for .NET MAUI.

• DataFormCustomEditor—Represents a custom editor in the RadDataForm.

Properties

• EditorTemplate(ControlTemplate)—Defines the content of the custom editor. The target type of this template is Telerik.Maui.Controls.DataFormCustomEditorContentPresenter. The DataFormCustomEditorContentPresenter exposes the following properties:

  • Value(object)—Specifies the value of the editor.
  • Editor(Telerik.Maui.Conrols.DataFormCustomEditor)—Gets the editor this control is associated with.

• Placeholder(string)—Specifies the placeholder value to display, when there hasn't been input in the editor.

• PropertyName(string)—Specifies the name of the property from the business object this editor is bound to.
• PropertyValue(object)—Defines the value of the property from the business object this editor is bound to.
• EditorValue(object)—Specifies the current edited value, before applying it to the business object.
• IsReadOnly(bool?)—Specifies whether the current editor is in a read-only mode.
• ValidationMode(Telerik.Maui.Controls.DataFormValidationMode)—Defines the current validation mode of the DataForm editor.
• CommitMode(Telerik.Maui.Controls.DataFormCommitMode)—Specifies the current commit mode of the DataForm editor.
• ColumnSpacing(double)—Specifies the horizontal spacing between the rows in the editor.
• RowSpacing(double)—Specifies the vertical spacing between the rows in the editor.
• ErrorDisplayOptions(Telerik.Maui.Controls.DataFormErrorDisplayOptions?)—Specifies the display options of the header.
• ErrorLength(Microsoft.Maui.GridLength)—Specifies the length of the error in the editor. This property has an effect only when the Telerik.Maui.Controls.DataFormEditor.ErrorPosition property is set to Beside.
• ErrorPosition(Telerik.Maui.Controls.DataFormErrorPosition?)—Specifies the error position in the editor.
• ErrorImageSource(Telerik.Maui.Controls.ImageSource)—Specifies the image source of the error icon.

AutoComplete control as a Custom Editor

• XAML

<telerik:RadDataForm x:Name="dataForm" CommitMode="Explicit">
    <telerik:DataFormCustomEditor PropertyName="Accommodation">
        <telerik:DataFormCustomEditor.EditorTemplate>
            <ControlTemplate>
                <VerticalStackLayout>
                    <telerik:RadAutoComplete Text="{Binding Value, Mode=TwoWay, Source={RelativeSource Mode=TemplatedParent}}" 
                                             ItemsSource="{Binding AvailableAccommodations}"/>
                </VerticalStackLayout>
            </ControlTemplate>
        </telerik:DataFormCustomEditor.EditorTemplate>
    </telerik:DataFormCustomEditor>
    <telerik:DataFormCustomEditor PropertyName="Rating">
        <telerik:DataFormCustomEditor.EditorTemplate>
            <ControlTemplate>
                <VerticalStackLayout>
                    <Label Text="Match your expectations"/>
                    <telerik:RadShapeRating ItemsCount="5" 
                                            Value="{Binding Value, Mode=TwoWay, Source={RelativeSource Mode=TemplatedParent}}"/>
                </VerticalStackLayout>
            </ControlTemplate>
        </telerik:DataFormCustomEditor.EditorTemplate>
    </telerik:DataFormCustomEditor>
    <telerik:RadDataForm.BindingContext>
        <local:CustomEditorViewModel/>
    </telerik:RadDataForm.BindingContext>
</telerik:RadDataForm>

And the ViewModel used for the RadDataForm:

• C#

public class CustomEditorViewModel : NotifyPropertyChangedBase
{
    private string name;
    private double rating;
    private string accommodation;

    public CustomEditorViewModel()
    {
        this.AvailableAccommodations = new[]
        {
            "Single Room",
            "Double Room",
            "Appartment",
            "House"
        };
    }

    [Required]
    [Display(Name = "Name", Prompt="Enter first name")]
    public string Name
    {
        get => this.name;
        set => this.UpdateValue(ref this.name, value);
    }

    [Required]
    public double Rating
    {
        get => this.rating;
        set => this.UpdateValue(ref this.rating, value);
    }


    [Required]
    public string Accommodation
    {
        get => this.accommodation;
        set => this.UpdateValue(ref this.accommodation, value);
    }

    [NotMapped]
    public IList<string> AvailableAccommodations { get; }
}

Note that local in the snippet above points to the namespace where the CustomEditorViewModel is defined.

Styling

You can style the custom editor area by setting the BackgroundColor, BorderColor and BorderThickness properties.

Inherited Editor

You can create an inherited editor that inherits from DataFormCustomEditor.