Back to blog home page

How to Execute Autocomplete in ng-grid

Posted by on Nov 24, 2014

In a previous post you learned how to use Typeahead with a Real REST API. In this follow-up blog post, we will take another step forward and integrate typeahead with ng-grid and make ng-grid editable.

Objective:

Get a list of Customers using Backand’s REST API. Then populate ng-grid and enable editing the job titles of customers directly from ng-grid. By using Backand’s autocomplete API you will get the job title data. With the end result looking like this:

typeahead_2_blog_image

For a working example head over to Plunker, http://plnkr.co/edit/iUVqck?p=preview.

Assumptions:

1. You have gone through the previous ng-grid blog posts which explain integrating ng-grid with Backand’s REST service.
2. You will use Backand’s REST service. For production projects please register at http://www.backand.com/ and follow steps in connecting your Database.

Getting Started:

In the first typeahead post, you implemented typeahead outside the ng-grid and used it to filter the data in ng-grid. Now, you will enable the job title cell in every row to be editable using typeahead. For that to be possible, you need to edit the cell’s column definition to show custom HTML that has typeahead specific markup.

You will add the new functionality on top of previous work so as to make this simpler. So, let’s start by changing the gridOptions to reflect the following:

You can now get rid of the filter applied in the previous blog post, as that functionality is no longer required.

Next Steps:

With the addition of the above code, typeahead is now implemented for the Title cell. But if you type into this input field, you cannot really see the typeahead options. This is because of a CSS property on ‘ngCell’. Its overflow is set to hidden so your typeahead dropdown options are not visible.

Let’s fix this by setting the ‘ngCell’ class overflow property to ‘visible’. You can add this in style.css and load it after ng-grid.css so that your fix overrides the original property.

By adding this line of code, the typeahead dropdown options are now visible as you type into the title input field.

When you click on any dropdown option of typeahead, the customer title needs to be updated to Backand’s REST in real time. The following lines of code achieve this.

In the above function, ‘entity’ is the entire row that is the customer object itself. And the ‘selectedItem’ is the dropdown option that the user clicked on. You need to capture the ID of the customer in order to make an update to the correct customer. The body of the request should be an object with a single ‘Job_Title’ field reflecting the ID of the new title object. If the update is successful, you will get the updated list of customers from Backand’s REST. If it’s not successful, you would log a message into the console. We now have the controller code fully set up.

Lastly:

The only thing missing is the service that makes the actual UPDATE to Backand’s REST. So, let’s get the remaining pieces stitched together. Add this new function to ‘backandService’ that does the UPDATE action on customer.

Also update the object returned by ‘backandService’ to reflect your changes.

Now you have all the pieces of the puzzle nicely placed next to each other.  And finally, you have an ng-grid integrated with edit functionality using typeahead.

typeahead_2_blog_image

References:

ng-grid Documentation: http://angular-ui.github.io/ng-grid/
Typeahead: http://angular-ui.github.io/bootstrap/#/typeahead
Code: http://plnkr.co/edit/iUVqck?p=preview

Build your Angular app and connect it to any database with Backand today. – Get started now.

перехват трафика wifiкейлоггер для androidla elite escorts