Folks,
I am trying to use the ng-grid component on my webpage.
I have included the following files in my HTML page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="lib/jquery/jquery.layout-latest.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<!-- Got from the build directory -->
<script src="lib/angular/ng-grid.js"></script>
As for the rest of the code,
I have the following in my controller:
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
I have added the relevant stuff in angular. module declaration too.
However, the ng-grid gets rendered in the following fashion. Has anyone faced anything similar?
Related
Please find the following Plunker. I am not able to show ng grid on button click. Is there anything wrong in the code?
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.changeEntity = function () {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
}
});
First of all, you have to define your gridOptions in your controller onLoad itself, not on a function call. But you can load data on a function call,
in your case its button click.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.gridOptions = { data: 'myData' };
$scope.changeEntity = function () {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
}
});
Note: in your Plunker js file name needs to be changed!!
I noticed that when using nggrid, if the data looks like this:
$scope.myData = [{name: "Moroni", '2004-08-17': 50},
{name: "Tiancum", '2004-08-17': 43},
{name: "Jacob", '2004-08-17': 27},
{name: "Nephi", '2004-08-17': 29},
{name: "Enos", '2004-08-17': 34}];
nggrid can not render the numbers correctly belonging to the date column, any suggestions?
Here is a Plunker link
It looks like ng-grid does not support special characters in field name, so you need to change your field name to not have dashes.
You can read more about it here.
All the example that I see of the ng-grid are those that populate the grid on the controller side. For instance shown below:
$scope.myData = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Arbaaz",age: 11},
{name: "Safiya",age: 6},
{name: "Zane", age: 4}
];
$scope.gridOptions = { data: 'myData' };
And then on the HTML side you use it as
<div class="gridStyle" ng-grid="gridOptions"></div>
How do I populate the grid on the HTML side. For instance inside the controller I make a call to a service which returns a list of employees. Then on the HTML side I am using a regular table
<table><thead></thead><tbody><tr ng-repeat = "employee in employees"</tbody></table>
How would you populate the employees data you receive from a service call on the grid on the HTML side instead or pre-populating on the controller side.
ngGrid watching for data change, so you can populate $scope.myData value after service will return data asynchroniously.
app.controller('MyCtrl', function($scope, $timeout) {
// emulate async service call
$timeout(function() {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
}, 2000);
$scope.gridOptions = {
data: 'myData'
};
});
please see here : http://plnkr.co/edit/bVkGJpZdKBEOA0Uz16mh?p=preview
js:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.service('dataService', function() {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
function getData() {
return data
}
return {
getData: getData
}
})
app.controller('MyCtrl', function($scope, dataService) {
//get data from service
$scope.employees = dataService.getData();
$scope.gridOptions = { data: 'employees' };
});
This GitHub issue says no, but can ng-grid be used when following Angular's "controller as" syntax?
Update:
Here is the basic example as seen on the ng-grid site:
http://plnkr.co/edit/lBgeAf?p=preview
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
});
Here is my attempt at "controler as" syntax using the the basic example:
http://plnkr.co/edit/fI00U1?p=preview
(function() {
angular.module('myApp', ['ngGrid']);
angular.module('myApp').controller('MyCtrl', MyCtrl);
function MyCtrl() {
var vm = this;
vm.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
vm.gridOptions = { data: "myData" };
}
})();
Actually, the controller as syntax is just a shorthand for assign the controller instance into its own $scope, so the MyCtrl as mc would be equivalent to something like this:
function MyCtrl($scope) {
$scope['mc'] = this;
}
Therefore, you could just change the gridOptions to this:
vm.gridOptions = { data: "mc.myData" };
Example plunker: http://plnkr.co/edit/S4wyfB?p=preview
BTW, to prevent a confusion, you should use the same variable name to refer to the controller instance, I mean vm and mc.
Although a bit late, I found a workaround to this issue which requires an assignment to the data array for both $scope.myData and vm.myData, like so:
$scope.myData = vm.myData = [{name: "Moroni", age: 50}, ...];
As the array is a composite data type, this means that the property on scope stores a reference to the object. Thus, you can still use the controller as syntax in your controller to manipulate the data and be sure that the $scope.myData will be updated as well.
Here is a fork of your plunker which shows that it works.
Note: In ngGrid v.3.0 (which is not released yet), controller as syntax works normally and doesn't require any hacks.
you have to use vm as shown below
vm.gridOptions = { data: "vm.myData" };
All of the examples that I can find of ng-grid Mater/Detail, such as the official demo at http://angular-ui.github.io/ng-grid/ do show Master / Detail, but they don't show it with two ng-grids.
How can I do that? I don't even know how to start. It looks like the grid is bound to $scope.gridOptions and $scope is bound to controller, so I don't see how to have two ng-grids in one controller.
Does that mean I need two controllers (connected by a service)?
The HTML
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="fooGridOptions"></div>
<div class="gridStyle" ng-grid="barGridOptions"></div>
</body>
the JS:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.foo = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.bar = [{name: "Moroni", age: 50},
{name: "Foo", age: 43},
{name: "Bar", age: 27},
{name: "FooBar", age: 29},
{name: "JohnJohn", age: 34}];
$scope.fooGridOptions = { data: 'foo' };
$scope.barGridOptions = { data: 'bar' };
});
ng-grid looks in whichever object is passed with the directive(ng-grid="myOptionsObject"). In this case we only have the 'data' property set upon the object but other options are available.