spent a lot of time and I am unable to understand why ui grid is populating last object of array in whole table.
$scope.gridOptions = {
rowHeight:50,
paginationPageSizes: 0,
paginationPageSize: 5
//paginationCurrentPage: 2
};
function pageNumberOrPageSizeChanged(pageNumber, pageSize)
{
console.log("Received: pageNumber=" + pageNumber + ", pageSize= " + pageSize);
$scope.totalPages= $scope.lengthArray/pageSize ;
if($scope.totalPages==pageNumber){
$scope.pageNumber=$scope.pageNumber+1 ;
$scope.Userdata();
console.log($scope.gridOptions.data);
$scope.gridApiUsed.core.notifyDataChange(uiGridConstants.dataChange.ALL);
}
else{
$scope.pageNumber=$scope.pageNumber;
}
}
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApiUsed = gridApi;
console.log($scope.gridApiUsed);
$scope.gridApiUsed.pagination.on.paginationChanged($scope, function (pageNumber, pageSize)
{
pageNumberOrPageSizeChanged(pageNumber, pageSize);
//$scope.$apply();
});
console.log("Current page: " + $scope.gridApiUsed.pagination.getPage());
console.log("index: " + $scope.gridApiUsed.pagination.getTotalPages());
console.log("Page size: " + $scope.gridOptions.paginationPageSize);
}
$scope.gridOptions.data = "myData";
$scope.gridOptions.enableColumnResizing = true;
$scope.gridOptions.enableFiltering = true;
$scope.gridOptions.enableGridMenu = false;
$scope.gridOptions.showGridFooter = true;
$scope.gridOptions.showColumnFooter = true;
//$scope.gridOptions.useExternalPagination=true;
$scope.gridOptions.rowIdentity = function(data) {
return data.id;
};
$scope.gridOptions.getRowIdentity = function(data) {
return data.id;
};
$scope.gridOptions.columnDefs = [
{ name:'_id', width:150,cellTemplate: '<div class="ui-grid-cell-contents"><span>{{COL_FIELD}}</span></div>'},
{ name:'account_title', width:150, enableCellEdit: false, cellTemplate: '<div class="ui-grid-cell-contents"><span>{{COL_FIELD}}</span></div>'},
{ name:'email', width:150, enableCellEdit: false, cellTemplate: '<div class="ui-grid-cell-contents"><span>{{COL_FIELD}}</span></div>' },
{ name:'dateCreated', width:150, enableCellEdit: false, cellTemplate: '<div class="ui-grid-cell-contents"><span>{{COL_FIELD}}</span></div>' },
{ name:'action',width:150, enableCellEdit: false, enableFiltering:false, cellTemplate: '<div class="ui-grid-cell-contents"><button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" ng-click="grid.appScope.open(row)" style=" display: block;margin: auto;width: 100px;">Open</button></div>' },
{ name:'Approve',width:150, enableCellEdit: false, enableFiltering:false, cellTemplate: '<div class="ui-grid-cell-contents"><button type="button" class="btn btn-default approveGrid" data-container="body" data-toggle="popover" data-placement="right" ng-click="grid.appScope.open(row)" >Approve</button></div>' },
{ name:'Discard',width:150, enableCellEdit: false, enableFiltering:false, cellTemplate: '<div class="ui-grid-cell-contents"><button type="button" class="btn btn-default DiscardGrid" data-container="body" data-toggle="popover" data-placement="right" ng-click="grid.appScope.open(row)">Discard</button></div>' },
];
I am updating the myData array of objects through $scope.Userdata(); function.
so basically it check the page no . when it's last page it fetches next batch of results from server and update myData model. but on updating it populate all rows with last object of array.I did not get a chance to clean the code, sorry about that
