Explicit Data Editors .NET MAUI DataForm (SfDataForm)

Explicitly create data editors

The data form auto-generates the editors based on the data type. You can explicitly add the data editors by adding SfDataForm.Items manually, and you need to change the AutoGenerateItems property to false.

NOTE

Use the FieldName property to bind the editor to the data object property.
GenerateDataFormItem event will not be triggered when AutoGenerateItems is false.

<ContentPage 
            . . . 
            xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm"
            x:Class="GettingStarted.MainPage">
    <ContentPage.BindingContext>
        <local:DataFormViewModel />
    </ContentPage.BindingContext>

        <ContentPage.Content>
        <dataForm:SfDataForm x:Name="dataForm" DataObject="{Binding ContactDetails}" AutoGenerateItems="false">
        <dataForm:SfDataForm.Items>
                <dataForm:DataFormTextItem FieldName="Name" />
                <dataForm:DataFormTextItem FieldName="Password" />
                <dataForm:DataFormGroupItem Name="Address">
                    <dataForm:DataFormGroupItem.Items>
                        <dataForm:DataFormMultilineItem FieldName="Street"/>
                        <dataForm:DataFormTextItem FieldName="State"/>
                        <dataForm:DataFormTextItem FieldName="ZipCode"/>
                        <dataForm:DataFormAutoCompleteItem FieldName="Country" ItemsSource = "{Binding CountryNames}"/>
                        </dataForm:DataFormGroupItem.Items>
                </dataForm:DataFormGroupItem>
            </dataForm:SfDataForm.Items>
        </dataForm:SfDataForm>
    </ContentPage.Content>
</ContentPage>
SfDataForm dataForm = new SfDataForm();
DataFormViewModel contactInfoViewModel = new DataFormViewModel();
dataForm.DataObject = contactInfoViewModel.ContactDetails; 
ObservableCollection<DataFormViewItem> items = new ObservableCollection<DataFormViewItem>(); 
items.Add(new DataFormTextItem() { FieldName = "Name" }); 
items.Add(new DataFormPasswordItem() { FieldName = "Password" }); 
items.Add(new DataFormMultilineItem() { FieldName = "Address" }); 
DataFormGroupItem groupItem = new DataFormGroupItem();
groupItem.Name = "Address";
groupItem.Items.Add(new DataFormMultilineItem { FieldName = "Street" });
groupItem.Items.Add(new DataFormTextItem { FieldName = "State" });
groupItem.Items.Add(new DataFormTextItem { FieldName = "ZipCode" });
groupItem.Items.Add(new DataFormAutoCompleteItem { FieldName = "Country", ItemsSource = contactInfoViewModel.CountryNames }); 
items.Add(groupItem);

dataForm.AutoGenerateItems = false; 
dataForm.Items = items;
this.Content = dataForm;
public class DataFormViewModel
{
    public DataFormViewModel()
    {
        this.ContactDetails = new ContactInfo();
        this.CountryNames = new List<string>
        {
             "United States",
            "United Kingdom",
            "France",
            "Belgium",
            "Germany"
        };
    }

    public ContactInfo ContactDetails { get; set; }

    public IList<string> CountryNames { get; set; }
}
public class ContactInfo
{
    public string Name { get; set; }

    public string Password { get; set; }

    public string Street { get; set; }

    public string City { get; set; }

    public string ZipCode { get; set; }

    public string Country { get; set; }

    public string Email { get; set; }
}

Explicitly add data editor

You can dynamically add the data editor manually by using the Items property of the SfDataForm when AutoGenerateItems is false.

this.dataForm.Items.Add(new DataFormTextItem() { FieldName = "State" });
this.dataForm.Items.Add(new DataFormTextItem() {FieldName = "Country" });

Explicitly remove data editor

You can dynamically remove the data editor explicitly by using the Items property of the SfDataForm when AutoGenerateItems is false.

this.dataForm.Items.RemoveAt(2);

Explicitly clear data editors

