CODEWITHSUNDEEP
angularkendo-uikendo-ui-angular2
K.Z
K.Z

Reputation: 5075

Angular 2, filtered nested drop-down list based on parent drop-down selection

I am working on Kendo Drop-down in Angular 2 application. I have two drop-downs, listed of second drop-down depend on first drop down selection. In component side I can see its filtering correct list but 2nd dropdown always shows same list as first not sure why!

template

<div>

 <p>Listed Clients</p>

  <kendo-dropdownlist [data]="clientsData" [(ngModel)] = "selectedClient" [textField]="'name'" [valueField]="'id'"  (ngModelChange)="onChangeClientSelection($event)" class="full-width">
  </kendo-dropdownlist>
</div>


<div *ngIf="consultationsData">
   {{consultationsData[0].name}}

     <p>Listed Consultation</p>

   <kendo-dropdownlist [data]="consultationsData" [(ngModel)] = "selectedClient" [textField]="'name'" [valueField]="'id'"  (ngModelChange)="onChangeClientSelection($event)" class="full-width">
  </kendo-dropdownlist>

</div>

component

export class myComponent implements OnInit {

 private clientConsultationDataItem:any;
 private clientsData:any[];
 private consultationsData:any;

 private getClientFilterConsultation(clientReference:any){
   this.clientConsultationDataItem.forEach(element => {

  if(clientReference["id"] == element.client["id"]){
    this.consultationsData = element.consultations;
    console.log("listed consultation ", this.consultationsData);
   }
 });
}


public onChangeClientSelection(event:any)
{
  console.log("dropdown event fired", event);
  this.getClientFilterConsultation(event);
}

Upvotes: 0

Views: 442

Answers (2)

topalkata
topalkata

Reputation: 2098

You can also check out the following documentation example of cascading DropDownLists:

DOCS DEMO

Upvotes: 0

K.Z
K.Z

Reputation: 5075

I have mess with NgModel incorrectly 

<div *ngIf="consultationsData">

 <p>Listed Consultation</p>
  <kendo-dropdownlist name='ConList'
   [data]="consultationsData" 
   [(ngModel)] = "selectedConsultation" 
   [textField]="'name'" 
   [valueField]="'id'" 
   class="full-width">
  </kendo-dropdownlist> 
</div>

Upvotes: 0

Related Questions