Angular kendo-dropdownlist value binding - control changing value on selection

Question

I use the Kendo UI for Angular DropDownList I want to control the value so that it does not change automatically on selected, but I can control it manually.

Their official documentation say as follows:

Use the value property. If the value is set through the value property, you have to hook up to the valueChange event and manually update the value of the value property.

Cool, except for a small problem, it just does not work, it still changes automatically.

Here is the code:

html

<kendo-dropdownlist
         [data]="relationTypes"
         [textField]="'display'"
         [valueField]="'order'"
         [value]="row.relation_type"
         (valueChange)="handleRelationTypeChange(row,$event)">
</kendo-dropdownlist>

ts

   public handleRelationTypeChange(row, $event) {
     this.MyService.updateRelationType($event.order).then((res) => {
            console.log(res);
            row.relation_type = $event;
        },
        (err) => {
            console.log(err);
        });
}

Only if the server returns a successful response, I will change manually. The problem is, as mentioned, that it changes automatically, anyway.

Answer 1

Okay, after many attempts, the answer seems simple. Too bad there is no example on the site.

I guess this will help many others, so:

To prevent an automatic change of value, what I had to do was, change the value binding from

<kendo-dropdownlist
     [data]="relationTypes"
     [textField]="'display'"
     [valueField]="'order'"
     [value]="row.relation_type"
     (valueChange)="handleRelationTypeChange(row,$event)">
</kendo-dropdownlist>

To tow way binding:

<kendo-dropdownlist
     [data]="relationTypes"
     [textField]="'display'"
     [valueField]="'order'"
     [(value)]="row.relation_type"
     (valueChange)="handleRelationTypeChange(row,$event)">
</kendo-dropdownlist>