Angular ng-grid Quick Tip
I added a grid page to one of my applications using ng-grid (http://angular-ui.github.io/ng-grid/) to provide a quick way to update sets of prices.
But it wasn’t working correctly. If I edited one price and clicked to the next row, the edit box on the prior row did not close. After editing three prices the grid looked like this:
And looking at the output, I found this:
Exception was thrown at line 3494, column 17 in http://localhost:3950/js/ng-grid-2.0.11.debug.js
After spending the better part of yesterday afternoon trying to figure out what was wrong, I gave up and decided to start fresh again this morning. (Always a good option when you are stuck.)
As part of my debugging, I had found a working example here: http://plnkr.co/edit/hy6Evh?p=preview
So I downloaded that example and started to modify it to match my existing code. Was it the routing? No. Was it the other loaded controls like the date picker or masked edit? No.
It turned out to be the ORDER of the script files in my index.html.
To see the problem in action, try this: http://plnkr.co/edit/p4iLdfoYydZ9LKU312zK?p=preview
This is the *same* as the prior Plunk except for the order of the script files.
For the ng-grid to work correctly, the jquery library must be listed BEFORE Angular.
Now it looks much better:
Hope this tip helps others!
Check out my Pluralsight courses!