AutoComplete and "Complex Data"

[Benjamin]

Hi,

I was a little flabbergasted when I found out that the "AutoComplete" component only handles "Simple Data" - even though there is a parameter called "valueField" and a subtopic under "Data Binding" called "Complex Data". It is impossible to display i.e. the Name of a Person and have the ID of that person as the value of the "AutoComplete" component. Can you please enable this, it is imperative to working with an autocomplete textfield that value and text can be _different_ and that a value other than the selected text can be accessed.

 

const Members = [{name:'Peter', value:1},{name:'Paul', value:2},{name:'Mary', value:3}]

<kendo-autocomplete #viewBandmembers [(ngModel)]="bandmembers" name="bandmembers" [data]="Members" [filterable]="true" [valueField]="'value'"></kendo-autocomplete>

 

This will display 1,2 and 3 in the AutoComplete component!

Thanks in advance

Benjamin Müller

[Alexander Valchev]

Hello Benjamin,

In case you need to work with complex values (e.g. component displays 'Peter', but the value is 1), use the ComboBox component.

Regards,
Alexander Valchev
Progress Telerik

[Benjamin]

Hi Alexander,

to emulate the autocomplete component I already did that.  Non the less would it be great to have a working and visually pleasing autocomplete component.  With a combobox a user will naturally try to open the combobox, not type in it.  This is not a good UI design.

Is it possible for you to change the combobox into an autocomplete component? Give it a parameter [autocomplete] and hide the dropdown widget. 

Thanks for your help!

Benjamin Müller

 

ps : by the way - even though I'm being a pain in the neck - "kendo-ui for angular" is great.  It saved me so much time and it looks really fabulous! Thanks for the hard work on consistent UI/UX possibilities.

[Dimiter Topalov]

Hi Benjamin,

Thank you for the kind words. Can you please submit a feature request to our UserVoice portal for all features and enhancements that are currently not supported out-of-the-box, but you would like to see as built-in features of our components:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback?category_id=181402

This helps us estimate the customer demand for certain features and prioritize accordingly when updating our roadmap. Thank you in advance.

Meanwhile you can hide the ComboBox dropdown toggle button via CSS to achieve the desired layout, e.g.:

encapsulation: ViewEncapsulation.None,
  styles: [`
    .k-combobox .k-dropdown-wrap .k-select {
      display: none;
    }

    .k-combobox .k-dropdown-wrap>.k-i-close {
      right: 5px;
    }
  `]

https://stackblitz.com/edit/angular-3ujntg?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik