Activities of "devenderkaur"

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);

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);

Hi, I am working with AspNet Zero v4.x

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; setTimeout(() => { $(this.extendedComboBox.nativeElement).selectpicker('refresh'); }, 0);

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

Hi,

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

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);

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.