Resolve Array length in Angular UI-grid and dynamically enable/disable paging - angularjs

I am getting a nested collection from service. When i am mapping field to Array with Array.length it is giving me output. BUT when i try
field: Auditlogs[Auditlogs.length-1].auditState.StateName . It stops working. Please help me on this.
I also want to disable Pagination based on a Flag in $scope. Below is my ui-grid setting
$scope.gridOptions = {
data: 'auditList',
enableColumnResizing: true,
paginationPageSizes: [10, 25, 50],
paginationPageSize: 10,
enablePaginationControls: false,
enableFiltering: false,
enableSorting: true,
useExternalPagination: true,
columnDefs: [
{
name: 'LOAN #',
cellTemplate: '<a ng-click="grid.appScope.getLoanDetails(row.entity.Loan.LoanNumber,row.entity.Id)">{{row.entity.Loan.LoanNumber}}</a>'
,enableHiding: false
},
{
name: 'Audit Type',
field: 'AuditType.AuditType1'
,enableHiding: false
},
{
name: 'Borrower Last Name',
field: 'Loan.BorrowerLastName'
,enableHiding: false
},
{
name: 'Funding Date',
field: 'Loan.FundingDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\'',
enableFiltering: false
,enableHiding: false
},
{
name: 'Audit start date',
field: 'AuditStartDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
,enableHiding: false
},
{
name: 'Due Date',
field: 'AuditStartDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
,enableHiding: false
},
{
name: 'Finding Count',
field: 'AuditFindings.length',
enableHiding: false
},
{
name: 'Current Status',
field: 'Auditlogs[Auditlogs.length-1].auditState.StateName'
//$scope.auditList[0].Auditlogs[$scope.auditList[0].Auditlogs.length-1].auditState.StateName
,enableHiding: false
},
{
name: 'Cur.Status Dt.',
field: 'AuditStartDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
,enableHiding: false
}
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
$scope.paginationOptions.pageNumber = newPage;
$scope.paginationOptions.pageSize = pageSize;
$scope.getAllPA($scope.flagValue.value);
});
}
};

I Solved the above issue by using CellTemplate instead of Feild
cellTemplate: '<div>{{row.entity.Auditlogs[row.entity.Auditlogs.length-1].auditState.StateName}}</div>'
I am still looking to dynamically enable/disable pagination on Grid.

Related

AngularJs, display function result in ui-grid

