Multiselect doesn't initialise with remote data if parent div is hidden

[Andrew]

By default it looks like syncfusion doesn't fetch data from remote sources if parent div is hidden or not visible.

This is not very good for my UX as I use accordians and tabs a lot, and edit forms just show "2 selected" etc, in the dropdown.

Is there a way to change this default?

This is example

https://stackblitz.com/edit/urjdry?file=index.html

[Sevvandhi Nagulan]

Hello Andrew,  

 

Greetings from Syncfusion support.  

  

  

1. In multiselect component, selected value is updated in the Multiselect view wrapper based on the width calculation.    

2. When parent component like dialog ,tab is made display: none and so components inside dialog or tab (Multiselect) are in hidden state.   

3. When parent element is in display: none, then the offset width of their child is always zero.   

4. Since, in Multiselect, we set the width for the view wrapper based on the component wrapper offset width and because of offset width is zero, view wrapper width is updated as zero.   

5. So, we suggest calling the refresh method in the Dialog or Tab component’s open event to get rid of the reported issue. Refer to the code below.  

 

 

  open: function(args) { 

    args.preventFocus = true; 

    document.getElementById("dialogBtn").style.display = "none"; 

    listObj.refresh(); 

  }, 

 

Please find the sample below,  

Sample link: https://stackblitz.com/edit/etcdlf-gdr4co?file=index.ts

 

 

Regards,  

Sevvandhi N