Deborah's Developer MindScape

         Tips and Techniques for Web and .NET developers.

July 10, 2014

Angular ng-grid Quick Tip

Filed under: AngularJS @ 12:47 pm

I added a grid page to one of my applications using 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
0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘focus’

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:

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:

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.

<script src=”js/jquery.js”></script>
<script src=”js/angular.js”></script>

Now it looks much better:


Hope this tip helps others!


PS circleCheck out my Pluralsight courses!

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2017 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs