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 (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:

image

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: 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.

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

Now it looks much better:

image

Hope this tip helps others!

Enjoy!

PS circleCheck out my Pluralsight courses!

RSS feed for comments on this post. TrackBack URI

Leave a comment

*

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