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...
9 Answers, 1 is accepted
Rank 2
Rank 2
Editable StackBlitz...
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
Rank 2
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...
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
Rank 1
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
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
Rank 1
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
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