Despite defining columns and groups, I encounter an issue while constructing the grid. What could be causing it?
$scope.gridOptions = {
enableFiltering: true,
treeRowHeaderAlwaysVisible: false,
columnDefs: [
{ name: 'suplierName', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'desc' }, width: '30%', cellTemplate: '<div><div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null || ( row.groupHeader && col.grouping.groupPriority === row.treeLevel )" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>' },
{ name: 'InvoiceNumber', width: '25%' },
{ name: 'Description', width: '25%' },
{ name: 'InvoiceDate', width: '40%', cellFilter: 'date', type: 'date' },
{ name: 'CurrencyDate', width: '40%', cellFilter: 'date', type: 'date' },
{ name: 'InvoiceTotal', width: '25%', cellFilter: 'number', type: 'number'},
{ name: 'InvoiceNotPayed', width: '25%', cellFilter: 'number', type: 'number'},
{ name: 'TotalPayment', width: '25%', cellFilter: 'number', type: 'number'}
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
}
};
$scope.gridOptions = {
};
$http.get('http://11.141.111.111/server/api/reports/unpayedInvoicesReport/organization/a255f922-6a4b-11e4-a7ff-53ee038745a3/fromAccount/62386806-fb07-4821-a83b-eab0cc987778/toAccount/62386806-fb07-4821-a83b-eab0cc987778?dateTo=31%2F01%2F2015')
.success(function(data)
{
console.log(data)
for ( var i = 0; i < data.length; i++ ){
//var registeredDate = new Date( data[i].registered );
data[i].suplierName = data[i].suplierName;
data[i].InvoiceNumber = Number( data[i].InvoiceNumber .slice(1).replace(/,/,'') );
data[i].Description = data[i].Opis;
data[i].InvoiceDate = $filter('date')(new Date(data[i].InvoiceDate), 'dd/MM/yyyy')
data[i].CurrencyDate = $filter('date')(new Date(data[i].CurrencyDate), 'dd/MM/yyyy')
data[i].InvoiceTotal = Number( data[i].InvoiceTotal.slice(1).replace(/,/,'') );
data[i].InvoiceNotPayed = Number( data[i].InvoiceNotPayed.slice(1).replace(/,/,'') );
data[i].TotalPayment = Number( data[i].TotalPayment.slice(1).replace(/,/,'') );
}
$scope.gridOptions.data = data;
});
$scope.toggleRow = function( rowNum ){
$scope.gridApi.treeBase.toggleRowTreeState($scope.gridApi.grid.renderContainers.body.visibleRowCache[0]); };
$scope.changeGrouping = function() {
$scope.gridApi.grouping.clearGrouping();
$scope.gridApi.grouping.groupColumn('age');
$scope.gridApi.grouping.aggregateColumn('state', uiGridGroupingConstants.aggregation.COUNT);
};
$scope.getAggregates = function() {
var aggregatesTree = [];
var gender
var recursiveExtract = function( treeChildren ) {
return treeChildren.map( function( node ) {
var newNode = {};
angular.forEach(node.row.entity, function( attributeCol ) {
if( typeof(attributeCol.groupVal) !== 'undefined' ) {
newNode.groupVal = attributeCol.groupVal;
newNode.aggVal = attributeCol.value;
}
});
newNode.otherAggregations = node.aggregations.map( function( aggregation ) {
return { colName: aggregation.col.name, value: aggregation.value, type: aggregation.type };
});
if( node.children ) {
newNode.children = recursiveExtract( node.children );
}
return newNode;
});
}
aggregatesTree = recursiveExtract( $scope.gridApi.grid.treeBase.tree );
console.log(aggregatesTree);
};
}])After receiving data from the server, a certain error occurred:
angular.js:11607 TypeError: b.forEach is not a function
at p.modifyRows (ui-grid.min.js:7)
at ui-grid.min.js:7
at processQueue (angular.js:13189)
at angular.js:13205
at Scope.$eval (angular.js:14401)
at Scope.$digest (angular.js:14217)
at Scope.$apply (angular.js:14506)
at done (angular.js:9659)
at completeRequest (angular.js:9849)
at XMLHttpRequest.requestLoaded (angular.js:9790)
As a newbie to Angular, any suggestions or tips would be greatly appreciated :) This is my first attempt at implementing UI-grid, and its features are essential for my project. Thank you!