We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Best Approach for Populating Picker with API Calls

I have this SFDataForm sample from Syncfusion, where some fields are Text inputs and others are Pickers.

I want to populate my pickers with three different API calls. Then a user can make selection and create an item. What is the best approach as in the sample, there are hard coded enum values. Please advise. and a sample with API Call will be really helpful. 



7 Replies

KA Karthikraja Arumugam Syncfusion Team January 10, 2020 12:37 PM UTC

Hi Emad, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your requirement of “Loading ItemsSource for picker using API in DataForm”, you can provide ItemsSource for picker using SourceProvider class. DataForm SourceProvider class is used to get values for Picker, DropDown, AutoComplete, RadioGroup and Segment editors. 
 
Please refer the following code example for the same, 
 
[C#] 
dataForm.SourceProvider = new SourceProviderExt(); 
 
public class SourceProviderExt : SourceProvider 
{ 
      public override IList GetSource(string sourceName) 
      { 
                var list = new List<string>(); 
                if (sourceName == "Gender") 
                { 
                    list.Add("Male"); 
                    list.Add("Female"); 
                } 
                return list; 
       } 
} 
 
Kindly refer our UG documentation for the same, 
 
You can also use ItemsSource property of DataFormPickerItem in AutoGeneratingDataFormItemEvent to provide ItemsSource, 
 
Please refer the following code example for the same, 
 
[C#] 
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem; 
 
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e) 
{ 
            if(e.DataFormItem != null && e.DataFormItem.Name == "MaritalStatus") 
            { 
                var list = new List<string>(); 
                list.Add("Married"); 
                list.Add("UnMarried"); 
 
                (e.DataFormItem as DataFormPickerItem).ItemsSource = list; 
            } 
} 
 
Kindly refer our UG documentation for the same, 
 
We have prepared a sample including your requirements, 
 
You can also refer our KB documentation to know about loading picker ItemsSource asynchronously, 
 
We hope this helps. Please revert us if you need any further assistance. 
 
Regards, 
Karthik Raja A 



EA Emad Afaq January 13, 2020 10:07 AM UTC

I ahve attached my code. It does not reflect data from api call. Please Advise

I am suing this end point. 
https://dev.azure.com/{}/{}/_apis/work/teamsettings/iterations?$timeframe=current&api-version=5.1



Attachment: Query_Syncfusion_Picker_e44339fc.zip


KA Karthikraja Arumugam Syncfusion Team January 13, 2020 12:35 PM UTC

Hi Emad, 
 
Thank you for the update. 
 
As we have mentioned in our previous update, you can provide ItemsSource for Picker using SourceProvider class, in which get values from your database and assign it to the ItemsSource. So here DataForm working fine, kindly check the data received from the database has value and convert it into the required data.  
 
Kindly refer our KB documentation to load Picker ItemsSOurce from SQLite offline database, 
 
You can also refer our KB documentation to know more about loading picker ItemsSource asynchronously, 
 
Please revert us if you need any further assistance on SfDataForm, we are always happy to assist you. 
 
Regards, 
Karthik Raja A 



EA Emad Afaq January 13, 2020 12:48 PM UTC

Hi,

I am retrieving it directly from an api http request. The data travels properly but data form does not update it. 

Please check the attached file I gave. 

I feel the navigation takes place and doesnt wait for my call to complete although I am using async await. 

Please see the code


EA Emad Afaq January 14, 2020 03:21 AM UTC

It navigates and doesn't wait for the call to compete. 




KA Karthikraja Arumugam Syncfusion Team January 14, 2020 12:35 PM UTC

Hi Emad, 
 
Thank you for the update. 
 
We are checking the mentioned requirment in source and sample level, we will validate and update you further details on January 15, 2020. We appreciate your patience until then. 
 
Regards, 
Karthik Raja A 



KA Karthikraja Arumugam Syncfusion Team January 15, 2020 11:14 AM UTC

Hi Emad, 
 
Thank you for your patience. 
 
We have checked the mentioned issue and since GetSource method completes the process before API response from database hence picker ItemsSource doesn’t update. You can achieve your requirement by assigning ItemsSource from API response in the DataFormAutoGeneratingItem event. Since ItemsSource is bindable property it will take the value once response completed. 
 
Please refer the following code example for the same, 
 
   
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem; 
 
if (e.DataFormItem != null && e.DataFormItem.Name == "Iteration") 
{ 
                var sprints = await App.Database.GetItemsAsync(); 
 
                List<string> items = new List<string>(); 
                foreach(var k in sprints) 
                { 
                    if(k.Name != null) 
                    { 
                        items.Add(k.Name); 
                    } 
                } 
                (e.DataFormItem as DataFormPickerItem).ItemsSource = items; 
 } 
 
We have prepared a sample for your requirement, 
Sample link: DataFormSample 
 
We hope this helps. Please let us know if you need any further assistance. 
 
Regards, 
Karthik Raja A 


Loader.
Live Chat Icon For mobile
Up arrow icon