Angular UI-GRID not displaying the grid on the page
Question
Even after lot of research am not able to find one good example which can help me run the angular UI-GRID example locally.
Here is the HTML file which am using, A simple file called index.html :
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="release/ui-bootstrap-tpls-0.12.1.min"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="release/ui-grid-unstable.css"/>
<link rel="stylesheet" href="main.css"/>
<script src="release/ui-grid-unstable.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>
</body>
</html>
Here is the app.js which you can place in the same path as that of html.
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
}]
,columnDefs: [field: 'firstName', displayName: 'First Name', width: '30%', maxWidth: 200, minWidth: 70],
[field: 'lastName', displayName: 'Last Name', width: '30%', maxWidth: 200, minWidth: 70];
}]);
The ui-grid-unstable.js and ui-grid-unstable.css is downloaded from the link :
http://ui-grid.info/release/ui-grid-unstable.js and http://ui-grid.info/release/ui-grid-unstable.css
Please please do help me as am just spending time to run this.
I was able to run the ng-grid for my requirement but since there was no column and row adjustment feature i have to switch to ui-grid now.
3 answers
solution1
1 2015-04-06 09:19:10
I have also started learning AngularJs recently. If you want to use AngularJs then you could get some help from this link. http://angular-ui.github.io/ng-grid/ . While doing R&D on AngularJs I found this link. Hope this could be helpful. In order to user ng-grid you can either git checkout or download the zip (or use bower) from here https://github.com/angular-ui/ng-grid/tree/2.x
Updated `Refer this http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview
<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />`
Yes @suraj this is the one.
Hope it will also help others
solution2
0 2015-04-06 22:14:29
What errors are you getting on the javascript console and/or on the networks tab (if in Chrome) for files not being loaded?
My best guess is that you haven't downloaded the ui-grid release files and put them into a release folder as release/ui-grid.js and release/ui-grid.css. But your index.html file is telling your browser this is where it can find these files.
Once you work through this, you're also going to have problems with fonts, as you need to also download the font files and install them locally. The exact location depends on your build scripts and some other things, but in general the css will expect them to be in fonts/xxxxx.
solution3
0 2015-04-09 01:58:15
The link provided by Reena : http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview
Helps to start the ui-grid.
If am not wrong these are the lines which i was missing :
<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.