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}
];
}
});
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've run into a problem with ng-table and pagination. Basically I have two datasets and the user can choose which is rendered in the table.
With dataset one there are 2 pages and with dataset two there is only one page. The issue now is that if I navigate to page 2 and then change to dataset 2, I get a blank table with no paging options.
Plunker created below in which you can test this:
http://plnkr.co/edit/0D4ih7bPNf3Jz87Rymc7
My code is pretty much just a copy and paste from an ngtable example:
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
$scope.datasets = ["1","2"];
$scope.dataset = "1";
var data1 = [{name: "One", age: 50},
{name: "Two", age: 43},
{name: "Three", age: 27},
{name: "Four", age: 29},
{name: "Five", age: 34},
{name: "Six", age: 43},
{name: "Seven", age: 27},
{name: "Eight", age: 29},
{name: "Nine", age: 34},
{name: "Ten", age: 43},
{name: "Eleven", age: 27},
{name: "Twelve", age: 29},
{name: "Thirteen", age: 34},
{name: "Fourteen", age: 43},
{name: "Fifteen", age: 27},
{name: "Sixteen", age: 29}];
var data2 = [{name: "Jacob", age: 50},
{name: "Jacob", age: 43},
{name: "Jacob", age: 27}];
var getData = function() {
return $scope.dataset === "1" ? data1 : data2;
};
$scope.$watch("dataset", function () {
$scope.tableParams.reload();
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: function () { return getData().length; }, // length of data
getData: function($defer, params) {
var filteredData = getData();
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
filteredData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$scope: { $data: {} }
});
});
Any ideas welcomed!
Thanks,
Kevin.
http://plnkr.co/edit/Q3GLxP55bGgVB7I28kbY?p=preview
$scope.$watch("dataset", function () {
$scope.tableParams.$params.page=1;
$scope.tableParams.reload();
});
If I have a huge table with ng-grid, and I enabled a checkbox to select all. Is there a way for me to combine this selectAll feature with the filtering box. I mean when I filter out the rows, I want to click the checkbox so that the rows filtered will be all selected; once I clean out filter, those selectedRows are still left so that I can add more rows into it with other filters.
I created a Plunker code template here.
copy code here as well:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOptions = {
data: 'myData',
checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
showSelectionCheckbox: true,
selectWithCheckboxOnly: false,
selectedItems: $scope.mySelections,
multiSelect: true,
filterOptions: $scope.filterOptions
};
});
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' };
});
I'm trying to put ng-grid on the modal window (ui.bootstrap.modal). When grid placed on the main page, everything is ok.
But when I place it into
<script type="text/ng-template"...></script>
I'm getting the following:
"TypeError: Cannot set property 'gridDim' of undefined".
Is there some workaround to place ng-grid on a modal window?
My plunk is here: http://plnkr.co/edit/ctLF6j3WeqSvT3vEM40f?p=preview
http://plnkr.co/edit/SkqwlmfSM6jpgS9rR5Ad
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}, {field: 'remove', displayName:'', cellTemplate: removeTemplate}]
};
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
The modal has it's own scope not inheriting from the scope where you defined the gridOptions, this error occurs if it can't find the gridOptions to set the gridDim on it.