PrimeNg dropdown in editable datatable not holding the selected value

Question

Below is the code for the column in the datatable

<p-column field="organization.description" header="Partner" [editable]="dtCostShare" [style]="{'width':'30%'}">
                                                                               <ng-template let-col let-csp="rowData" pTemplate="editor">
 <span class="required-lbl">*                                                         <p-dropdown name="organization" [(ngModel)]="csp.organization.organizationId"  (onChange)="addPartnerDescription(csp.index)"  [options]="partners" [style]="{'width':'10px'}" appendTo="body" [ngClass]="{'errorCol':csp.organization.organizationId === ''}">
</p-dropdown>
 </span>
 <span *ngIf="(csp.organization.organizationId === '' )" class="text-danger">Partner is required</span>
  </ng-template> </p-column>

ts code to populate the droupdown

 getPartners() {
    this.partners.push({ label: 'Please Select', value: '' });
    this.parameterService.getPartners().subscribe((data) => {
      for (let record of data) {
        this.partners.push({ label: record.description, value: record.organizationId });
      }
    });
  }

Whenever i edit the grid the dropdown shows the "Please select" instead of showing the selected Organization name. When i print the "csp.organization.organizationId" it is giving the selected organizationId but [(ngModel)] doesn't seem to set the selected value.

where am i going wrong?

score 1 · Answer 1 · answered Nov 17 '17 at 12:36

1

Had the same issue, I found that, in my case, the app was trying to search the value set in ngModel when the dropdown was still empty.

The solution was to add a *ngIf to be sure that the list wasn't null, in your case it'll be smthng like this :

<p-dropdown *ngIf="partners != null && partners.lenght > 0"
name="organization" [(ngModel)]="csp.organization.organizationId"...

Hope this will help :)

answered Nov 17 '17 at 12:36

Will_plat

11
2

Thanks a lot.Your Solution worked. i changed the if condition to check for length >1. Now the problem is if i have more than one row in the datatable, the selected value for the dropdown in the last row is being set for all the other rows. – user1613338 Nov 19 '17 at 22:54

score 0 · Answer 2 · answered Nov 23 '17 at 23:02

I have fixed this by calling a method (onfocus) of the dropdown and doing dropdown.updateSelectedOption(val); in the method.

 <p-dropdown #dd1 name="organization" [(ngModel)]="csp.organization.organizationId"  placeholder="Please Select" (onFocus)="setSelectedPartner(dd1,label of the selectItem,value of the selectItem)" [options]="SelectItemList" ></p-dropdown>

ts code :

setSelectedPartner(dropdown: Dropdown,label:any ,val:any){
        if(val!='')
      dropdown.updateSelectedOption(val);       }

PrimeNg dropdown in editable datatable not holding the selected value

2 Answers2

ts code :