kendo angular dropdown setting a value programmatically

Question

Using kendo angular dropdown, I can set the data and default value, but for some reason setting the value later on from the available options does not work?

i have a basic data model of {id:x, value:y}. what is the correct code to set the value after the dropdown was initialized?

using latest version of angular and kendo.

initializing the value with:

public areaModel: {id:number, value: string}

then I tried to set it with:

this.areaModel = {id: data.site.siteId, value: data.site.siteName}

the actual dropdown is:

<kendo-dropdownlist [data]="area" [(ngModel)]="areaModel" [textFIeld]="value" [valueField]="id"></kendo-dropdownlist>

do ignore typo errors since I'm typing this amnually - the code is in a closed system.

also, everything else is working' I can set the data, I can get the selected value.

Answer 1

The correct syntax should be:

<kendo-dropdownlist [data]="area" [(ngModel)]="areaModel" textField="value" valueField="id"></kendo-dropdownlist>

You can also set the value of any kind of Kendo dropdown with the value property. For example with the Kendo dropdownlist, it works like this:

<kendo-dropdownlist [data]='area' formControlName='area' [value]='area[0]'></kendo-dropdownlist>

Of course in this case you have to be sure that there is at least one element in your area array.

I guess you already looked into the documentation for value binding using dropdowns, but just in case, here it is.