Editing in .NET MAUI DataForm (SfDataForm)

28 Mar 20235 minutes to read

The data form commits the data and user input to update the value in the underlying data object.

Commit mode

The CommitMode determines when the value should be committed to the underlying data object to allow users to commit only correct values.

The supported commit modes are as follows:

  • LostFocus
  • PropertyChanged
  • Manual

LostFocus

If the commit mode is LostFocus, the value is committed when the editor loses its focus. By default, the DataForm CommitMode is LostFocus.

<ContentPage 
...
 xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
    <dataForm:SfDataForm
        x:Name="dataForm"
        CommitMode="LostFocus">
    </dataForm:SfDataForm>
</ContentPage>
SfDataForm dataForm = new SfDataForm();
this.dataForm.CommitMode = DataFormCommitMode.LostFocus;
this.Content = dataForm;

PropertyChanged

If the commit mode is PropertyChanged, the value will be committed immediately when it is changed.

<ContentPage 
...
 xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
    <dataForm:SfDataForm
        x:Name="dataForm"
        CommitMode="PropertyChanged">
    </dataForm:SfDataForm>
</ContentPage>
SfDataForm dataForm = new SfDataForm();
this.dataForm.CommitMode = DataFormCommitMode.PropertyChanged;
this.Content = dataForm;

Manual

If the commit mode is Manual, the value should be committed manually by calling the SfDataForm.Commit method.

<ContentPage 
...
 xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
    <dataForm:SfDataForm
        x:Name="dataForm"
        CommitMode="Manual">
    </dataForm:SfDataForm>
</ContentPage>
SfDataForm dataForm = new SfDataForm();
this.dataForm.CommitMode = DataFormCommitMode.Manual;
this.Content = dataForm;

The following code commits the value of all the properties in the data object.

this.dataForm.Commit();

NOTE

On manual commit, manual validation will be called to validate the properties before the commit.

NOTE

View sample in GitHub

Value converter attribute

To show the original value in a different format or as a different value, use the DataFormValueConverter attribute.

Changing original value of the DataForm property value using converter

[DataFormValueConverter(typeof(StringToDateTimeConverter))]
[DataType(DataType.Date)]
public string DateTime { get; set; }

public class StringToDateTimeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null || string.IsNullOrEmpty(value.ToString()))
        {
            return DateTime.Now;
        }
        else
        {
            DateTime dateTime;
            DateTime.TryParse((string)value, out dateTime);
            return dateTime;
        }
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value.ToString();
    }
}

Here, the editor will display the original value as DateTime. While committing, it is converted to a string and stored in the data object.

NOTE

View sample in GitHub

Read only mode

The DataForm can be disabled by setting the IsReadOnly property of the data form.

<ContentPage 
...
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
    <dataForm:SfDataForm
        x:Name="dataForm" 
        IsReadOnly="True">
    </dataForm:SfDataForm>
</ContentPage>
SfDataForm dataForm = new SfDataForm();
this.dataForm.IsReadOnly = true;
this.Content = dataForm;

The particular editor can be disabled using attributes and GenerateDataFormItem event.

Using attribute

An editor can be disabled using the EditableAttribute and ReadOnlyAttribute.

[Editable(false)]
public string Name { get; set; }

[ReadOnly(true)]
public string Password { get; set; }

Using event

An editor can be disabled by setting the IsReadOnly property of the DataFormItem.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.FieldName == "Salary")
        {
            e.DataFormItem.IsReadOnly = true;
        }
    }
}