You can dynamically clear all the item views from the SfDataForm when AutoGenerateItems is false.

this.dataForm.Items.Clear();

Explicitly replace data editor

You can replace the data editor with a new editor by using the Items property of the SfDataForm when AutoGenerateItems is false.

DataFormTextItem textItem = new DataFormTextItem() { FieldName = "Age" };
this.dataForm.Items[2] = textItem;
    
DataFormDateItem dateItem = new DataFormDateItem() { FieldName ="Date Of Birth", RowOrder = 2, ItemsOrderInRow = 1, ColumnSpan = 3 });

this.dataForm.Items[3] = dateItem;

Explicitly add group editor

You can dynamically add custom group editor by using the Items property of SfDataForm when AutoGenerateItems is false.

DataFormGroupItem dataFormGroupItem = new DataFormGroupItem();
dataFormGroupItem.Name = "Name";
dataFormGroupItem.Items = new ObservableCollection<DataFormItem>();

dataFormGroupItem.Items.Add(new DataFormTextItem() { FieldName = "First Name" });
dataFormGroupItem.Items.Add(new DataFormTextItem() { FieldName = "Middle Name" });
dataFormGroupItem.Items.Add(new DataFormTextItem() { FieldName = "Last Name" });

this.dataForm.Items.Add(dataFormGroupItem);

Explicitly add custom editor

You can add custom editor manually by adding the custom view as an EditorView of DataFormCustomItem.In this case, the editor view will not be generated based on the field type and the RegisterEditor.

<dataForm:SfDataForm x:Name="contactForm"
                    DataObject="{Binding ContactFormModel}" AutoGenerateItems = "False">
                
            <dataForm:SfDataForm.Items>
                <dataForm:DataFormCustomItem FieldName="ProfileImage" ShowLabel="False">
                    <dataForm:DataFormCustomItem.EditorView>
                        <Image Source="ContactImage.png"
                                   HeightRequest="80"/>
                        </dataForm:DataFormCustomItem.EditorView>
                </dataForm:DataFormCustomItem>
            </dataForm:SfDataForm.Items>
</dataForm:SfDataForm>

NOTE

View sample in GitHub

Explicitly create data editors from custom data dictionary

You can explicitly add the data editors from the custom data dictionary and also get the value from the dictionary and set the editors value to the dictionary by implementing DataFormItemManager, which has the methods to get and set values for the editors.

Dictionary<string, object> dictionary = new Dictionary<string, object>();
dictionary.Add("Name", "John");
dictionary.Add("Password", "1234");

ObservableCollection<DataFormViewItem> items = new ObservableCollection<DataFormViewItem>();
foreach (var key in dictionary.Keys)
{
    DataFormItem dataFormItem = null;
    if (key == "Name")
    {
        dataFormItem = new DataFormTextItem()
        {
            FieldName = key,
            LayoutType = DataFormLayoutType.TextInputLayout,
        };
    }
    else if (key == "Password")
    {
        dataFormItem = new DataFormPasswordItem()
        {
            FieldName = key,
            EditorTextStyle = new DataFormTextStyle { TextColor = Colors.Violet },
        };
    }

    if (dataFormItem != null)
    {
        items.Add(dataFormItem);
    }
}

dataForm.Items = items;
dataForm.AutoGenerateItems = false;
dataForm.ItemManager = new DataFormItemManagerExt(dictionary);
public class DataFormItemManagerExt : DataFormItemManager
{
    Dictionary<string, object> dataFormDictionary;

    public DataFormItemManagerExt(Dictionary<string, object> dictionary)
    {
        dataFormDictionary = dictionary;
    }

    public override object GetValue(DataFormItem dataFormItem)
    {
        return dataFormDictionary[dataFormItem.FieldName];
    }

    public override void SetValue(DataFormItem dataFormItem, object value)
    {
        dataFormDictionary[dataFormItem.FieldName] = value;
    }
}

NOTE

View sample in GitHub