How to input a percentage using the NumericEditor in the .NET MAUI DataForm (SfDataForm)?

The Syncfusion® .NET MAUI DataForm (SfDataForm) allows you to input a percentage value using the NumericEditor. Here, we demonstrate how to configure this functionality.

C#:

Create a model class with the required fields.

public class DataFormModel
{
   public DataFormModel()
   {
       this.Occupancy = 0.0;
   }

   public double Occupancy { get; set; }
}

C#:

Initialiize the DataFormModel in the DataFormViewModel class.

public class DataFormViewModel
{
   public DataFormModel DataFormModel { get; set; }
   public DataFormViewModel()
   {
       this.DataFormModel = new DataFormModel();
   }
}

C#:

Set up the GenerateDataFormItem event handler to customize the DataFormNumericItem for percentage input.

this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
   if (e.DataFormItem != null)

   {
       if (e.DataFormItem.FieldName == "Occupancy" && e.DataFormItem is DataFormNumericItem percentage)
       {
           percentage.AllowNull = false;

           // In C#, the backslash '\' is an escape character, so to include a literal backslash in a string, need to use a double backslash '\\'.
           
           percentage.CustomFormat = "0\\%";
           percentage.ShowClearButton = false;
           percentage.Maximum = 99.0;
           percentage.Minimum = 0.0;
           percentage.Keyboard = Keyboard.Numeric;
       }
   }
}

Download the complete sample from GitHub.

Output:

Conclusion:

I hope you enjoyed learning how to input a percentage using the NumericEditor in the .NET MAUI DataForm (SfDataForm).

Refer to our .NET MAUI DataForm feature tour page for its other groundbreaking feature representations. You can also explore our .NET MAUI DataForm documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads age. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI DataForm and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!