Philo Philo - 1 year ago 128
Javascript Question

AngularJS implementing ui-grid

I am attempting to use the ui-grid along w/ AngularJS for the first time. I was initially doing a tutorial on ngGrid... but when I looked up the reference files they all said ui-grid on them.... so now I am a bit confused.

I have referenced the following in my aspx page:-

<script src=""></script>
<script src=""></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.12.0.min.js"></script>
<script src="Scripts/ui-grid.min.js"></script>
<link href="Content/ui-grid.min.css" rel="stylesheet" />

My Javascript to get the GridView to work looks like this:-

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="secondaryContent">
<script type="text/javascript">
var app = angular.module('', ['ngGrid']);
app.controller('UserController', function ($scope) {

$scope.myData = [{ name: "xxxx", age: 50 },
{ name: "yyyy", age: 43 },
{ name: "zzzz", age: 27 },
{ name: "eeee", age: 29 },
{ name: "ffff", age: 34 }];

$scope.gridOptions = {
data: 'myData',
showGroupPanel: true,
jqueryUIDraggable: true


and finally my aspx body looks like:-

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<h1>My AngularJS Application</h1>

<div class="row">
<div style="margin-top: 40px"></div>
<div data-ng-app="" data-ng-controller="UserController">
<b>Employee List</b><br />
<br />
<div class="gridStyle" data-ng-grid="gridOptions"></div>

With all of this in place, I get an empty grid with the following style, referenced through my div class:-

.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px

I must be missing something ... no idea what though.

When I check the console on my browser, it gives me the following error:- Uncaught Error: Unknown provider: $rootScopeProvider <- $rootScope

I created my code in plunker and it works on the emulator but not via my Visual Studio 2013 on the aspx page (it works via an html page):-

Answer Source

You must inject 'ui.grid' not 'ngGrid' and change implementation:

<div id="grid1" ui-grid="gridOptions" class="grid"></div>

Check this example:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download