SFDATAForm: Editable Dropdown that allows text entrys

[Gregory]

Hi 

I have added a data form which utilizes the drop down control. I have added my own class to make the drop down editor editable allowing the user to type into the control. See below:

public class CustomDropDownEditor : DataFormDropDownEditor
 {
  public CustomDropDownEditor(SfDataForm dataForm) : base(dataForm)
  {
  }
  protected override void OnInitializeView(DataFormItem dataFormItem, SfComboBox view)
  {
   base.OnInitializeView(dataFormItem, view);
   view.IsEditableMode = true;
  }
 }

here is the code behind for my view:

 public MyCertificationAddPage()
  {
   InitializeComponent();
   dataForm.SourceProvider = new SourceProviderExt();
   var myCertificationAddInfo = new MyCertificationAddInfo();
   myCertificationAddInfo.PropertyChanged += DataForm_PropertyChanged;
   dataForm.DataObject = myCertificationAddInfo;
   dataForm.RegisterEditor("DropDown", new CustomDropDownEditor(dataForm));
   dataForm.RegisterEditor(nameof(MyCertificationAddInfo.Description), "DropDown");
  }

  private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
  {
   if (e.DataFormItem != null)
   {
    if (e.DataFormItem.Name == nameof(MyCertificationAddInfo.Description))
    {
     (e.DataFormItem as DataFormDropDownItem).DisplayMemberPath = nameof(CertificationsListResponseModel.Value);
     (e.DataFormItem as DataFormDropDownItem).SelectedValuePath = nameof(CertificationsListResponseModel.Value);
    }

}

I am able to search and select from the suggestions, however I also need to option to for the user to able to type and submit their own option like an entry. Is it possible to do this? I have tried to submit the form when a string typed into the control, however when doing this, the related property in the data object is not being set, it is only being set when selecting one of the suggestions. 

Essentially I need a text entry that shows the user suggestions.

Thanks

Greg

[Ganeshamoorthy Chandramoorthy]

Hi Gregory, 

 

We have checked with your query based on the provided details. Currently we are analyzing your query, we will further analyze and update you the details on or before February 24, 2020. We appreciate your patience until then.

Regards, 

Ganeshamoorthy C 

[Karthikraja Arumugam]

Hi Gregory, 

 

Thank you for your patience. 

 

We have checked your requirement, as per DataFormDropDown editor implementation the property value will commit from ItemsSource. We would like to inform you that to achieve your requirement, in dropdown editor’s Unfocused event get the user provided input value from Text property of DropDown and add it to the ItemsSource of DropDownItem and update the respective property value using DataForm’s DataObject also update editor using UpdateEditor method of dataform. 

 

Please refer the following code example for the same, 

  

    public class CustomDropDownEditor : DataFormDropDownEditor 

    { 

        DataFormDropDownItem dropDownItem; 

        SfDataForm sfDataForm; 

        public CustomDropDownEditor(SfDataForm dataForm) : base(dataForm) 

        { 

            this.sfDataForm = dataForm; 

        } 

        protected override void OnInitializeView(DataFormItem dataFormItem, SfComboBox view) 

        { 

            base.OnInitializeView(dataFormItem, view); 

            view.IsEditableMode = true; 

            view.Unfocused += View_Unfocused; 

            dropDownItem = dataFormItem as DataFormDropDownItem; //Get DropDown instance to use it in unfocused event 

        } 

 

        private void View_Unfocused(object sender, FocusEventArgs e) 

        { 

            var dropDown = sender as SfComboBox; 

            var text = dropDown.Text;  

            var selectedItem = dropDown.SelectedItem;  

 

            if (selectedItem == null || (selectedItem as Details)?.Name?.ToString() != text) 

            { 

                dropDownItem.ItemsSource.Add(new Details { Name = text }); //Add input value to ItemsSource. 

                (DataForm.DataObject as Address).Country = text; // Update property value, here contry is the dropdown field. 

                sfDataForm.UpdateEditor("Country"); // Update editor, it is required if you have used validation. 

            } 

        } 

    } 

 

 

We have prepared a sample for the same, 

Sample link: DataFormDropDown 

 

We hope this helps you. Please let us know if you have any concerns. 

 

Regards, 

Karthik Raja A 

[Gregory]

This solution worked brilliantly thank you.

Is there an easy way to set the text color of the dropdown? 

Thanks

Greg

[Karthikraja Arumugam]

Hi George, 

 

Thank you for the update. 

 

We are glad to know that the provided information helped you to achieve your requirement. We would like to inform you that you can change the DropDown editor’s text color in custom DropDownEditor class OnInititializeView method, in which set TextColor property of view to change the color, you can also change the text color of suggestion items using DropDownTextColor property.  

 

Please refer the following code example for the same,  

   

  public class CustomDropDownEditor : DataFormDropDownEditor 

  { 

        public CustomDropDownEditor(SfDataForm dataForm) : base(dataForm) 

        { 

        } 

        protected override void OnInitializeView(DataFormItem dataFormItem, SfComboBox view) 

        { 

            base.OnInitializeView(dataFormItem, view); 

            view.TextColor = Color.Blue; 

            view.DropDownTextColor = Color.Red; 

            view.IsEditableMode = true; 

        } 

    } 

 

   dataForm.RegisterEditor("DropDown", new CustomDropDownEditor(dataForm)); 

   dataForm.RegisterEditor("Country", "DropDown"); 

 

 

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

 

Regards, 

Karthik Raja A