I am trying to sum two columns in a function then display their result in the ui grid. any ideas about how to do this, then save the ui grid content in the database?
see the picture
so in my case : a and b are binded from the database, while I want angularjs to calculate their sum and add it in the column "Quantite reelle".
this is my grid code $scope.gridOptions = {
showGridFooter: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.core.on.renderingComplete($scope, function () {
$timeout(function () {
var gridBodyElem = document.getElementById(gridApi.grid.id + '-grid-container');
gridApi.grid.element.on('mouseup', handleGridClick);
});
});
}
};
$scope.gridOptions.columnDefs = [
{ name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
{ name: 'CodeArticle', enableHiding: false, enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
{ name: 'Ref', enableHiding: false, enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
{ name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
{ name: 'Stock', enableHiding: false, enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
{ name: "ajust", enableHiding: false, enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
{ name: "sum", enableHiding: false, enableColumnMenu: false, displayName: "Quantité Réelle(a+b)", width: '14%' },
{ name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];
`
thank you guys.
You need to set column field property to expression.
$scope.gridOptions.columnDefs = [
{ name: "sum", enableHiding: false, enableColumnMenu: false, field:'CalculateSum(a,b)', displayName: "Quantité Réelle(a+b)", width: '14%' }
];
Here a & b are respective column names.
You can try this:
$scope.gridApi.grid.columns[column a].getAggregationValue() +
$scope.gridApi.grid.columns[column b].getAggregationValue()
$scope.gridOptions.columnDefs = [
{ name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
{ name: 'CodeArticle', enableHiding: false,field:'CodeArticle', enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
{ name: 'Ref', enableHiding: false,enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
{ name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
{ name: 'Stock', enableHiding: false,field:'Stock', enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
{ name: "ajust", enableHiding: false, field: 'ajust', enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
{ name: "sum", enableHiding: false, enableColumnMenu: false, field: 'CalculateSum(ajust,Stock)', displayName: "Quantité Réelle(a+b)", width: '14%' },
{ name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];
$scope.CalculateSum = function (ajust, Stock) {
return ajust + Stock;
};
Following Tutorial: 323 More Binding examples I created a Plunker, using a filter calculateSum to calculate the sum of both fields.
angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid'])
.controller('MainCtrl', MainCtrl)
.filter('calculateSum', function () {
return function (input, a, b) {
return input[a]+input[b];
};
});;
MainCtrl.$inject = ['$http', 'uiGridConstants'];
function MainCtrl($http, uiGridConstants) {
var vm = this;
vm.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
vm.gridApi = gridApi;
},
columnDefs: [
{ field: 'name'},
{ field: 'num1'},
{ field: 'num2'},
{ name: 'sum', field: uiGridConstants.ENTITY_BINDING, cellFilter: 'calculateSum:"num1":"num2"' }
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
response.data.forEach(function(row){
row.num1 = row.age;
row.num2 = row.age*2;
});
vm.gridOptions.data = response.data;
});
}

AngularJs Multilple Select in filter

I'm wondering how can i create a filter with multiple options in it.
$scope.gridOptions = {
enableHorizontalScrollbar: 1,
enableFiltering: true,
paginationPageSizes: [150, 300, 450],
paginationPageSize: 150,
rowHeight: 110,
data: data,
columnDefs: [
{ name: 'Cars', field: 'Cars', displayName: 'Cars' , enableCellEdit: false , width :'80' },
{ name: 'Driver', field: 'Driver', displayName: 'Driver' , enableCellEdit: false , width :'80' },
in case I want to filter by two types of cars , how can i do it , do you guys have any example ?
thanks,
First loop the $scope.gridOptions.columnDefs , so you get object names use that object name in your filter.
$scope.gridOptions = {
enableHorizontalScrollbar: 1,
enableFiltering: true,
paginationPageSizes: [150, 300, 450],
paginationPageSize: 150,
rowHeight: 110,
data: data,
columnDefs: [
{name: 'Cars', field: 'Cars', displayName: 'Cars', enableCellEdit: false, width :'80' },
{ name: 'Driver', field: 'Driver', displayName: 'Driver', enableCellEdit: false, width :'80' }
]
};
angular.forEach($scope.gridOptions.columnDefs, function (val, key){
console.log(val, key);
$scope.filterName = val.name; //use this scope variable in filter.
console.log($scope.filterName);
});
Hope this helps you.

How to set filter in columnDefs property in angular UI grid

I have angular ui grid in application and I want a field to be hide if any field value is null or empty.
$scope.gridOptions = {
paginationPageSize: 10,
columnDefs: [
{ displayName: 'First Name', field: 'firstName', headerCellClass: "GridHeader" },
{ displayName: 'Last Name', field: 'lastName', headerCellClass: "GridHeader" },
{ displayName: 'Active Status', field: 'activeStatus', headerCellClass: "GridHeader" },
{ displayName: 'RoleName', field: 'roleName', headerCellClass: "GridHeader" },
]
};
How to put a filter in field. Suppose if my rolename in above code is empty/null then hide the role field from grid.
Any help and suggestion highly appreciated. Thanks in advance:)
Yes, I fixed it.
var result = [];
var gridValue= [
{ displayName: 'First Name', field: 'firstName', headerCellClass: "GridHeader" },
{ displayName: 'Last Name', field: 'lastName', headerCellClass: "GridHeader" },
{ displayName: 'Active Status', field: 'activeStatus', headerCellClass: "GridHeader" },
{ displayName: 'RoleName', field: 'roleName', headerCellClass: "GridHeader" },
];
in the response I checked for null value.
if(response.data != null)
{
if (response.data.roleName === null) {
result = gridValue.slice(0, 3);
}
else {
result = gridValue;
}
$scope.gridOptions = {
paginationPageSize: 10,
columnDefs: result,
};
}
this helped me :)
I would recommend just using
that.grid.columnDefs[3].visible = false;
I haven't tested, but it should be more efficient than removing the column from your definition and re-applying the definition to the grid.
I think you could also set the visibility as a function that checks the data.
that.grid.columnDefs[3].visible = function () {
// replace with code checking grid.data
return false;
}

How to get selected rows id in ng-grid(AngularJS)

I wish deleted selected rows.so i want to get selected ids
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showSelectionCheckbox :true,
resizable :true,
showFooter: true,
multiSelect: true,
selectedItems:$scope.mySelections,
totalServerItems:'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
afterSelectionChange: function () {
$scope.selectedIDs = [];
angular.forEach($scope.mySelections, function ( item ) {
$scope.selectedIDs.push(item.ID);
});
},
columnDefs: [
{ field: 'iSchl_Id', displayName: 'ID' },
{ field: 'vSchl_Name', displayName: 'School Name' },
{ field: 'vCity', displayName: 'City' },
{ field: 'vState', displayName: 'State' },
{ field: 'vCountry', displayName: 'Country' },
{ field: 'vEmail', displayName: 'Email' },
{ field: 'iStatus', displayName: 'Status' },
{ field: '', cellTemplate: '<button ng-click="edit(row.entity)" title="Edit" class="icon-edit edt-btn"></button><button ng-click="delete(row.entity)" title="Delete" class="icon-trash dlt-btn"></button>',displayName: 'Action'}
],
};
I have used dynamic data in grid.I have tried How to get the cell value from ng-grid Example but i not getting selectedIDs.I getting error: item are not defined
Deleteall function :
$scope.deleteall = function() {
var verify=confirm('Are you sure to want this delete all selected record?');
if(verify==true)
{
//Please give me logic of selected ids
}
};

ng-grid click edit to open pop-up

I've a ng-grid which has Edit, and Delete buttons at the bottom of the grid.
On clicking the Edit button, I want it to open a Modal pop-up with info. from selected rows shown in the modal.
This is my HTML.
<div class="gridStyle" ng-grid="gridOptions"><!--ng-grid-->
</div>
<button ng-click="??" ng- disabled="!singleSelection()">Edit</button>
<button ng-click="??" ng-disabled="disabled">Delete</button>
And my JS is as follows:
$scope.gridOptions = {
data: 'scheduleData.scheduleList',
columnDefs: [
{ field: 'id', displayName: 'ID', visible: false },
{ field: 'disabled', displayName: 'Enabled', cellFilter: 'checkmark' }
{ field: 'dpName', displayName: 'Description' },
{ field: 'dpType', displayName: 'Type' },
{ field: 'dpProtection', displayName: 'Protection' },
{ field: 'doProtectionParam', displayName: 'DP Protection Paramters', visible: false },
{ field: 'startDate', displayName: 'Start Date', visible: false, cellFilter: 'date:\'M/d/yy h:mm a\'' },
{ field: 'endDate', displayName: 'End Date', visible: false, cellFilter: 'date:\'M/d/yy h:mm a\'' },
{ field: 'recurrenceType', displayName: 'Recurrence' },
{ field: 'everyNth', displayName: 'Estimated Duration', visible: false },
enableCellSelection: false,
enableSorting: true,
enableColumnResize: true,
enableColumnReordering: true,
showColumnMenu: true,
showFilter: true,
showFooter: true,
enableRowselection: true,
multiSelect: true,
selectedItems: $scope.selections
};
Any help will be greatly appreciated.
Thanks
I got this to working making the foll. change to HTML
<button ng-click="openModal(selections[0])" ng- disabled="disableButtons(selections)">Edit</button>
And in my JS,
$scope.openModal = (selections) => {
var modalInstance = $modal.open({
templateUrl: 'link to URL',
controller:RelatedController,
resolve: {
schedule: function () {
return selections.id == null ? selections : selections.clone();
}
}
});
}

Resources