Post navigation

Upgrading to ng-grid 3.0 (ui-grid)

In this tutorial segment I upgrade the league application to use the new ui-grid (ng-grid 3.0). Note that ui-grid is at this time still early beta, but offers the likelihood of better performance, a cleaner interface, easier edit in place, and removes the previous dependency on jQuery.

We then obtain the beta files for the new ui-grid. These aren’t installable with bower at the moment, so we download them directly following the links in the ng-grid github. Create a directory vendor/ui-grid, and in that directory:

We then follow the upgrade instructions to change our code to use ui-grid properly. First, we change our controllers in src/app/team/team.js and src/app/club/club.js to include ui.grid instead of ngGrid:

Next, the ui-grid has split out many of the functions into standalone modules, including ui.grid.edit and ui.grid.resizeColumns. The full API can be found in the docs. We’d like to provide edit in place functionality, and to make our columns resizable.

This works, but it calls update after each field edit. It would be preferable for this to be called after the user clicks off the row. This can potentially be achieved through using ui.grid.selection, and the rowSelectionChanged event, although I haven’t implemented that as yet.

The filter functionality also requires modification to continue working. Referring to the tutorial, and guessing a bit from looking at the code, we can make the following changes to the teams controller. We’re turning on filtering on the grid, and if the clubId is present, we’re setting a filter term on the club id column:

The code is in github, although obviously if you didn’t want to run rails that doesn’t help you much. The application won’t run without a backend, so cannot go into a plunker. I can do a screenshot, but it’s not all that exciting, it looks like the screenshots in the previous sections of the tutorial, but just with a 3.0 grid (which still looks like a grid). The UI is not all that pretty, so not much to look at.

Hi PaulL, a question? there is any method for get a list of renderedRows of ui-grid? getVisibleRows return all rows in the grid and I need only the rows rendered in the screen. I need to update some data in the rows rendered but I don´t know what event to subscribe and I don´t find a method to call.

Hi Paul – off topic – didn’t know how to contact you — in your GitHub work for ui grid, you mentioned that you added setRowsClean(dataRows). Is there a way to set a single row to be clean, such as in a cancel edit scenario on the row?