valueChange event does not provide complex object

[Casey]

Hello,

Automcomplete html 

<kendo-autocomplete [data]="listItems" [valueField]="'text'" [placeholder]="'e.g. Andorra'"<br>    (valueChange)="valueChange($event)"><br>    </kendo-autocomplete>

 data is binded from array of object

public listItems: Array<{ text: string, value: string }> = [<br>         { text: "Albania", value: "Alb" },<br>         { text: "Andorra", value: "And" },<br>         { text: "Armenia", value: "Arm" },<br>         { text: "Austria", value: "Aus" },<br>         { text: "Azerbaijan", value: "Aze" }<br>     ];

, when valueChange event is fired ,only receive valueField data in valueChange event. I need object of selected item in valueChange event.

please check out this stackbiz demo.

AutoComplete

[Casey]

Stackblitz editable url

https://stackblitz.com/edit/angular-psyuc8

[Dimiter Topalov]

Hello Casey,

The AutoComplete can be value bound to and hold primitive string values only:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/value-binding/

It can be data bound to a collection of complex objects for the list of options, but the value of the component will be always a string.

If you need a DropDown component that supports value-binding to complex objects, we recommend using the ComboBox instead:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/value-binding/

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/value-binding/#toc-object-values

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Alexandre]

Is there a way to have the object feature from the dropdown, and the type feature from the autocomplete?

There are cases that I have lots os data to show in a dropdown, for example a dropdown with customers and hundreds of curtomers on the database.

I would like to type the customer name or Id for example, and go to the server and filter the results.

Is there a way to achieve that with kendo components?

 

[Dimiter Topalov]

Hi Alexandre,

Using the ComboBox instead of an AutoComplete as previously suggested will allow for both value-binding objects, and filtering the list while typing in the input:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/filtering/

You can also check out the following examples demonstrating server-side filtering, and performing filtering after the user input reaches given length:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/filtering/#server-side-filtering

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/filtering/#minimum-filter-length

A similar filtering functionality is available for the DropDownList too, but the UI is  different - a dedicated filtering/search input is displayed when filtering is enabled, and the list of options is opened:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/filtering/

For scenarios, involving lots of data, the developer can utilize the virtual scrolling functionality too:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/virtualization/

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik