Redraw multiselect dropdown

Redraw multiselect dropdown

Posted by: guido.corazza on 30 May 2019, 9:55 am EST

• 

  guido.corazza

  • Post Options:
  • Link
    Copy

  Posted 30 May 2019, 9:55 am EST

  Hi Guys,

  I’m currently working with the wijmo multiSelect component.

  Sometimes when the checkedChange event occurs I need to change the div’s class in which the multi select resides in from span4 to span3.

  The problem i have with this is that even though the multiselect is affected by the class change, the dropdow is not. What happes is that (a) the dropdown remains open in the same position even though the multiselect has moved away, and (b) its width is the same as of a span4.

  One work around for (a) is calling the wjMultiSelect event refresh(true). This helps resolving (a) however not (b), and leads to a pretty annoying behavior to the user in which every time an item is selected the dropdown is closed.

  Is there any workaround for this problem?

  I´ll attach a file in order to be more explainatory.

  Thanks in advance.
  
  Regards,
  
  Guido

• 

  guido.corazza

  • Post Options:
  • Link
    Copy

  Posted 30 May 2019, 9:58 am EST

  I leave here the attachment
  
  Regards

  Attachment.zip

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 31 May 2019, 7:32 am EST

  Hi,

  The position and width of the drop-down in unchanged because the drop-down element is added as a child of the body element instead of the multi-select element. Therefore, changing the class of multi select does not affect the drop-down.

  In order to solve this issue, you could reopen the drop-down using the isDroppedDown property of multi-select. So, in the checkedItemsChanged event, you will need to add this code:

  checkChanged(s, e) {
       //your code for changing the class
       s.isDroppedDown = false;
       // immediatly reopen the drop-down
       s.isDroppedDown = true;
  }
  

  You may also refer to the sample below:
  
  https://stackblitz.com/edit/ckkyne-vxfjus