Kendo UI Autocomplete - Selected DataItem

10 posts, 0 answers
  1. Alanm
    Alanm avatar
    26 posts
    Member since:
    Mar 2007

    Posted 17 Sep 2018 Link to this post

    It doesn't appear from my testing so far that there is a way to get the underlying Dataitem for the selected result.

    So far, I've tested with assigning an Array of Complex Objects to the AutoComplete's data. Then specifically leaving the textField property out and using a custom renderer so that the results display correctly.

    When I select a result however, because internally toLowerCase() is being called on the value assuming that it is just a string, it blows up...

  2. Alanm
    Alanm avatar
    26 posts
    Member since:
    Mar 2007

    Posted 17 Sep 2018 in reply to Alanm Link to this post

    https://react-afc7sm.stackblitz.io
  3. Alanm
    Alanm avatar
    26 posts
    Member since:
    Mar 2007

    Posted 17 Sep 2018 in reply to Alanm Link to this post

  4. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 18 Sep 2018 Link to this post

    Hello, Alanm,

    Thank you for the example.

    When complex objects are used the textField property is required for the AutoComplete event if a custom render is used.

    I modified the example to demonstrate how to access the dataItem in the change event and how to access it inside the renderer:

    https://stackblitz.com/edit/react-afc7sm-v1opg2?file=app/main.js

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Alanm
    Alanm avatar
    26 posts
    Member since:
    Mar 2007

    Posted 18 Sep 2018 in reply to Stefan Link to this post

    Not quite what I wanted, but you did in fact expose to me that the textField could be populated with something entirely different to the custom renderer.

    Basically, I wanted to be able to achieve this: -

    https://stackblitz.com/edit/react-afc7sm-czv7zb

    This does achieve what I want, but I feel that it's wrong in 2 areas.

    Firstly, I feel that just because I know that internally the textField will end up as the target.value in the change event isn't right... This is missleading considering that it's on a prop called 'value' and I would always assume that by specifying a 'textField' prop, then that would always be UI/display purpose data..?

     

    Secondly, the way I have grabbed the dataItem out as a variable in the change event isn't very clean, I feel that this should be something that occurs on the control internally and that the 'selectedItem.dataItem' should be exposed on e.target along side the value prop?

     

    I'll stick with this solution for now as it works, but feels inefficient having to filter the data to get the underlying selected dataItem...

     

  6. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 19 Sep 2018 Link to this post

    Hello, Alan,

    Thank you for the feedback it is highly appreciated.

    Let me provide more details on why this work in the current way:

    1)  Event target value is actually the value that is displayed. For example, if the user is typing, every character that is typed it will be sent as target.value. The textField and the target.value can match at some point, but not aways. The value is representing the current content of the AutoComplete regardless if this content has any match with the passed data.

    2) We agree with this and we actually change it for the other components like ComboBox, DropDownList etc. The reason that it is not changed for the AutoComplete is that the AutoComplete is firing the change event on typing which creates many cases where the value is not a complete match and we have to return undefined for the value. In the AutoComplete case, we decided that returning the currently typed value is better than returning undefined on every type when there is no match and returning the dataItem only after a match.

    If you have suggestions for improvements please share it with us, we are happy to receive ideas from the community that will help improve the component performance and usability.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 01 Nov 2018 in reply to Stefan Link to this post

    Hi,

     

    is it possible to provide filter option to below example? 

     

    https://stackblitz.com/edit/react-afc7sm-v1opg2?file=app/main.js

     

    As soon as start typing it should filter data

     

    Regards,

    Parag

  8. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 02 Nov 2018 Link to this post

    Hello, Parag,

    If filtering of complex objects with an autocomplete like functionality is required we recommend the ComboBox component as it is designed to better work with complex objects:

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

    Please give it a try and advise if there are issues with using it over the AutoComplete.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 02 Nov 2018 in reply to Stefan Link to this post

    Hi Stefan,

     

    t is working with Combobox but we are in a scenario where we have more than 10k records and combobox might give us performance issue. Therefore we are trying to use autocomplete. Can you please let me know you're thought on this?

     

    Also can you please let me know how can I iterate grid records? I want to save all the records to the database. It is very helpful if you can share the link or any example which demonstrate the same.

     

    Regards,

    Parag

  10. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 05 Nov 2018 Link to this post

    Hello, Parag,

    Apologies for the misleading information. After more tests, I was able to make the AutoComplete work as expected with complex objects.

    I modified the example to demonstrate this:

    https://stackblitz.com/edit/react-afc7sm-mp9tmu?file=app/main.js

    As for iterating the Grid records - The Grid records are the same once passed to the Grid data property. The Grid is not modifying them, and if there is a need to iterate them, then the array passed to the Grid data property has to be iterated.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top