I have successfully implemented a list of objects for items, but now I am facing a challenge in adding a default selected value.
Below is the HTML code for the drop-down:
<select kendo-drop-down-list
k-options="selectItems"
k-ng-model="selectedItem">
</select>
In my AngularJS (using TypeScript) implementation, I define the drop-down as follows:
this.itemsToSelect = [{id: 1, name: "One"}, {id: 2, name: "Two"}];
this.selectItems = {
optionLabel: "Select items...",
dataTextField: "name",
dataValueField: "id",
dataSource: new kendo.data.DataSource({
transport: {
read: (options) => {
options.success(this.itemsToSelect);
}
}
}),
value: this.itemsToSelect[0]
};
Despite this setup, the default value is not being selected.
I tested their documentation code which works with string items, and noticed that for object items, it required specifying the ID like this:
value: this.itemsToSelect[0].id
Their code snippet using jQuery looks like this:
<script>
let items = [{id: 1, name: "one"}, {id: 2, name: "two"}];
$("#dropdownlist").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: items,
value: items[1].id
});
</script>
However, implementing this in my code did not yield the desired result.
There are no errors in the code. Any suggestions on how to resolve this?
EDIT
As a workaround, I can manually set the selected item like this:
this.selectedItem = this.itemsToSelect[0];
Although this works by setting k-ng-model in the HTML, I am still curious if there's a way to achieve this through the value property within the this.selectItems object?