Base solution for your next web application
Open Closed

selectpicker ui-jq behaving anonymously for dynamic dropdown #4296


User avatar
0
devenderkaur created

Hi I Have Dynamically generated DropDowns .Select picker has already called the refresh method.While retrieving data from server it is populating the record of only First Drop Down at the first load. But when i refresh the page,then it populates the records of all other Drop Downs. How can we make it filled at the first load itself??

Below is the HTML Code:- <div *ngFor="let extend of extendedAttributeFixed" class="form-group form-md-line-input form-md-floating-label no-hint"> <select #extendedComboBox name="extendedCombo" class="form-control" [attr.data-live-search]="true" jq-plugin="selectpicker" (ngModelChange)="onChange($event,extend .id)" [(ngModel)]="examineeExtInput.ExtendedAttributeId"> <option *ngFor="let items of extendedAttributeItem | ExtendPipe:extend .id" [value]="items.id" > {{items.name}} </option> </select> </div>

Below is the ts Code:- @ViewChild('extendedComboBox') extendedComboBox: ElementRef; $(this.extendedComboBox.nativeElement).selectpicker('refresh');

If I removes jq-plugin="selectpicker" from Dropdown then it works fine but it will become a simple Dropdown.


9 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Probably your code and jq-plugin is not running in the correct order. Can you try to run your below code in setTimeout ?

    $(this.extendedComboBox.nativeElement).selectpicker('refresh');
    
  • User Avatar
    0
    devenderkaur created

    Hi , Yes i have tried it with SetTimeout also.Even by increasing the Time Limit,but same result .

    setTimeout(() => {
            $(this.extendedComboBox.nativeElement).selectpicker('refresh');
        }, 0);
    
  • User Avatar
    0
    devenderkaur created

    Hi,

    Are there any other workarounds that I can Try ? I was unable to make the setTimeout workaround work.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @DevenderKaur,

    Sorry we didn't have time to try this but we will try to find a solution for your case. Are you working on AspNet Zero v4.x or v5.x ?

  • User Avatar
    0
    devenderkaur created

    Hi, I am working with AspNet Zero v4.x

  • User Avatar
    0
    devenderkaur created

    Hi, I Solved my Issue.Below are the changes that i made and it worked for me. HTML Code <div *ngFor="let extend of extendedAttributeFixed; let i = index;" class="form-group form-md-line-input form-md-floating-label no-hint"> <select id="combobox{{i}}" name="extendedCombo" class="form-control" [attr.data-live-search]="true" jq-plugin="selectpicker" (ngModelChange)="onChange($event,extend .id)" [(ngModel)]="examineeExtInput.ExtendedAttributeId"> <option *ngFor="let items of extendedAttributeItem | ExtendPipe:extend .id" [value]="items.id" [selected]="items.id===items.selecteditem" > {{items.name}} </option> </select> </div> Below the Ts code:- setTimeout(() => { for (let i = 0; i < this.extendedAttributeFixed.length ; i++) { $('#combobox' + i).selectpicker('refresh'); } }, 100);

  • User Avatar
    0
    aaron created
    Support Team

    Thanks for letting us know!

    What did you change specifically?


    Tip: Wrap your code in the following for formatting and readability:

    [code]
    

    [/code:34mznxbu] A shortcut is to highlight your code and click on the </> button in the formatting toolbar.

  • User Avatar
    0
    devenderkaur created

    Hi, As far as my understanding the problem is somewhere with Refreshing the multiple selectpicker which are created dynamically using Native Element/Element Ref.If we simply Refresh the SelectPicker with Direct Id.Then It works.For this I Made some changes in my HTML file and Ts Code. In Html , I Replaced #extendedComboBox with id . My previous Code

    <div *ngFor="let extend of extendedAttributeFixed" class="form-group form-md-line-input form-md-floating-label no-hint">
    <select #extendedComboBox name="extendedCombo" class="form-control" [attr.data-live-search]="true" jq-plugin="selectpicker"
    (ngModelChange)="onChange($event,extend .id)"
    [(ngModel)]="examineeExtInput.ExtendedAttributeId">
    <option *ngFor="let items of extendedAttributeItem | ExtendPipe:extend .id" [value]="items.id" >
    {{items.name}}
    </option>
    </select>
    </div>
    

    My Latest Code

    <div *ngFor="let extend of extendedAttributeFixed; let i = index;" class="form-group form-md-line-input form-md-floating-label no-hint">
    <select id="combobox{{i}}" name="extendedCombo" class="form-control" [attr.data-live-search]="true" jq-plugin="selectpicker"
    (ngModelChange)="onChange($event,extend .id)" [(ngModel)]="examineeExtInput.ExtendedAttributeId">
    <option *ngFor="let items of extendedAttributeItem | ExtendPipe:extend .id" [value]="items.id" [selected]="items.id===items.selecteditem" >
    {{items.name}}
    </option>
    </select>
    </div>
    

    In Ts Code My Previous Code

    setTimeout(() => {
            $(this.extendedComboBox.nativeElement).selectpicker('refresh');
        }, 0);
    

    My Latest Code

    setTimeout(() => {
    for (let i = 0; i < this.extendedAttributeFixed.length ; i++) {
    $('#combobox' + i).selectpicker('refresh');
    }
    }, 100);
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks a lot @DevenderKaur :)