In my previous post I described upgrading to ui-grid 3.0, which is the not-yet-beta version of ng-grid. Over time this will offer significant benefits, at the moment it feels like a faster ng-grid. As part of implementing it on my core application I needed to rewrite the library routines for my end-to-end testing using protractor. These were reasonably tricky to work out, so I thought I’d post them here for anyone else trying something similar.
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.
I’ve been working on making an editable ngGrid, allowing users to directly edit the grid rather than going to a detail page. I’m seeing that there are two modes of operation – for simple things (maybe changing the status of a bunch of items), it’s easier to interact with the grid directly. When you want to edit a full item, you’d do this in the detail page.
The aim is to have a grid that you can edit directly, and have it save to the server when you leave the cell you’re editing (this is a reason you wouldn’t want to edit the whole record this way – you’ll end up with lots of spurious saves if the user has lots of cells to edit).
An option if you’re starting a new project now would be to look at my tutorial on the beta ng-grid 3.0. This isn’t ready for production use yet, but feels reasonably close, so if you’re 3 months away from production it could be an option. It has a nicer api for editing.
In this, the sixth post in the rails 4 tutorial, we change our clubs list page to use ngGrid instead of our home-made table. We also implement an edit page for our clubs. A key difference from the rails 3 version of this tutorial is that we’re implementing our edit page as a page rather than a modal dialog.
If you have dropped into the middle of the tutorial you can find the code from the previous step in this tutorial at github:PaulL:tutorial_5, or you can find those tutorial pages either from the index page, or by hitting the tutorials menu in the menu bar above.