Learning Angular UI Grid, believe the official tutorial has a bug. enter image description here
Here is my code, local.html:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="/Scripts/ui-grid.js"></script>
<script src="/Content/ui-grid.css"></script>
<style>
.grid { width: 500px; height: 250px;}
</style>
<script>
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>
</body>
</html>
Using VS 2015 Community. ui-grid.js is the latest ui-grid - v3.2.9 - 2016-09-21, installed by NuGet. I originally tested in another big project, to test if other code/files interfe the behavivor, I created a new simple web project just to test this, also moved the content of data .js file into .html above. Verified no jQuery files required.
This line should be tag rather than tag, it caused the .css is not loaded: