Handling selectpicker and dynamic select options

[doddoreul]

Hi, I'm trying to use the custom selectpicker with a dynamically populated "select". Here is the concerned snippet:

<select name="mySelect" id="mySelect" formControlName="mySelect" multiple 
        class="selectpicker"
        data-style="btn-info btn-fill btn-block" 
        data-menu-style="dropdown-blue" 
        data-title="--- select ---">
    <option *ngFor="let option of mySelectList" value="{{option.id}}">{{option.name}}</option>
</select>

The mySelectList is filled with data via a http request in the ngOnInit() method. When I replace the "dynamic" part with a classic html snippet (with 2 or 3 options), the selectpicker works perfectly well. But when the content is added manually, I can't open the dropdown...

It there any clean solution to this? Thanks a lot!

[chelaruc]

@doddoreul thank you for using our product. Can you move this code from ngOnInit to ngAfterViewInit?

if($(".selectpicker").length != 0){
            $(".selectpicker").selectpicker({
                iconBase: "fa",
                tickIcon: "fa-check"
            });
        }

Tell me if it working.

[doddoreul]

Hi, thanks for you answer. It doesn't change :/ I'm sure the data is loaded because it reflects in the default select.. I tried with both ngOnInit and ngAfterViewInit :/

Thanks for your help

Edit: when I say "it doesn't works", I mean: the 'new' dropdown is okay, but the data isn't injected inside it...

[Renattotrinidad]

Hi doddoreul.

This issue is resolved?

[rarestoma]

Hi @Renattotrinidad,

It seems that there was not given any solution for this issue. :(

I made some research and I found a solution that works on my side.

Can you please replace the select picker initialization with the following:

if ($(".selectpicker").length != 0) {
  setTimeout(function () {
     $('.selectpicker').selectpicker('refresh');   // refresh the selectpicker with fetched courses
    }, 1000);
}

Please let me know if it works now.

Thank you, Rares

[Renattotrinidad]

Thank you very much Rares, this solution work for me

El jue., 15 de abril de 2021 12:55 a. m., rarestoma < @.***> escribió:

Hi @Renattotrinidad https://github.com/Renattotrinidad,

It seems that there is no solution for this issue.

I made some research and I found a solution that works on my side.

Can you please replace the selectpicker initialization with the following:

if ($(".selectpicker").length != 0) { setTimeout(function () { $('.selectpicker').selectpicker('refresh'); // refresh the selectpicker with fetched courses }, 1000); }

Please let me know if it works now.

Thank you, Rares

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-light-bootstrap-dashboard-pro-angular/issues/18#issuecomment-820167325, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIKOOMWOCTEGVH7KR7BLHH3TI2EWPANCNFSM4EXK66SA .

[danilolopesabreu]

Until now, same problem here...

[danilolopesabreu]

@rarestoma

This workaround works, but is really sad use this ugly way to make a simple dropdown work. i think the creativetim team should fix this bug from scss.

[rarestoma]

Hi @danilolopesabreu,

Thank you for working with our products.

We are preparing an update for all our Angular products and we will make a better structure that will fix these issues.

Thank you, Rares