Using protractor to e2e test ui-grid 3.0 (ng-grid)

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.

Continue reading


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.

This code is built on the rails4 tutorial that I have previously written, and in particular uses as a starting point step 10 of that tutorial, which is available at github: PaulL : tutorial_10.

Continue reading

Editable ngGrid, with both dropdowns and selects

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.

Continue reading

6: Adding ngGrid, and edit page, and CSRF/JSONP protection

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.

Continue reading