Not able to reset the dropdownlist on valueChange event.

[Sushant]

Scenario:
I have 2 dropdownlist, one dropdown, have selected one item and with 2nd dropdown valueChange event trying to reset by doing empty of 1st dropdown data aray but dropdown placeholder not getting removed.

Code Sample:
1st Dropdown
-------------------------------
<kendo-dropdownlist id="ddlf49979b5b8bab429c3fa" name="ddlf49979b5b8bab429c3fa" valuePrimitive="true" [(ngModel)]="one" #ddlf49979b5b8bab429c3fa="ngModel" (valueChange)="ddlOneChange($event)" [data]="ddr_source_ddlf49979b5b8bab429c3fa" [defaultItem]="ddlf49979b5b8bab429c3fa_defaultItem" textField="text" valueField="value"></kendo-dropdownlist>

2nd Dropdown
----------------------------

<kendo-dropdownlist id="ddlf49979b5b8bab429c3fb" name="ddlf49979b5b8bab429c3fb" valuePrimitive="true" [(ngModel)]="two" #ddlf49979b5b8bab429c3fb="ngModel" (valueChange)="ddlTwoChange($event)" [data]="ddr_source_ddlf49979b5b8bab429c3fb" [defaultItem]="ddlf49979b5b8bab429c3fb_defaultItem" textField="text" valueField="value"></kendo-dropdownlist>

TS:
-------------------------
 public ddr_source_ddlf49979b5b8bab429c3fa = [
    { text: "GL", value: "GL" },
    { text: "AH", value: "AH" },
    { text: "CP", value: "CP" },
  ];
  public ddlf49979b5b8bab429c3fa_defaultItem = { text: "Select", value: null };
  public ddlf49979b5b8bab429c3fb = [
    { text: "CN", value: "CN" },
    { text: "GL", value: "GL" },
  ];
  public ddlf49979b5b8bab429c3fb_defaultItem = { text: "Select", value: null };
//Change event for reset 1st dropdownlist
 ddlTwoChange(e) {
    this.ddr_source_ddlf49979b5b8bab429c3fa=[];
  }

Thanks,
Sushant

[Martin]

Hello Sushant,

I am not sure that I understand correctly how exactly the first dropdown should behave in this case.

Currently, the data is removed successfully, but the default item still present, which is expected. I am assuming that when a value from the second dropdown is selected, the first one should not have a set value nor a rendered a default item.

Technically, when the value of the dropdown is invalid, then the default item is shown in the input automatically (if such is set initially). To remove the default item and the value of the first input programmatically, then the bound properties should be set to null:

  //Change event for reset 1st dropdownlist
  ddlTwoChange(e, ddl) {
    this.one = null;

    this.ddlf49979b5b8bab429c3fa_defaultItem = null;

    this.ddr_source_ddlf49979b5b8bab429c3fa = [];
  }

I hope this helps.

Regards,
Martin
Progress Telerik

[Sushant]

Hi Martin,
Yes it is working as expected after applied your code.
Thanks for your help.

Regards,
Sushant