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)
-
0
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'); -
0
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); -
0
Hi,
Are there any other workarounds that I can Try ? I was unable to make the setTimeout workaround work.
-
0
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 ?
-
0
Hi, I am working with AspNet Zero v4.x
-
0
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);
-
0
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.
-
0
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); -
0
Thanks a lot @DevenderKaur :)
