I am just trying to get a basic Angular UI ng-grid working. We have data coming from sql server data sources with columns with spaces and ngGrid is not recognising those column names. Is there any way to get the ngGrid working with columns with spaces without modifying the schema?
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{"name test": "Moroni", "age": 50},
{"name test": "Tiancum", "age": 43},
{"name test": "Jacob", "age": 27},
{"name test": "Nephi", "age": 29},
{"name test": "Enos", "age": 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field:'name test', displayName:'Name'}, {field:'age', displayName:'Age'}]
};
});
Plunker code here: http://plnkr.co/edit/u6I3P8rG3PlUxsJLXqT1?p=preview
This is possible, but you will need to change your JSON a bit.
You can access the keys with white space by using bracket notation: fields['name test']:
Your JSON will end up looking something like this:
$scope.myData =
[ { fields : {"name test": "Moroni", "age": 50} },
{ fields: {"name test": "Tiancum", "age": 43} },
{ fields: {"name test": "Jacob", "age": 27} },
{ fields: {"name test": "Nephi", "age": 29} },
{ fields: {"name test": "Enos", "age": 34 } } ] ;
And you can set the column definitions this way:
columnDefs: [{field: "fields['name test']", displayName: "fields['Name']" }, {field:"fields['age']", displayName:'Age'}]
Working fiddle:
http://plnkr.co/edit/X7YAjrNXXjk1pbXftoZt?p=preview
There was an issue opened about this, but it was closed. You can see more info here: https://github.com/angular-ui/ng-grid/issues/531
Related
I am using angular-ui-grid and am having problems changing the columns.
TypeError: self.options.columnDefs.forEach is not a function
Code is as follows:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $timeout) {
$scope.columns1 = [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}];
$scope.columns2 = [{field: 'new_name', displayName: 'New Name'}, {field:'new_age', displayName:'New Age'},{field:'pin', displayName:'Pin'}];
$scope.columnsSelected = $scope.columns1;
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
init: function (gridCtrl, gridScope) {
gridScope.$on('ngGridEventData', function () {
$timeout(function () {
angular.forEach(gridScope.columns, function (col) {
gridCtrl.resizeOnData(col);
});
});
});
},
paginationPageSize: 5,
data: {'name':'Apple','age': 5 },
columnDefs: 'columnsSelected'
};
$scope.update_columns = function($event) {
$scope.columnsSelected = $scope.columns2;
$scope.myData = [{new_name: "Moroni", new_age: 50, pin: 123},
{new_name: "Tiancum", new_age: 43, pin: 345},
{new_name: "Jacob", new_age: 27, pin: 567},
{new_name: "Nephi", new_age: 29, pin: 789},
{new_name: "Enos", new_age: 34, pin: 012}
];
}
});
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 have created an ng-grid and want to customise Header Row Template of the grid as i need to add total items in header instead of the footer, but want the same view as footer (i mean the whole row ). I already know about headerCellTemplate and also have already tried it but its not what i am looking for ! if you can help i will be so thankful to you :)
here is sample of my code
$scope.myData = [{"name": "Moroni", "age": 50},
{"name": "Tiancum", "age": 53},
{"name": "Jacob", "age": 27},
{"name": "Nephi", "age": 54},
{"name": "Alex", "age": 53},
{"name": "Jhonny", "age": 22},
{"name": "Ben", "age": 11},
],
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{ field: 'name', displayName: 'Candiate name' },
{ field: 'age', displayName: 'Age', headerCellTemplate: myHeaderCellTemplate }
]
};
You don't need to do that as part of the grid. Just add a div above the grid and put whatever you want in it. You can use the same styles as the footer does to make it match.
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' };
});
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.