How to load the picker editor ItemsSource asynchronously in Xamarin DataForm ?

6 mins read

DataForm picker editor will be loaded for the enum property type, by default. You can also load list or complex type by using the GetSource override method of SourceProvider class and set it to SourceProvider property of data form which is used to set the ItemsSource of picker editor.

It is not possible to directly use async/await method for setting the ItemsSource of picker editor other than enum type, since the return type of GetSource override method is not supported as asynchronous method. Instead, it is possible to return a list of items included in the asynchronous method using the GetSource override method.

Here, the CityName property is used as picker editor.

CityInfo.cs
 
     public class CityInfo
    {
        [Display(Name = "City Name")]
        public string CityName { get; set; }
    }
 
    public class Address
    {
        public int PostalCode { get; set; }
        public string City { get; set; }
    }

In the AutoGeneratingDataFormItem event, you need to set the DisplayMemberPath and ValueMemberPath property values when DataFormPickerItem is complex type property.

 
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem; 
 
 
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
        {
            if (e.DataFormItem != null && e.DataFormItem.Name == "CityName")
            {
                if (Device.RuntimePlatform != Device.UWP)
                {
                    (e.DataFormItem as DataFormPickerItem).DisplayMemberPath = "City";
                    (e.DataFormItem as DataFormPickerItem).ValueMemberPath = "PostalCode";
                }
            }
        }

Refer to the following code to load the picker ItemsSouce asynchronously using the SourceProvider class.

 
    public class SourceProviderExt : SourceProvider
    {
        List<Address> details;
        public override IList GetSource(string sourceName)
        {
            if (sourceName == "CityName")
            {
                GetSources(sourceName);
                return details;
            }
            return new List<string>();
        }
 
        public async Task<IList> GetSources(string sourceName)
        {
            details = new List<Address>();
 
            details.Add(new Address() { City = "Tokyo", PostalCode = 1 });
            details.Add(new Address() { City = "Mexico", PostalCode = 2 });
            details.Add(new Address() { City = "Shanghai", PostalCode = 3 });
            details.Add(new Address() { City = "London", PostalCode = 4 });
            details.Add(new Address() { City = "Paris", PostalCode = 5 });
 
            await Task.Delay(1000);
            return details;
        }
    }

Refer to the following code example for binding the DataObject and registering property using the RegisterEditor method as picker in DataForm.

            dataForm = bindable.FindByName<SfDataForm>("dataForm");
            dataForm.DataObject = new CityInfo();
            dataForm.SourceProvider = new SourceProviderExt();
            if (Device.RuntimePlatform == Device.UWP)
                dataForm.RegisterEditor("CityName", "DropDown");
            else
                dataForm.RegisterEditor("CityName", "Picker");

Note: Picker editor is not supported in Xamarin.Forms.UWP platform.

You can refer to the DataForm user guide documentation to know more about picker:

How to load the picker editor ItemsSource asynchronously in Xamarin DataForm ?

Access denied