This is a migrated thread and some comments may be shown as answers.

AutoComplete and "Complex Data"

3 Answers 135 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Benjamin
Top achievements
Rank 1
Benjamin asked on 27 Aug 2018, 12:12 PM

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

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 28 Aug 2018, 08:08 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Benjamin
Top achievements
Rank 1
answered on 28 Aug 2018, 08:16 AM

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.

0
Dimiter Topalov
Telerik team
answered on 30 Aug 2018, 07:09 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Benjamin
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Benjamin
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or