Angular 5 Handsontable autocomplete issue

Tags: #<Tag:0x00007efc60569fb0>
#1

Hi there

We have Handsontable working fine in AngularJS applications, but when porting to Angular 5/6 with the wrapper, I’m facing issues with the Autocomplete cell

In AngularJs When declaring the search function, we use a service to look up data asynchronously, then resolve the data and pass back to the control. Quite straight forward

In Angular, I’m trying to do the same but declaring a function means local resources such as services are not visible within the function, or when declaring the function with the => syntax, resolving the data does not display the results.

Can you please let me know how async functions to return data for the autocomplete should be structured?

My example here doesn’t work

searchPerson = (query, process) => {
if(query.length > 3){
var results = [];

     this.Api.searchPerson(query)
       .then((res: Array<any>) => {
           results = res.map(x => {
                  return x.userName;
           });
           process(results);
    }

It might not be syntactically perfect as I’m typing from memory, but the gist is there.
The salient point is that the query is executed, but the process(results) does not return the data to the autocomplete control

Thanks!

#2

Hi @escape1979uk

Can you stare a demo? You can use this Angular 6 demo as a base https://stackblitz.com/edit/angular-vydkes?file=src/styles.css

It will be much easier to debug and share the changes.

#3

I can get it working in the staclblitz environment, but not in my own…
Must be something on my side.

I’ll let you know how I get one

Thanks,
Matt

1 Like
#4

ok. Ask me anything if needed

#5

Works ok now

Turns out it was a styling issue that was causing the autocomplete drop down to trim at the height of the grid, so if there was a single row, nothing would display

Thanks

#6

Thank you for sharing an update. I am glad that it works well now.

I am closing the issue.

#7