Make Editable input box of Multi-select drop down in Angular

Make Editable input box of Multi-select drop down in Angular

Posted by: ksm.ac.in on 15 July 2020, 1:22 am EST

• 

  ksm.ac.in

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 July 2020, 1:22 am EST - Updated 3 October 2022, 3:47 pm EST

  Requirement:

  Make input field of drop down editable. So that user can copy single/multiple values string (which comma separated) from any file (text/xls/word) and paste into the input field in this Multi select drop down.

  For example in give image, we want yellow highlighted part(countries) to be editable so we can copy & paste there. Not on red outline one input filed. which is come/enable on showFilterInput = true.

  

  NOTE: Here, if drop down is selected as per copied values is good , if not , its also fine.

  Please let us know , what and how we can achieve all this in wijmo Angular part for in
  
  MultiSelect Control (Angular)

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 July 2020, 2:41 am EST

  Hi,

  We cannot make the input element editable because it is updated internally and the user should not be allowed to enter any new values and should only be able to select the values from the list.
  
  But, we can implement your requirements by handling the keydown event on the input element, getting the pasted values and manually set the checkedItems array.

  Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-tmjutt

  Regards,
  
  Ashwin

• 

  ksm.ac.in

  • Post Options:
  • Link
    Copy

  Posted 13 August 2020, 3:59 am EST

  Hello Team GrapeCity,

  Is there any way to full fill our requirement as per follow:
  
  From the same drop down
  
  #1 User can multi Select (More than one values from given drop down option)
  
  (as we are able to do this by multi-select drop down check boxes)

  #2 User can copy a comma separated string from any file, and paste it into input field of drop down

  #3 check box options will be selected as pasted comma separated string are the values of checkboxes in the drop down

  Currently our main requirement is to make editable input field in any how (the yellow highlighted field in the attached image) so user can copy paste comma separated string into it.

  Please provide your suggestion how we can customize it in our end .

  Thanks in Advance

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 August 2020, 4:26 am EST

  Hi,

  As I said earlier, we cannot make the input field editable. But, we can implement the copy/paste behavior on the input element itself by handling the keydown event. Refer to the updated sample below:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-8cmhwg

  Along with the paste operation, I have also added copy operation on the MultiSelect.

  ~regards