How to bind the ItemsSource of an SfAutoComplete in a SfDataForm?

[Pieter-Jan]

Hi,

I'm trying to create a DataForm where the user can enter the data of a contact. I have a model with 4 properties (all strings): FirstName, Name, Email and PhoneNumber. When I call the page, I get the contacts from the user's phone and I want to use these contacts to autocomplete the form.

So, when the user is typing the FirstName, I want the to show a dropdown with potential contacts.

I added a SfDataForm to my page like so:

<dataForm:SfDataForm

                x:Name="dataForm"

                Grid.Row="0"

                Grid.ColumnSpan="2"

                ValidationMode="PropertyChanged"

                VerticalOptions="FillAndExpand"

                HorizontalOptions="FillAndExpand"

                LayoutOptions="TextInputLayout"

                  DataObject="{Binding UserData}"/>

In the codebehind of that page I added the following:

       public CreateUserPage()

       {

            dataForm.RegisterEditor("ContactAutoCompleteEditor", new ContactAutoCompleteEditor(dataForm));

            dataForm.RegisterEditor("FirstName", "ContactAutoCompleteEditor");

            dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

        }

        private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)

        {

            if (e.DataFormItem != null)

            {

                if (e.DataFormItem.Name == "FirstName")

                {

                    (e.DataFormItem as DataFormAutoCompleteItem).ItemsSource = (this.BindingContext as CreateUserViewModel).Contacts;

                    (e.DataFormItem as DataFormAutoCompleteItem).SelectedValuePath = "FirstName";

                    (e.DataFormItem as DataFormAutoCompleteItem).DisplayMemberPath = "Name";

                }

            }

        }

And my custom editor like so:

public class ContactAutoCompleteEditor : DataFormEditor<SfAutoComplete>

{

    public ContactAutoCompleteEditor(SfDataForm dataForm) : base(dataForm)

    {

        

    }

    protected override SfAutoComplete OnCreateEditorView(DataFormItem dataFormItem)

    {

        return new SfAutoComplete();

    }

    protected override void OnInitializeView(DataFormItem dataFormItem, SfAutoComplete view)

    {

        base.OnInitializeView(dataFormItem, view);

        this.OnUpdateValue(dataFormItem, view);

    }

    protected override void OnUpdateValue(DataFormItem dataFormItem, SfAutoComplete view)

    {

        var cellvalue = this.DataForm.ItemManager.GetValue(dataFormItem);

        if (cellvalue != null && view.Text == cellvalue.ToString())

            return;

        view.Text = cellvalue == null ? string.Empty : cellvalue.ToString();

    }

}

My UserData and Contacts objects are ObservableCollections. 

My code fails in the event on this line:

                    (e.DataFormItem as DataFormAutoCompleteItem).ItemsSource = (this.BindingContext as CreateUserViewModel).Contacts;

ItemsSource is not a property of the DataFormItem, which is not recognized as a DataFormAutoCompleteItem. 

How can I bind my ItemsSource or DataSource of my custom AutoComplete field in my DataForm? The reason I am using a custom editor is because I want to fill in the rest of the form when the user selects an option from the dropdown. I need to be able to catch that event...

[Pieter-Jan]

I first tried to use the regular AutoComplete editor with the AutoGeneratingDataFormItem event. This works, as it populates the autocomplete list.

However, I need to catch the selected value or the click event when a value is selected in the autocomplete dropdown list.

dataForm.RegisterEditor("FirstName", "AutoComplete");

...

(e.DataFormItem as DataFormAutoCompleteItem).ItemsSource = (this.BindingContext as CreateUserViewModel).Contacts;

(e.DataFormItem as DataFormAutoCompleteItem).SelectedValuePath = "FirstName";

(e.DataFormItem as DataFormAutoCompleteItem).DisplayMemberPath = "Name";

Basically, I just need to automatically fill the rest of my form, based on the value selected in the autocomplete dropdown...

Thanks in advance.

[SaiGanesh Sakthivel]

Hi Pieter, 

 

Thank you for contacting syncfusion support. 

 

We have checked the reported query “How to bind ItemsSource for SfAutoComplete in SfDataForm” from our end. We would like to inform you that you can achieve your requirement by setting the RegisterEditor for SfDataform. Please refer to the following code for your reference.

Code Snippet 

dataForm.SourceProvider = new SourceProviderExt(); 

dataForm.RegisterEditor("AutoComplete", new ContactAutoCompleteEditor(dataForm)); 

dataForm.RegisterEditor("City", "AutoComplete"); 

 

#Regarding update the data object according to the autocomplete data.
you can achieved your requirement by using propertychanged Event in SfDataForm to change the editor value according to the autocomplete data. Please refer to the following code snippet for your reference. 

(dataForm.DataObject as DataFormModel).PropertyChanged += DataFormBehavior_PropertyChanged; 

… 

… 

.. 

.. 

private void DataFormBehavior_PropertyChanged(object sender, PropertyChangedEventArgs e) 

{ 

    var dataObject = sender as DataFormModel; 

    var details = DataFormViewModel.Details; 

    if (e.PropertyName == "City") 

    { 

        var country = dataObject.City; 

        foreach(var detail in details) 

        { 

            if(country == detail.City) 

            { 

                dataObject.FirstName = detail.FirstName; 

                dataForm.UpdateEditor("FirstName"); 

            } 

        } 

    } 

} 

 

Please refer to the following sample for your reference. 

 

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataFormXamarin821247520 

 

We hope this helps. Please let us know if you need any further assistance. 

 

Regards, 

SaiGanesh Sakthivel  

[Pieter-Jan]

Thanks for the help, but it's not really a working solution.

There are too many things that can go wrong. Is it possible to register the selection-changed event for the autocomplete dropdown? Using the property-changed event is really not OK. If I correct or change the city, my whole form will keep updating.

Also, I can't change the City field itself if I want to add data that's not in the autocomplete list.

I'm probably trying something that's not really possible...

Thanks for the help, I'll try something else.

[SaiGanesh Sakthivel]

Hi Pieter,  

  

Thank you for the update.  

  

We have checked the reported query “SelectionChanged Event for SfDataForm AutoComplete Editor” from our end. We would like to inform you that you can trigger the selectionchanged event for the Autocomplete editor with the help of OnCreateEditorView override method of the CustomAutoCompleteEditor class. Please refer to the following code snippet for your reference.

Code Snippet
  

public class ContactAutoCompleteEditor : DataFormAutoCompleteEditor  

{  

    public ContactAutoCompleteEditor(SfDataForm dataForm) : base(dataForm)  

    {  

    }  

    protected override SfAutoComplete OnCreateEditorView(DataFormItem dataFormItem)  

    {  

        var autoComplete = new SfAutoComplete();  

        autoComplete.SelectionChanged += AutoComplete_SelectionChanged;  

        return autoComplete;  

    }  

    private void AutoComplete_SelectionChanged(object sender, Syncfusion.SfAutoComplete.XForms.SelectionChangedEventArgs e)  

    {  

        App.Current.MainPage.DisplayAlert("", "selection Changed", "ok");  

    }  

    protected override void OnInitializeView(DataFormItem dataFormItem, SfAutoComplete view)  

    {  

        base.OnInitializeView(dataFormItem, view);  

    }  

}  

  

We hope this helps. Please let us know if you need further assistance. 

  

Regards,  

SaiGanesh Sakthivel