I've reviewed the examples here:
https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/
None of the examples show filtering data via a service of some sort. All the data sources are local arrays. Is it possible to use the KendoReact AutoComplete component with a dynamic data source? I've tried to work through it and when I retrieve the data based on the current value the pop-up closes. My unfiltered data source has 4000 records so obviously it's not ideal to retrieve the entire data source and store it locally.
-----------------------
<AutoComplete
data={ userListing }
onChange={ this.coordinator_change }
placeholder="Type coordinator name"
textField="DisplayName"
/>
if (event.target.state.value && event.target.state.value.length > 1) {
this.getUserListing(event.target.state.value); // this method updates the userListing collection
}
5 Answers, 1 is accepted
Hello, Mark,
When filtering the data on the server, the idea is to make a request on the onChange event, and when the response is received to set it in the state.
I made an example showcasing this:
https://stackblitz.com/edit/react-4gcgfa?file=app/main.jsx
I hope it can prove helpful.
Regards,
Stefan
Progress Telerik
Rank 1
Iron
I was using the onChange event, but I had neglected to utilize the "loading" property. After implementing the solution according to your sample, it still isn't working as expected. My code is wrapped in a SharePoint Online webpart, and the AutoComplete lives in a grid cell. The react version of this control just doesn't appear to work as smoothly as the one I've used in the past with the standard Kendo UI library. The delay when typing won't work for this implementation. I think I'm going to use a dropdown, loaded after the user types at least two characters into the filter, to pare down the results, and then use the filter method from there.
Thank you very much for taking the time to post this code snippet. I appreciate the quick reply.
Based on the sample my colleague provided, i can suggest some improvements in the code-sample. The delay in the typing was introduced by incorrect setState logic for the AutoComplete value.
I'm attaching the example bellow, in case you find it useful.
https://stackblitz.com/edit/react-4gcgfa-uxrwjm
Please let me know if you need further assistance, and i will be more than happy to help.
Regards,
Kiril
Progress Telerik
Rank 1
Hi,
In the samples provided I can see when user selects any autocomplete value onchange again fires which again sends call to server.
How can this be stopped.
Hello, Pawan,
What I can suggest in this case is to check if the current value that is selected is already available, and if it is, to not make a request:
https://stackblitz.com/edit/react-4gcgfa-puedzs?file=index.js
Regards,
Stefan
Progress Telerik