AutoComplete and "Complex Data"

4 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    3 posts
    Member since:
    Nov 2017

    Posted 27 Aug 2018 Link to this post

    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

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 28 Aug 2018 Link to this post

    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.
  3. Benjamin
    Benjamin avatar
    3 posts
    Member since:
    Nov 2017

    Posted 28 Aug 2018 in reply to Alexander Valchev Link to this post

    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.

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1274 posts

    Posted 30 Aug 2018 Link to this post

    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.
Back to Top